前端安全：安全标头

我之前关于前端安全的文章主要关注脚本完整性和内容安全策略。

现在，是时候看看服务器端可以做什么了。

对于这些服务器修复，我将使用 Cloudflare。

Cloudflare 有很多服务 — — 用他们自己的话说：

Cloudflare 保障您面向外部的资源（例如网站、API 和应用程序）的安全，并确保其可靠性。它还能保护您的内部资源（例如防火墙后的应用程序、团队和设备）。此外，它还是您开发全球可扩展应用程序的平台。

它们拥有超直观的用户界面 - 而且大多数情况下都是免费的！

您可以在他们的网站上找到有关如何移动 DNS 记录等的指南。

但也许您没有必要使用 Cloudflare？

在我继续之前，请在此处检查您的安全标头：https://securityheaders.com/

如果您有红色F，让我们看看如何使用 Cloudflare 来改进它。

现在，在任何服务器上要做的第一件事就是添加SSL（HTTPS）。

在 Cloudflare 中，转到 SSL/TLS，选择“Edge Certificates”并选中“始终使用 HTTPS”框。

就在其下方，您将看到“HTTP 严格传输安全 (HSTS)”条目。

单击“更改”，接受警告，选中“启用 HSTS”，将“最大年龄标头”设置为（最小）“1 个月”，并选中“无嗅探标头”：

更新：为了符合HSTS 预加载的条件，如评论中所述，将Max-Age Header设置为“12 个月”，并启用“将 HSTS 策略应用于子域”和“预加载”。

现在，返回https://securityheaders.com/

如果你之前的成绩是F，那么现在应该得D。

Cloudflare 不支持开箱即用的其他标头，但幸运的是，他们有一种称为Workers 的东西，您可以在其中自行添加它们。

Scott Helme 写了一篇精彩的文章：全新的安全标头 Cloudflare Worker

因为这篇文章是之前写的，所以需要手动将“Permissons-Policy”添加到 Scott 的“securityHeaders”列表中：

let securityHeaders = {
  "Content-Security-Policy" : "upgrade-insecure-requests",
  "Strict-Transport-Security" : "max-age=1000",
  "X-Xss-Protection" : "1; mode=block",
  "X-Frame-Options" : "DENY",
  "X-Content-Type-Options" : "nosniff",
  "Referrer-Policy" : "strict-origin-when-cross-origin",
  "Permissions-Policy": "geolocation=(self \"https://your.domain\"), microphone=()"
}

设置完成后，部署工作者，并返回 SecurityHeaders：

哇！——几分钟内就从F升至A+ 。

持续维护

现在，即使你已经完成了我在这些文章中建议的所有事情，你也不应该满足于现状。安全是一个持续不断的活动——每当添加新脚本、更新integrity属性、测试 SecurityHeaders 等时，你都需要测试你的网站。每当发现新的漏洞时，都要再次测试。

您还可以使用Probely或Detectify等服务

这些服务会深度扫描你的网站，并提供一份你可能需要查看的待办事项清单。以下是 Detectify 的截图：

这些服务的起价为 39 欧元（Probely）和 50 美元（Detectify），将持续监控您的网站是否存在安全漏洞。

结论

前端的世界正在不断扩展。曾经，我们只能用 HTML、CSS 和 JavaScript 来定义自己的职业——但这是否也包括动画、电子邮件开发、可访问性、SEO、追踪、性能工程，或者……安全？

我认为了解一些关于 XSS 攻击、内容安全策略配置或 SVG 文件可能包含（有害）脚本的知识并没有什么坏处 —— 但我们可能需要一个特定的角色来处理这些事情，因为这是一个很大且复杂的话题。

每个网站每年都应该至少进行几次“安全健康检查”。至于是否需要前端工作……时间会给出答案！