symfonycontent-security-policynelmiocorsbundle

How to set CSP frame-ancestors in NelmioCORSBundle

I'm trying to integrate Paddle.com checkout in a Symfony 6 project.

The page which integrates the checkout windows link to the Paddle.js like this:

<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>

Now when trying to open the checkout layer I see following error on the console: enter image description here

So I guess I have to set the "frame-ancestors" content security policy which would allow localhost (in this case) to open an iframe with content from Paddle.com.

Now there's NelmioCORSBundle and I'm stuck with the according config:

paths:
    '^/checkout/':
        allow_origin: ['^https://(.+.)?localhost:8000']
        allow_headers: ['frame-ancestors']

Unfortunately this doesn't work. I would be thankful if someone could point me to the right direction as I couldn't find an example on the web so far.

Thanks in advance

Solution

  • NelmioCorsBundle doesn't deal with the CSP (Content Security Policy), to which the error refers.

    Luckily, there's a NelmioSecurityBundle that helps with the CSP: https://symfony.com/bundles/NelmioSecurityBundle/current/index.html

    It may seem slightly intimidating as it has a ton of configurable options, but in your case you could do something like this:

    csp:
    enforce: true
    report-only: false
    directives:
        default-src: [ 'self' ]
        script-src:
            - "'self'"
            - "https://cdn.paddle.com"
        frame-src:
            - "https://*.paddle.com"
        frame-ancestors:
            - "'self'"
            - "http://localhost:8000"

    If you set report-only to true you can test without enforcing the csp.

    The frame-src allows you to have Paddle content inside the iframe.

    Note that this may require some tweaking on your end.