使用 Firebase 时从内容安全策略中删除“unsafe-inline”作为“script-src”

Question

我想从我的网络应用程序的内容安全策略中删除“script-src”中的“unsafe-inline”，并提高其安全性。但不幸的是，Firebase 似乎需要它才能工作（我正在使用 Firebase 身份验证和 Firestore）。

如何创建更安全的网络应用程序？我读到了有关使用

nonce

的信息，但我不确定如何指定 firebase 脚本（我在 Nextjs 应用程序中通过 npm 包使用 Web 模块）。

谢谢

Answer 1

nonce

属性可让您将某些内联

script

和

style

元素“列入白名单”，同时避免使用 CSP

unsafe-inline

指令（这将允许 all 内联

script

和

style

），因此您通常仍然保留不允许内联“脚本”的关键 CSP 功能

script

/

style

。

因此

nonce

属性是一种告诉浏览器特定脚本或样式元素的内联内容不是由某些（恶意）第三方注入到文档中的方法，而是由控制该脚本或样式元素的人故意放入文档中的。提供文档的服务器。

Web 基础知识内容安全策略文章的如果您绝对必须使用它部分有一个很好的示例，说明如何使用

nonce

属性，相当于以下步骤：

对于您的 Web 服务器收到的针对特定文档的每个请求，让您的后端从加密安全随机数生成器生成至少 128 位的随机 Base64 编码字符串；例如，
```
EDNnf03nceIOfn39fn3e9h3sdfa
```
。这就是你的随机数。
获取步骤 1 中生成的随机数，对于您想要“列入白名单”的任何内联
```
script
```
/
```
style
```
，让后端代码在通过网络发送文档之前将
```
nonce
```
属性插入到文档中，这样随机数作为值：
```
 <script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">…</script>
```
获取步骤 1 中生成的随机数，在前面添加
```
nonce-
```
，并使后端生成一个 CSP 标头，其中包含
```
script-src
```
或
```
style-src
```
的源列表值：
```
 Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'
```

因此，使用随机数的机制是一种替代方案，而不是让后端生成您想要允许的内联

script

或

style

内容的哈希，然后在您的相应源列表中指定该哈希。 CSP 标头。

注意：浏览器不会（不能）检查服务器发送的随机数值在页面请求之间是否实际发生变化；因此，有可能（尽管完全不建议）跳过上面的 1，并且不让后端为随机数动态执行任何操作，在这种情况下，您可以将具有静态值的

nonce

属性放入文档的 HTML 源中，发送具有相同随机数值的静态 CSP 标头。

但是你不想以这种方式使用静态随机数的原因是，它几乎完全违背了使用随机数的全部目的——因为，如果你要使用这样的静态随机数，此时您不妨只使用

unsafe-inline

。

至于哪些元素是“nonceable”：CSP 规范当前限制浏览器仅检查

script

和

style

元素的随机数。以下是规格详情：

在https://w3c.github.io/webappsec-csp/#match-element-to-source-list中，请参阅步骤2：
如果类型是“script”或“style”，并且第6.6节.3.1 元素是否为 nonceable？返回“Nonceable”...
在 https://w3c.github.io/webappsec-csp/#is-element-nonceable，Is element nonceable? 算法本身不仅仅检查
```
script
```
/
```
style
```
元素；但规范中唯一调用的地方是上面引用的部分，这将其限制为
```
script
```
/
```
style
```
。因此，如果您在任何其他元素上放置随机数，规范要求浏览器忽略它。