search

amsul / pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
http://amsul.ca/pickadate.js
MIT License
7.7k stars 1.02k forks source link

CSP violation due to inline style when opening date picker #1205

Open aimfeld opened 4 years ago

aimfeld commented 4 years ago

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?

DanielRuf commented 4 years ago

Hi @aimfeld,

see https://github.com/amsul/pickadate.js/blob/3.6.4/lib/picker.js#L260-L264

aimfeld commented 4 years ago

@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?

DanielRuf commented 4 years ago

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.

aimfeld commented 4 years ago

@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..

DanielRuf commented 4 years ago

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