JQuery和Modernizr的Style-src CSP错误

Question

当我从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)

为什么会发生这种情况，我似乎迷失了，似乎无法在我的Google搜索中找到任何真实的方向。 这些错误可能引发我如何使用这些库吗？ 任何帮助或见解表示赞赏。

Answer 1

因此，这很糟糕。

您没有做错任何事情，只是为了让Modernizr测试样式是否可用，它必须将样式注入页面。 它通过您所包含的代码片段来实现。 CSP阻止了此操作，因为您不允许事情通过javascript添加任何CSS。

我正在努力寻找一种方法来使Modernizr正常运行（或至少不会崩溃）。 同时，您可以在脚本src内添加该错误包含的Modernizr文件的阴影，您应该可以。

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>