JS处理页面内容劫持之 Content Security Policy

前言

国内的网络环境简直是不忍直视，H5页面在某国产浏览器下被插入内容，更可恶的是相关联的负面联想，意识到是页面被劫持了，根据截图判断可能为iframe嵌入，确认了页面使用HTTPS，与运营商没有关联性，暂无其他解决办法立马添加了移除iframe的JS

// 移除所有的iframe
document.querySelectorAll('iframe').forEach(iframe => iframe.remove());

此类就再未接到上报，可见确实是iframe嵌入的。之后又去了解一些其他的防止内容劫持的方案，如Subresource Integrity (SRI)，Content Security Policy (CSP)...。

内容

Content Security Policy（CSP）是一种通过添加 HTTP 头部来增强 web 应用程序安全性的策略。CSP 允许网站管理员定义允许加载的内容来源，从而减少对特定类型攻击（如跨站脚本攻击）的风险。通过实施 CSP，可以限制浏览器执行特定类型的代码，使其更难受到代码注入攻击。

以下是 Content Security Policy 的关键概念和用法：

关键概念：

1. 指令（Directives）： CSP 规则是通过一系列指令定义的。这些指令描述了浏览器应该如何处理特定类型的内容。一些常见的指令包括：

   • default-src：定义默认的来源，用于除非明确指定其他来源。
   • script-src：定义用于执行脚本的来源。
   • style-src：定义用于加载样式表的来源。
   • img-src：定义用于加载图像的来源。
   • font-src：定义用于加载字体的来源。

2. 来源（Sources）： 指令中的来源描述了浏览器允许加载资源的地方。它可以是域名、URL、'self'（表示同源）、'unsafe-inline'（允许内联脚本或样式）等。

3. 策略（Policy）： CSP 是通过将规则集成为一个策略来实施的。策略可以包含一个或多个指令，它告诉浏览器如何处理不同类型的内容。

使用方法：

1. HTTP 头部中添加 CSP： 最常见的做法是在服务器响应的 HTTP 头部中添加 Content-Security-Policy 头部。例如：

   Content-Security-Policy: default-src 'self'; script-src 'self' example.com; style-src 'self' fonts.googleapis.com
   

   上述例子中，default-src 'self' 意味着默认情况下只允许从同源加载资源，而 script-src 'self' example.com 表示仅允许从同源和 example.com 加载脚本。

2. 内联策略： 可以通过在 HTML 页面中使用 <meta> 标签来指定 CSP。例如：

   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' example.com">
   

用例：

1. 防止 XSS 攻击： 通过限制允许执行脚本的来源，CSP 可以有效地防止跨站脚本攻击。

2. 防止数据泄漏： 通过限制外部连接的来源，CSP 可以减少敏感信息泄漏的风险。

3. 防止点击劫持： 通过 frame-ancestors 指令，CSP 可以防止页面被嵌套在不受信任的框架中，从而防止点击劫持。

CSP 是一个强大的安全工具，但需要谨慎配置，以确保它不会影响到网站正常的运行。在实施 CSP 之前，建议仔细研究文档并进行测试，以确保它适合应用程序。