Full CSP support about braintree-web-drop-in

[jplukarski]

Hello @rublon-mra ,

We outline all the directives you need to set for your Content Security Policy in our reference docs for the Drop-in. See the sections titled "Basic Directives" and "3D Secure Specific Directives" and make sure you have all the directives in your CSP.

Let us know if you continue to see this issue with all the directives in place. We'll keep this open until you can verify.

[rublon-mra]

Hi @jplukarski , I verified this even before I added this issue. I set all these domains in connect-src, script-src and style-src directives for Content Security Policy (from "Basic Directives" and "3D Secure Specific Directives" sections).
My problems come from style-loader/addStyles.js - functions insertStyleElement and applyToTag.

My CSP:
frame-ancestors 'none';base-uri 'self';connect-src 'self' my-api-domain.com api.sandbox.braintreegateway.com client-analytics.sandbox.braintreegateway.com *.braintree-api.com *.cardinalcommerce.com;media-src 'self';object-src 'none';script-src 'self' 'nonce-random_nonce_value' js.braintreegateway.com assets.braintreegateway.com songbirdstag.cardinalcommerce.com;style-src 'self' 'nonce-random_nonce_value' assets.braintreegateway.com

After analysis, I noticed that these 2 styles are blocked (due to the fact that they do not have the nonce attribute) - <style> tags are adding to the head section of the page:

.Cardinal-paymentButton{cursor:pointer;margin:3px}.discoverWallet...

.cardinalOverlay-mask{position:fixed;z-index:999998;top:0;left:0;opacity:0...

Angular works in such a way that it adds nonces only for styles and scripts, which are created right away when the index.html is generated, and here these styles are added after the DropinUI is displayed.

[jplukarski]

Hey @rublon-mra , thanks for your patience as we had to shift our prioritize for the Black Friday/Cyber Monday season. We are going to pick up investigations into this issue.

To clarify, are you still seeing these errors when not setting unsafe-inline in your style-source directives?

Angular works in such a way that it adds nonces only for styles and scripts, which are created right away when the index.html is generated, and here these styles are added after the DropinUI is displayed.

We are going to investigate, though it might be that this is a limitation with Angular and the Drop-In. For internal reference of this issue -> 29294

[rublon-mra]

Hi @jplukarski , yes. I still have a problem with this.
I would be grateful for your help.

[jplukarski]

Hey @rublon-mra ,

After some further investigation, it looks like this is a limitation in Angular 16 with CSP and dynamically added styles. This article explains it very well:

There are some things to keep in mind, though: This setup covers the core Angular functionality. If you use additional frameworks that also add <style> tags dynamically, you might need additional configuration of even scripting to ensure that their styles still work. So while adding nonces for styles is not a silver bullet, I think it is a relatively easy way to improve on your existing CSP and secure your application a bit better.

We are going to close this issue since it is not a bug we can fix within our SDK. Let us know if there is anything else we can help you out with.