使用 JQuery 和 Modernizr 的 Style-src CSP 错误答案

【问题标题】：Style-src CSP Errors with JQuery and Modernizr使用 JQuery 和 Modernizr 的 Style-src CSP 错误
【发布时间】：2015-05-29 18:14:28
【问题描述】：

当我从 CSP 标头上的 script-src 中删除 unsafe-inline 时，Modernizr 2.8.3 上出现多个错误，JQuery 2.1.3 上出现错误。这很奇怪，因为我只在我的一个网站上收到此错误，尽管我在其他网站上使用相同的库而没有 CSP 问题。

错误示例：

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.

我有一种预感是和剧本的部分有关：

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

当我单击 chrome 控制台将我链接到错误时，我被放置在此处：

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

对于为什么会发生这种情况非常迷茫，并且似乎无法在我的谷歌搜索中找到任何真正的方向。这些错误是否会引发我如何使用这些库？任何帮助或见解表示赞赏。

【问题讨论】：

标签： jquery security modernizr content-security-policy

【解决方案1】：

所以，这很糟糕。

您没有做错任何事，只是为了让 Modernizr 测试样式是否可用，它必须将样式注入页面。它通过您包含的 sn-p 执行此操作。这被 CSP 阻止了，因为您不允许通过 javascript 添加任何 css，这是这样做的。

我正在努力想办法让这个在 Modernizr 中正常工作（或至少不会崩溃）。同时，您可以将错误包含在您的 script-src 中的 Modernizr 文件的 sha 添加到您的 script-src 中，您应该没问题。

【讨论】：

【解决方案2】：

你可以尝试使用modernizr在标签中注入一个nonce并像这样修改库：

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

并在标签中作为属性：

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

【讨论】：