javascript - (CSP) 内容安全策略。处理从外部库添加的内联样式的方法

Question

有没有办法处理从外部库添加的内联脚本/样式？
在我自己的风格中，我只使用随机数，但我不能将它添加到外部库中。

我使用 tooltip.io 并在库尝试运行时出现问题:

function() {
                var n = e("./styles/css/styles.scss")
                  , t = document.createElement("style");
                t.innerHTML = n,
                document.head.appendChild(t)
            }(),

CSP 显示

[Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-b123d558a63bc7e84aa7' ". Either the 'unsafe-inline' keyword, a hash ('sha256-SamqqFx+xVKq8AnoIWgeammNlDl/h4AP94HthfQO43Q='), or a nonce ('nonce-...') is required to enable inline execution.

有没有办法处理这种错误？

Answer 1

最近，我在一个项目中使用的 Jquery unobtrusive javascript 文件遇到了类似的问题，它是在 html 元素 Ul 上添加内联样式 =“display:none”
所以，我更喜欢哈希方法来允许你需要添加的内联样式
样式-src'自我'
'不安全的哈希'
'sha-256 {sha 哈希字符串}'
如果您在显示 csp 违规的控制台中的 chrome 开发人员工具中使用 chrome，则在错误消息的最后一行中还会显示 sha-256 字符串，您可以将其添加到内容安全策略 header 中，以便 csp 允许内联 css 或 js ，这种不安全的哈希方法比不安全的随机数更好，因为随机数需要每个请求都是唯一的，并且哈希是不可逆的，因此内容匹配哈希只允许始终
我觉得您应该尝试打开在 chrome 中出现错误的页面，看看它是否在控制台错误消息的最后一行显示 sha-256 哈希，如果您想手动生成像 sha-512 这样的哈希，您可以为样式生成哈希./styles/css/styles.scss 处理后生成的 .css 并将此哈希添加到 csp 属性中，例如

Content-Security-Policy: default-src 'none'; style-src 'self' 'sha-512{Manually generated sha-512}';

您可以使用的最后一个选项是样式 src 中的 unsafe-inline 但您可以尝试使用 unsafe-hash，这将比 unsafe-inline 更好