AEM Cloud Service - Apply Content-Security-Policy Header in cdn.yaml to restrict showing in iFrame

Quick post on using config/cdn.yaml to apply the Content-Security-Policy header and restrict showing CS Publish Env Pages only in supported third party domains using iFrame for eg. here https://schoudry.github.io/, without which you may get the error...

Framing 'https://publish-p10961-e1322140.adobeaemcloud.com/' violates the following Content Security Policy directive: "frame-ancestors 'self' https://experience.adobe.com". The request has been blocked.

No CSP Header

Add CSP Header in config/cdn.yaml

kind: "CDN"

version: "1"

metadata:

    envTypes: [ "rde", "dev" ]

data:

  responseTransformations:

    rules:

      - name: "frame-security-policy-for-aem-site"

        when:

            reqProperty: domain

            equals: "publish-p10961-e1322140.adobeaemcloud.com"

        actions:

          - type: set

            value: frame-ancestors 'self' https://schoudry.github.io https://experience.adobe.com

            respHeader: Content-Security-Policy      

          - type: set

            value: EAEM-SITES-2

            respHeader: X-EAEM-SITES-TEST            

Deploy to RDE: aio aem:rde:install -t env-config  "C:\dev\projects\eaem-extensions\eaem-cloud-service\eaem-random-test\config"

With CSP Header for allowing Third Party