Modernizr Causes Content Security Policy (CSP) Violation Errors

31
votes

I am attempting to use the new Content Security Policy (CSP) HTTP headers on a test site. When I use CSP in conjunction with Modernizr I get CSP violation errors. This is the CSP policy I am using:

Content-Security-Policy: default-src 'self'; script-src 'self' ajax.googleapis.com ajax.aspnetcdn.com; style-src 'self'; img-src 'self'; font-src 'self'; report-uri /WebResource.axd?cspReport=true

These are the errors from the Chrome browser console:

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-...'), or a nonce ('nonce-...') is required to enable inline execution.

window.Modernizr.injectElementWithStyles   - modernizr-2.7.2.js:134
window.Modernizr.tests.touch               - modernizr-2.7.2.js:457(anonymous function)
modernizr-2.7.2.js:949(anonymous function) - modernizr-2.7.2.js:1406

I discovered the following workaround on the Github Modernizr site. However, the workaround was first put forward in March and doing a little Google-Fu I can find no fixes or workarounds to this issue.

I know that I can include the unsafe-inline directive which can get around this error but this also enables unsafe code to run and negates the use of CSP in the first place. Does anyone have any solutions?

Update - What is CSP

CSP is a HTTP header supported by all major browsers (Including Edge). Essentially its a white list of content the browser is allowed to use to render the page. Find out more here or read Mozilla's documentation for CSP here and here.

Update - Help Highlight CSP

CSP is now available on all browsers (Edge added support, yay!) and its a gigantic leap forward in web security. For those interested in getting more third party support for CSP, see these:

  1. Modernizr support for CSP
  2. Visual Studio support for CSP. Note that browser link does not work if you have CSP enabled as it uses inline JavaScript.
  3. Visual Studio Web Essentials Extension support for CSP. Web Essentials is a Visual Studio addin, whose features often end up in the next version of Visual Studio.
2
javascriptmodernizrcontent-security-policy
Why opt-in to block a functionality, and then take issue with a library using that functionality? – dandavis
The functionality being blocked is in-line CSS and JavaScript which can cause security vulnerabilities. Using separate CSS and JavaScript files is perfectly fine. Modernizr makes use of the in-lining technique to perform its tests. It could also work if it provided seperate files. For a deeper understanding of CSP, I recommend reading developer.mozilla.org/en-US/docs/Web/Security/CSP/… and developer.mozilla.org/en-US/docs/Web/Security/CSP – Muhammad Rehan Saeed
Wow, this is a total deal-breaker for Modenizr in secure environments. – Keith
@Keith If you feel that way (As I do) then please do up-vote or comment on the listed articles to raise more awareness of CSP. – Muhammad Rehan Saeed
Amazing how here we are in 2020 ( 6 YEARS later ), and modernizr has not built in conventions to deal with the growing number of production sites using CSP. "unsafe-inline" is NOT a solution. Appalling, making us rip modernizr out of our workflow entirely. We cannot be bothered fixing someone else's crap all the time. – IncredibleHat

2 Answers

5
votes

I suspect there's no other solution than to rewrite the parts of Modernizr that use inline code or dynamically evaluated code (which applies to both JS and CSS). The experiences of AngularJS ngCsp might be useful here.

-1
votes

I found a fix without having to use unsafe-inline.

You can modify the unminimized Modernizr at one line:

fakeBody = body || document.createElement('body');

convert to 

fakeBody = document.createElement('body');

works on IE9, Firefox, and Chrome.