前端安全：内容安全策略

2025-06-09

前端安全：内容安全策略

在我之前关于安全的文章中，我写了关于npm audit脚本完整性的内容。接下来是内容安全策略（简称CSP）。

这可以作为服务器上的响应头添加，也可以作为<meta>html 中的标签添加。

我将在这里重点讨论后者。

CSP 将告诉网页允许从哪些域加载图像、字体、iframe、脚本等：

<meta http-equiv="Content-Security-Policy" content="
  default-src;
  script-src 'self';
  style-src 'self';
  img-src 'self' data:;
  font-src;
  connect-src 'self';
  media-src 'self';
  object-src 'none';
  child-src;
  frame-src;
  form-action;
  base-uri;
  manifest-src 'self';
">
Enter fullscreen mode Exit fullscreen mode

双引号内是一个长字符串，为了清晰起见，我添加了换行符和制表符。

每个条目都以分号结尾。;

注意“self”这个词。它允许你从与当前文档相同的域运行各种类型。

脚本

要允许来自外部站点的脚本（可能是unpkg.com之类的交付网络） ，请将其添加unpkg.com到script-srcCSP 的 -part 中：

script-src 'self' unpkg.com;
Enter fullscreen mode Exit fullscreen mode

Cloudflare 提供了边缘缓存和/或资源压缩功能，以及“Rocket Loader™”，它可以缩短使用 JavsScript 的网站的渲染时间。我在我的网站上使用了它，但必须将其添加到我的 CSP 中：

script-src 'self' ajax.cloudflare.com;
Enter fullscreen mode Exit fullscreen mode

新条目只是一个空格，因此组合起来，当前条目script-src看起来像这样：

script-src 'self' unpkg.com ajax.cloudflare.com;
Enter fullscreen mode Exit fullscreen mode

谷歌字体

对于 Google 字体，您必须向font-src和添加条目style-src：

font-src fonts.gstatic.com;
style-src 'self' fonts.googleapis.com ;
Enter fullscreen mode Exit fullscreen mode

YouTube

对于 YouTube，您需要条目，frame-src因为它基于 iframe ，并且它也提供img-src缩略图。CSP 并不总是那么容易，但它是为您的网站添加额外保护的最快方法！

frame-src *.youtube.com;
img-src 'self' img.youtube.com data:;
Enter fullscreen mode Exit fullscreen mode

如果您还包括 YouTube API，则必须将其添加到script-src：

script-src *.youtube.com;
Enter fullscreen mode Exit fullscreen mode

YouTube 视频可以使用这些附加功能，但偶尔会因其“doubleclick”网络和其他网络而产生错误。您可以忽略这些，或者将它们添加到您的 CSP（如果您信任它们！）：

script-src: https://www.googleadservices.com https://googleads.g.doubleclick.net https://www.google.com
img-src: https://www.google.com
frame-src: https://bid.g.doubleclick.net
Enter fullscreen mode Exit fullscreen mode

Vimeo

Vimeo 只需要frame-src：

frame-src: *.vimeo.com
Enter fullscreen mode Exit fullscreen mode

但是如果您想使用他们的 API，script-src也请添加一个条目：

script-src: *.vimeo.com
Enter fullscreen mode Exit fullscreen mode

警告：营销人员和 SEO 人员讨厌CSP！

有了 CSP，营销人员就不能再通过Google Tag Manager或类似工具添加酷炫的新跟踪脚本了。所以，准备好听到大量投诉吧，除非你创建一个 CMS 块，让他们可以自行添加/删除 CSP 条目！

Google Chrome支持的 CSP 条目远不止上面列出的这些。遗憾的是，其中大多数条目在Apple Safari中无法正常工作，甚至可能导致其无法解析 JavaScript，因此请务必在所有浏览器中进行测试。

更多信息请见：

https://content-security-policy.com/

并帮助您创建一个：

https://report-uri.com/home/generate

奖励：添加预连接

在向 CSP 添加条目时，<link rel="preconnect">为相同条目添加 -tag，以加快您的网站与这些资源之间的通信速度。

以“Google 字体”为例：

<link rel="preconnect" href="https://fonts.gstatic.com">
Enter fullscreen mode Exit fullscreen mode

感谢阅读！

鏂囩珷鏉ユ簮锛�https://dev.to/madsstoumann/frontend-security-content-security-policy-17dl
Devto 翻译
PREV
前端安全：npm-audit 和脚本完整性
NEXT
CSS 中的时钟和手表