Style-src JQuery 和 Modernizr 的 CSP 错误

Question

当我在我的 CSP headers 上从 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 控制台时，link 我发现了错误：

<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 中正常工作（或至少不会崩溃）。同时，您可以将错误包含的 Modernizr 文件的 sha 添加到您的 script-src 中，您应该没问题。

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>

Style-src JQuery 和 Modernizr 的 CSP 错误

Style-src CSP Errors with JQuery and Modernizr

jquery

security

modernizr

content-security-policy