search

braintree / braintree-web-drop-in

Braintree Drop-in for the web
MIT License
200 stars 126 forks source link

CSP for Styles #611

Closed ayrault-sean closed 4 years ago

ayrault-sean commented 4 years ago

General information

Issue description

I'm trying to lock down the CSP for my website. I have everything I would like except inline scripts/styles. Inline scripts are another story, but I'm blocked on styles by Braintree. When I do:

import {create as createDropins} from 'braintree-web-drop-in';

createDropins({
    container: <container>,
});

2 inline style tags are put in the <head>, one for .gpay-button, the other for .gpay-button.long.

I'm using webpack, so all the styles for the drop-in could go in there. I've been looking around the braintree docs, but can't find anything about including the styles into the bundle, much less removing these 2 <style> tags. I could find the styles in the npm package, but I assume the <style> tags would still get output, plus this would still be undocumented behavior that could change in an update to the package.

The docs surrounding CSP, at https://braintree.github.io/braintree-web-drop-in/docs/current/index.html#content-security-policy, as well as the braintree-web equivalent, https://braintree.github.io/braintree-web/current/index.html#content-security-policy, only mention JavaScript CSP, not CSS. I found an old issue, #163, that mentions adding a <link> with an id of braintree-dropin-stylesheet. I added this, with no href, but it didn't remove the tags. Again, I could go hunting around for the path, but this would still be undocumented behavior, unless I just can't find it in the docs.

Finally, adding a <link> is fine and all, but it's another element to add, and another resource to cache. Is there a way to remove the tags with an option to the create call? If not, could you consider adding this?

1) How do I add the drop-in styles to the webpack bundle? 2) Once I do that, how do I get rid of these <style> tags? 3) Is this already documented somewhere?

ayrault-sean commented 4 years ago

Sorry, I found PayPal-specific CSP rules in the docs, and they mention keeping style-src 'unsafe-inline', presumably for that .gpay-button. I don't know how I missed it the first time, typical of me. I will open another issue on removing the need for unsafe-inline, for both JavaScript & CSS.

crookedneighbor commented 4 years ago

The good news is that we'll be updating the PayPal SDK to v5 in the next major version, and that change will drop the requirement for style-src 'unsafe-line' for accepting PayPal accounts.

The bad news is that those styles you pointed out are from the Google Pay SDK, not PayPal. We'll reach out to Google about it, but we may just need to add the same rule under the Google section of the Content Security Policy docs.

trisys3 commented 4 years ago

Thanks, I didn't expect anyone to comment so soon, especially since I already closed the issue! I saw some stuff about PayPal v5, but it was early last year so I kinda gave up hope, but it's good to know it's still in the cards.