在普通 html 文件中对 script-src 和 style-src 使用 CSP 元标记答案

【问题标题】：Using CSP meta tag for script-src and style-src in normal html file在普通 html 文件中对 script-src 和 style-src 使用 CSP 元标记
【发布时间】：2021-04-02 18:23:19
【问题描述】：

这是我的 demo.html 文件，我在其中使用 CSP 元标记和外部 js 和 css 文件。

demo.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' ; object-src 'none';
        style-src 'self';
        script-src 'sha256-Ql3n7tC/2D6wSTlQY8RcOKXhq02zfdaSDviOhpvbYWw=';
       " >
      <script src="scripts.js"></script>
    </head>
<body>
<p>Hello World</p>
<h2>JavaScript Alert</h2>

<button>Try it</button>

</body>
</html>

这是我的 js 文件

console.log("Hello");

现在我使用了 CSP 元标记，它接受 sha256 哈希码来传递 js 文件，即 script-src，我计算了 sha256 哈希码，即 'sha256-Ql3n7tC/2D6wSTlQY8RcOKXhq02zfdaSDviOhpvbYWw='用 script-src 编写。但是控制台仍然不接受它。可能是什么问题？

【问题讨论】：

标签： html hashcode content-security-policy sha256 developer-tools

【解决方案1】：

有3个问题：

console.log("Hello"); 的正确哈希是 'sha256-efGKf8oWIWhXl5BsggWDZ+M7Bf5AirxrKOCBujdLAWg='
您需要添加integrity= 属性以允许外部脚本通过'hash-value':
<script src="script.js" integrity='sha256-efGKf8oWIWhXl5BsggWDZ+M7Bf5AirxrKOCBujdLAWg='></script>
Firefox 浏览器仍然支持not support 'hash-value' 以允许外部脚本（Safari 也是如此）。因此使用 Chrome 来观察结果。

【讨论】：

【解决方案2】：

SHA 是为特定脚本计算的校验和，应与它一起加载。看看它是如何在知名库中使用的。例如引导

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

您尝试的是随机数（128 位），看起来像这样：

// Content-Security-Policy: script-src 'dsd14e314df23e2d32r' 

<script nonce="dsd14e314df23e2d32r" src="https://app.domain.com/app.js"></script>

【讨论】：