使用内容安全策略增强您的 HTTPS 网站。
概述
如何实现
避免使用不安全的内联哈希
在创建网站或应用程序时，HTTPS 正迅速成为标准配置。大多数托管平台都让通过 HTTPS 托管网站变得非常简单。GitHub Pages 甚至完全免费，只需点击一个按钮即可完成。然而，如果没有设置严格的内容安全策略 (CSP)，您的网站仍然存在安全漏洞。内容安全策略并非开发过程中“令人兴奋”的部分，而且严格的 CSP 可能会导致网站崩溃。本文旨在帮助您阐明在设置 CSP 时可能遇到的一些常见问题。
概述
内容安全策略 (CSP) 是一种 HTTP 标头，旨在防御各种网站攻击，主要是跨站脚本攻击 (XSS)。一个好的 CSP 应该尽可能严格，仅允许运行网站所必需的第三方外部 JS 和 CSS 脚本。另一个良好（几乎是必备）的做法是为所有内联 JavaScript 提供 nonce 标签或基于 SHA 的哈希值（稍后我会解释如何操作）。
然而，所有这些屏蔽措施很快就会演变成严重的问题，因为任何未在内容安全策略 (CSP) 中列出的脚本都会被屏蔽。如果某个脚本对网站运行至关重要（例如，某个 JS 库的运行时脚本），则会导致整个页面崩溃。因此，在生产环境中部署 CSP 之前，务必先在测试环境中进行测试。
如何实现
实现内容安全策略 (CSP) 有两种方法：一种是直接在 `<head>` 标签中添加index.html，另一种是通过服务器端实现。直接添加到 `<head>` 标签非常方便，尤其适用于静态托管网站，或者您只需要在 CSP 中允许少量外部脚本。然而，服务器端实现 CSP 的优势在于，您可以根据需要动态添加脚本，从而创建额外的安全层。
无论你选择哪个方向，在添加脚本时都需要考虑一些规则。
-
default-src顾名思义，这是未在 CSP 中应用的任何指令的默认回退方案。常见的回退来源是“self”，它将只允许来自源的脚本。 -
script-src此指令定义了哪些来源可以包含其 JS 文件。定义这些来源是保护网站的关键指令之一，但请记住，如果设置不正确，它也是最容易导致网站崩溃的指令之一。 -
style-src来自不同来源的 CSS 样式表。如果某个库需要嵌入自己的 CSS，请在此处引入，但通常情况下，使用 `self` 是一个标准选择。 -
font-src：使用谷歌字体或其他字体源？您需要在此处添加这些字体。 -
frame-src此指令适用于那些会将 iFrame 嵌入到您的页面中的数据源。例如 Stripe 或 Google Maps。
还有很多其他选择，只需确保它们与浏览器兼容即可。您可以在Mozilla 文档中找到更多信息。
还有一点需要注意，那就是unsafe-inline值。您可以设置此值以允许任何来源（例如 JS 或 CSS）设置内联资源。这或许可以防止您的网站崩溃（例如使用内联 React 运行时），但这会让您的网站几乎和未设置内容安全策略 (CSP) 时一样脆弱。请尽可能避免这样做。
避免使用不安全的内联哈希
仅允许特定网站添加脚本的目的是为了保护您免受外部人员将恶意代码偷偷植入您代码的侵害。该unsafe-inline规则允许任何第三方直接在 script 标签中添加内联 JavaScript。要充分利用内容安全策略 (CSP)，您需要避免使用此属性，方法是使用 `<script>` 标签nonce或至少遵循sha256特定算法生成的哈希值。
如果您尝试设置了任何 `<script>`script-src或 ` frame-src<style>` 指令，您可能已经注意到，Chrome（假设您使用 Chrome）可能会为您生成一个哈希值。这可能是添加哈希值最简单直接的方法。但是，Chrome 可能不会为每个内联的脚本或样式属性都生成哈希值。
另一种常用的方法是使用 Node.js 或其他后端语言生成哈希值或随机数，然后动态地将其添加到 CSP 中。如果您使用的是服务器端渲染 (SSR)，那么这样做应该不会太难。有一些库可以帮助您生成哈希值或随机数；crypto例如，Node.js 就提供了相应的库。如果您使用 AWS 的 CloudFront 托管静态网站，那么您可以使用安装有 Node 或 Python 的 Lambda 函数来实现类似的功能。我不确定其他无服务器服务是否也提供类似的功能，但它们可能也有类似的解决方案。