Comments (5)
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.
from braintree-web-drop-in.
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.
from braintree-web-drop-in.
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
from braintree-web-drop-in.
Hi @jplukarski , yes. I still have a problem with this.
I would be grateful for your help.
from braintree-web-drop-in.
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.
from braintree-web-drop-in.
Related Issues (20)
- GooglePay Button Doesn't Work In Sandbox or Production HOT 4
- Maestro cards are not supported using the Drop-In HOT 1
- On iOS Safari, rapidly switching DropIn payment methods causes soft lock (rendering glitch) HOT 2
- Financing Options HOT 1
- Capture errors when there is an Apple Pay error. HOT 1
- updateConfiguration cannot update credit card properties HOT 3
- > "https://api-m.paypal.com" HOT 1
- hoISeoI373mTmmqZxBUwNIeIGfEB4JQH5kNWfVB6tWxeiIUkTkw0EnHdwBJWRBOy HOT 1
- [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. HOT 2
- Apple Pay svg size iPhone 15 series / macOS Sonoma HOT 1
- updated CSP configuration HOT 4
- DropUI Fails to render with ApplePay on newer iPhones HOT 3
- Apple Pay UI goes disappears in a second HOT 1
- data-collector.min.js doesn't loaded HOT 3
- Display new card input form automatically when drop-in is initialized with customerId HOT 1
- Email from Braintree re Updates to required 3D Secure data fields HOT 12
- Initial render events randomly triggered HOT 1
- AuthenticationInsight seem not supported and impossible HOT 1
- Device Data is never returned HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from braintree-web-drop-in.