Mollie components & Content Security Policy

[Veilleuse-00]

Hi!

Mollie components have inline style that CSP doesn't allow, even if whitelisting "js.mollie.com" in it (also tried *.mollie.com).

Console message :
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' js.mollie.com

Is there any way to work around this?

Thank you in advance.

[Lovau]

I would love to hear about this as well ...

[Veilleuse-00]

Two years later and still with same problem.
I just can't use CSP on the payment page of my site, whether including js.mollie.com, as it is said in documentation, or *.mollie.com in CSP policy.
Please, have you got any solution for that?

[diogoosorio]

@Veilleuse-00, I apologize for the (very) late reply.

Do you mind trying to tweak the CSP policy / header into something similar to: default-src 'self' js.mollie.com; style-src 'unsafe-inline'? The key difference being the style-src directive (which seems to be the problem you're facing on your integration).

[Veilleuse-00]

I have tried your solution and it seems to work fine 👍 Thank you very much for your help @diogoosorio.!
EDIT : To load payment methods images, I had to add *.mollie.com in the img-src directive and js.mollie.com in frame-src directive for fields to work.

[diogoosorio]

@Veilleuse-00 I'm trying to update the documentation around this.

Do you mind sharing your complete Content-Security-Policy header, it'd be super helpful for me to understand the issues you've faced. I feel that you probably have a default-src (and thus the need to define a frame-src and img-src)?

[Veilleuse-00]

@diogoosorio Yes, that's it.
Here are CSP rules used before applying the ccrrection :

header("Content-Security-Policy: 
default-src 'self' *.mollie.com; 
base-uri 'self'; 
script-src 'self' https://*.googletagmanager.com *.mollie.com 'nonce-{$csp_nonce}' 'unsafe-inline'; 
script-src-elem 'self' *.google.com *.googletagmanager.com *.mollie.com 'nonce-{$csp_nonce}' 'unsafe-inline';
img-src 'self' data: *.mollie.com https://*.google-analytics.com https://*.googletagmanager.com 'nonce-{$csp_nonce}' 'unsafe-inline';
style-src 'self' *.mollie.com 'nonce-{$csp_nonce}' 'unsafe-inline'; 
frame-src 'self' *.mollie.com *.google.com; 
connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com;
");

And the CSP rules after correction that work fine :

header("Content-Security-Policy: 
default-src 'self' js.mollie.com; 
base-uri 'self'; 
script-src 'self' https://*.googletagmanager.com 'nonce-{$csp_nonce}' 'unsafe-inline'; 
script-src-elem 'self' *.google.com *.googletagmanager.com  'nonce-{$csp_nonce}' 'unsafe-inline'; 
img-src 'self' data:  https://*.google-analytics.com https://*.googletagmanager.com *.mollie.com 'nonce-{$csp_nonce}' 'unsafe-inline'; 
style-src 'self' 'unsafe-inline'; 
frame-src 'self' js.mollie.com *.google.com; 
connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com;
");