本文档详细介绍了 Front-End Checklist 中建议的安全措施，以保护 Web 应用程序免受常见漏洞和攻击。这些指南可帮助开发人员在前端开发过程中实施重要的安全功能和最佳实践。有关与性能相关的安全注意事项，请参阅 性能优化。
Front-End Checklist 中的安全措施涵盖了 Web 应用程序保护的几个关键领域，重点关注传输层安全、内容安全策略以及常见攻击向量的预防。
来源: README.md559-616
在实施具体安全措施之前，Front-End Checklist 建议使用专门的安全评估工具扫描您的网站。
| 工具 | 目的 |
|---|---|
| securityheaders.io | 分析与安全相关的 HTTP 响应头 |
| Observatory by Mozilla | 全面的安全评估工具 |
来源: README.md563-565
HTTPS 在清单中被标记为高优先级项目，因为它构成了 Web 安全的基础。
要求
实施资源
来源: README.md568-573
HSTS 被归类为中优先级安全措施，有助于防范协议降级攻击和 Cookie 劫持。
实现
Strict-Transport-Security HTTP 头HSTS 头示例
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
资源
来源: README.md574-582
CSRF 防护在 Front-End Checklist 中被标记为高优先级。
实施原则
资源
来源: README.md583-588
XSS 防护在清单中被指定为高优先级，因为这些攻击可能导致严重的严重安全后果。
防护技术
资源
来源: README.md589-595
此头可防止浏览器进行内容类型 MIME 嗅探。
实现
X-Content-Type-Options: nosniff来源: README.md596-601
X-Frame-Options 通过控制框架嵌入来保护用户免受点击劫持攻击。
实现选项
X-Frame-Options: DENY - 防止任何域框架化内容X-Frame-Options: SAMEORIGIN - 仅允许当前站点框架化内容X-Frame-Options: ALLOW-FROM uri - 允许指定的 URI 框架化内容资源
来源: README.md602-606
CSP 通过定义受信任的内容来源，提供强大的防御机制。
主要功能
基本 CSP 头示例
Content-Security-Policy: default-src 'self'; script-src 'self' trusted-scripts.com;
资源
来源: README.md607-615
安全措施的实施应遵循系统化方法，以确保全面保护。
来源: README.md563-615
| 安全措施 | 优先级 | 实现 |
|---|---|---|
| HTTPS | ![High][high_img] | 在所有页面和所有内容上实施 |
| HSTS | ![Medium][medium_img] | 设置适当的头，并设置合理的 max-age |
| CSRF 保护 | ![High][high_img] | 实施令牌、来源验证 |
| XSS 防护 | ![High][high_img] | 输入验证、输出编码、CSP |
| 内容类型选项 | ![Medium][medium_img] | 设置 X-Content-Type-Options: nosniff |
| X-Frame-Options | ![Medium][medium_img] | 设置适当的框架策略 |
| 内容安全策略 | ![Medium][medium_img] | 定义可信内容来源 |
来源: README.md559-616
前端安全措施与 Front-End Checklist 中其他部分涵盖的许多其他 Web 开发方面相关。