pickadate.js
pickadate.js copied to clipboard
amsul
CSP violation due to inline style when opening date picker
When opening the date picker, an inline style style="overflow: hidden; padding-right: 17px;" is added to the <body> tag. This violates our content security policy and we get errors like this
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' fonts.googleapis.com www.gstatic.com". Either the 'unsafe-inline' keyword, a hash ('sha256-inC3zXVH4w6/TYv9oscJxubPBYJBkbtT04EyI6UI5bg='), or a nonce ('nonce-...') is required to enable inline execution.
We'd rather not allow unsafe-inline. Is there a way to change this behavior of the date picker, e.g. by adding a class on opening instead of an inline style?
Hi @aimfeld,
see https://github.com/amsul/pickadate.js/blob/3.6.4/lib/picker.js#L260-L264
@DanielRuf Thanks for your quick response 👍 . From looking at your linked code, I'm not sure how to configure the date picker to prevent these styles from being applied. It seems the only option is to switch to the classic theme, which I prefer not to do. I guess the best way to make pickadate play nicely with Content Security Policy would be to apply a class to <body> instead of inline styles. What do you think?
It seems the only option is to switch to the classic theme
Exactly.
I guess the best way to make pickadate play nicely with Content Security Policy would be to apply a class to
<body>instead of inline styles. What do you think?
This sounds good, do you want to provide a PR to improve / fix this?
Please keep in mind that v3 is in maintenance and development is currently happening on v5.
@DanielRuf I realized it's a little tricky, since the padding-right property is calculated dynamically. I'm not really a frontend expert, so I'm not sure what the best option here..
This can be probably solved with data-padding and CSS with attr(data-padding).
https://caniuse.com/#feat=css-gencontent https://caniuse.com/#feat=mdn-css_types_attr