Content Security Policy restrictions workaround

[termi]

fixes #1262

[patrickkettner]

is there a reason we wouldn't just set the .style attr all the time?

[termi]

Setting .style attr all the time can affect anything else

[patrickkettner]

Sorry, I don't understand, could you rephrase?

[termi]

setting the 'style' attribute, regardless of whether or not CSP is on, can break some feature detections in some random browser.

[patrickkettner]

I totally get that it may break, however we are doing it here already. plus you are catching anonmous errors all over the place, which would result in the tests being inaccurate. I think the best thing to do would be to change it all to style, and run the whole thing through the browserstack suite of supported browsers to see if it breaks anywhere

[SlexAxton]

Doesn't this just fix 'unsafe-eval' and not 'unsafe-inline'? Are there a lot of people that are blocking one and not the other? I believe the attack vector is the same in both cases, you just need to inject selectors when injecting style sheets.

[ghost]

Maybe this issue can be fixed by changing some functions.

Like..

// Check for css support
function checkCssSupport(property) {
var body = document.body || document.documentElement, style = body.style;

// No css support detected
if (typeof style == 'undefined') {
    return false;
}

// Tests for standard prop
if (typeof style[property] == 'string') {
    return true;
}

// Tests for vendor specific prop
var v = [ 'Moz', 'Webkit', 'Khtml', 'O', 'ms', 'Icab' ];
property = property.charAt(0).toUpperCase() + property.substr(1);
for (var i = 0; i < v.length; i++) {
    if (typeof style[v[i] + property] == 'string') {
        return true;
    }
}

return false;

}

From
https://gist.github.com/jackfuchs/556448

[RehanSaeed]

Cross Post From StackOverflow.

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

This workaround was first put forward in March, is there no more progress in getting this issue resolved. There is a comment in the StackOverflow question in which someone suggests taking a look at AngularJS as they have full support for CSP.

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.

[quinncomendant]

What is the status of this fix? I too am trying to find a solution to using Modernizr with CSP.

[RehanSaeed]

+1

[quinncomendant]

FYI This is being discussed in issue #1262

[Identekit]

Is there a fix for this that doesn't involve 'unsafe-eval' or 'unsafe-inline'? I just downloaded the latest from NuGet, v. 2.8.3 but still received the following errors:

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