Just dropping some current experience here.

Content security policies are big mess in both chrome and firefox.

Chrome has some 4 years old "bug" where you can't add hash of JS file to 'style-src' policy to permit inline-styles THAT would be set by this script (jQuery actually).
Firefox is beautifully unhelpful, it just pops of error "blocked ..something..", not even saying what it was.

And I am missing a pair of some steel balls to ask about this on SO because there is this much of very similar questions, nonetheless -if I did read them right- every one of them is talking about enabling style attribute, and that's something different.

EDIT2: Chrome currently generates 138 errors "jquery-3.4.0.min.js:2 Refused to apply inline style..." , this ain't hitting production.

  • 0
    You don't need to CSP allow styles that will be set via JS. You just have to allow that JS file to be run.

    I have quite some dynamic use cases where I can't style statically via CSS and do it via JS, and I never have CSP issues with that although my CSP is very restrictive.
  • 0
    That is what I thought and that is what documentation says. But it's not the reality.

    Consider this, all scripts are local, no cdns:
    script-src: 'self' 'sha256-jqueryhash'
    image-src: 'self' data: image/png
    style-src 'self' 'sha256-jqueryhash'

    The jquery hash is the one chrome generated inside it's error.
    Still getting sh/tload of 'Refused to apply inline style' errors.
  • 1
    @GTom everything local? That's odd because in that case, you shouldn't need to add the jQuery hash at all as it is already in 'self'. Or are you inlining the jQuery stuff into your HTML?

    But even then, you only need it on the JS CSP. Once the JS is allowed to run, it may alter the CSS styles of the site, I'm doing that with (small) inline JS as well as with JS in separate JS files.

    Also, before I removes jQuery, I did that with jQuery, so that works also.
  • 0
    And that's the problem, it SHOULD work just with 'self', but remove the hash and even firefox starts to generate massive amount of errors.

    The page itself works without noticeable difference but console gets spammed everytime I do something on it, bootstrap-table calls something from jquery.
  • 0
    Hmm do you use default-src: 'self'?
  • 1
    @Fast-Nop Yes, no change.

    EDIT: Found the balls, heading to SO
  • 1
    Ah I guess what's going wrong here: you're using JS to inject HTML with inline style attributes, and that gets blocked.

    It's also why I havn't seen such issues, because I style stuff from JS via its style member. So I e.g. generate a new div and set new_div.style.top="20px" in JS. I don't inject raw HTML with styles like bla.innerHTML += '<div top="20px"></div>'.
  • 0
    I am not doing this either, I have everything outsourced in files, scripts both styles.
    I bet some function in jQuery is definitely trying what you have described here and mainly chrome perceives it as csp violation - but then if I read everything right, adding hash should permit it ?
  • 1
    @GTom you could use the non-minified jQuery version to see what the offending lines actually are and what they do.

    Then the question is, are these style things really set in one pass? Or is it some iterative thing where they gradually add more things? In the latter case, it would become a lot of work. Especially if the whole plot is used for some framework that tries to autoconfigure itself to the browser.
  • 1
    I have posted about this on SO, if I am getting burned on this I am not asking on SO again. ANd i will try the non minified version to debug more.

    Anyway, thanks very much for your help!
Add Comment