Content-Security-Policy is violated

[koenpunt]

Currently if you go to the demo page, open the Developer Console, and then click on a Chosen select, you will see the following error:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

This happens because we set the options as one big string of html, which consists of list items with style attributes.

It might actually be that this is a regression with jQuery 3, because I can't remember having this issue when I addressed it in #2723. It could also be that the browser's (currently only tested Chrome and Chrome Canary) CSP implementation has become more strict.

The only way around it is probably to programmatically constructing the options (e.g. createElement), and appending those to the DOM.

What do you think @harvesthq/chosen-developers @stof?

[tjschuck]

@koenpunt Just to clarify the severity of the "bug" label here — I can reproduced this, i.e. I see the same output in the console, but everything seems to be "working". What's the actual user-facing issue here aside from the console logging?

[koenpunt]

When you have a style attribute on a option, it will copy it to the the li. But now that I think of it, if someone uses those inline styles with a CSP, they also need to whitelist that.

So the easy fix is probably not copying the style attribute when it's empty.