Style-src CSP Errors with JQuery and Modernizr

Question

When I remove unsafe-inline from script-src on my CSP headers I get multiple errors on Modernizr 2.8.3 and a error on JQuery 2.1.3. It's strange because I only get this error on one of my sites although I am using the same libraries on others with no CSP issue.

Error example:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' *.github.com *.bootstrapcdn.com *.jsdelivr.net *.twitter.com *.googleapis.com *.google.com dmjwor2go9n1u.cloudfront.net". Either the 'unsafe-inline' keyword, a hash ('sha256-CwE3Bg0VYQOIdNAkbB_Btdkhul49qZuwgNCMPgNY5zw='), or a nonce ('nonce-...') is required to enable inline execution.

I have a hunch is has something to do with the part of the script:

style = ['&#173;','<style id="s', mod, '">', rule, '</style>'].join('');

When I click the chrome console to link me to the error I get placed around here:

<style id="s',v,'">',e,"</style>"].join(""),u.id=v,(l?u:d).innerHTML+=a,d.appendChild(u)

Pretty lost as to why this is happening and can't seem to find any real direction in my google searching. Could these errors be firing as to how I am using these libraries? Any help or insight is appreciated.

Answer 1

So, this sucks.

You are not doing anything wrong, its just that in order for Modernizr to test if styles are available, it has to inject styles into the page. It does this via the snippet you included. This is blocked by CSP because you are not allowing for things to add any css via javascript, which this is doing.

I am working on trying to figure out a way to get this working (or at least not crashing) in Modernizr. In the mean time, you can add the sha of the Modernizr file that the error includes inside of your script-src and you should be ok.

Answer 2

you can try injecting a nonce in the tag using modernizr and modify the library like this:

return f = ["&#173;", '<style nonce="'+ document.currentScript.getAttribute('style_nonce')+'" id="s', r, '">', a, "</style>"].join(""),
        j.id = r,
        (k ? j : l).innerHTML += f,
        l.appendChild(j),
        k || (l.style.background = "",
        l.style.overflow = "hidden",
        i = q.style.overflow,
        q.style.overflow = "hidden",
        q.appendChild(l)),
        g = c(j, a),
        k ? j.parentNode.removeChild(j) : (l.parentNode.removeChild(l),
        q.style.overflow = i),
        !!g

and in the tag as an attribute:

<script src="{{ url_for('static', filename='js/vendor/modernizr.js') }}" style_nonce={{style_nonce}}></script>