Question

当我从我的CSP标头上的unsafe-inline中删除script-src时，我在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)

很遗憾为什么会发生这种情况，似乎无法在谷歌搜索中找到任何真正的方向。这些错误是否会触发我如何使用这些库？任何帮助或见解表示赞赏。

Answer 1

所以，这很糟糕。

你没有做错什么，只是为了让Modernizr测试样式是否可用，它必须在页面中注入样式。它通过您包含的代码段执行此操作。这被CSP阻止了，因为你不允许通过javascript添加任何css，这就是这样做。

我正在努力寻找一种方法来使这个工作（或至少不会崩溃）在Modernizr。同时，你可以在script-src中添加错误包含的Modernizr文件的sha，你应该没问题。

Answer 2

您可以尝试使用modernizr在标记中注入随机数，并按如下所示修改库：

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>

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

2 个答案: