内容安全策略（Content Security Policy, 简称 CSP）是一种前端安全机制，可以帮助网站管理员减少跨站点脚本攻击（Cross-Site Scripting, 简称 XSS）等漏洞的影响。在本文中，我们将深入探讨 CSP 是如何工作的，并提供一些示例代码和最佳实践。
CSP 的原理
CSP 的基本原理是通过白名单机制控制页面加载的资源来源。网站管理员可以通过 CSP 配置文件明确指定允许加载的资源源，例如可信任的域名、HTTPS 连接、内联脚本等，以此限制非法脚本的注入。如果页面上存在违规的脚本或资源，浏览器将拒绝执行并报告错误。
下面是一个简单的 CSP 配置示例：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://example.com;">
该配置将只允许从相同域名和 https://example.com 加载 JavaScript 脚本和其他资源。
CSP 的使用和实践
配置 CSP
要启用 CSP，可以在 HTTP 响应头中添加 Content-Security-Policy 或 X-Content-Security-Policy 头部，或在 HTML 文档中添加 meta 标签。下面是一个使用 HTTP 响应头的示例：
Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com;
防止内联脚本
对于一些网站，需要在页面中包含一些内联脚本。但是这样会增加 XSS 攻击的风险。为了解决这个问题，可以将内联脚本转换为外部 JavaScript 文件。
<script src="/js/app.js"></script>
指定白名单资源
可以指定允许加载的域名、协议和端口号。此外，还可以指定其他类型的资源，如字体、图片、音频和视频等。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; font-src 'self' https://fonts.gstatic.com;">
CSP 报告机制
CSP 还提供了一个报告机制，可用于监控违规操作并及时采取措施。网站管理员可以通过设置 report-uri 指令来收集违规信息。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; report-uri /csp-report">
总结
CSP 是一种非常有用的前端安全机制，可以帮助网站管理员减少 XSS 攻击等漏洞的影响。配置 CSP 时要注意具体的需求，避免限制过度或者限制不足的情况。同时，与其他安全措施配合使用可以更好地提高网站的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10118
