1. CSP定义
CSP（Content Security Policy，内容安全策略）是一种网络安全技术，它通过限制网页中可以加载的资源（如脚本和图像），来防止恶意攻击，如跨站脚本攻击（XSS）。CSP的主要原理是通过在网页中实施一些安全策略来限制代码执行，从而减少攻击者利用的机会。
2. 工作原理
CSP通过实施一系列安全策略来限制网页中可以执行的代码，从而减少恶意攻击者利用的机会。这种技术对于保护网站免受XSS攻击等常见网络攻击非常有效。CSP的工作原理大致可以分为以下几个步骤：
- 1. 策略定义：CSP通过在HTTP响应头中设置一系列策略来定义网页可以执行哪些类型的代码。这些策略包括允许或阻止特定类型的脚本执行，以及定义脚本的来源。
- 2. 代码执行：当浏览器加载并解析网页时，它会检查代码中是否包含CSP定义的策略所禁止的脚本类型。如果包含，浏览器会阻止对这些脚本的执行。如果没有包含任何被禁止的脚本类型，浏览器就会按照正常的流程解析和执行代码。
- 3. 防止XSS攻击：CSP的主要用途之一是防止XSS攻击。通过限制脚本的来源，CSP可以阻止恶意网站通过注入恶意脚本来窃取用户数据或控制用户的浏览器。例如，如果CSP指定网页只能执行来自可信来源的脚本，那么恶意网站就无法注入自己的脚本。
此外，CSP还可以提供其他安全优势，例如防止 CSRF（跨站请求伪造）攻击和减少加载时间。CSP可以与现代浏览器一起工作，提供一种简单而有效的方式来增强网站的安全性。
3. 使用CSP削减XSS攻击
跨站脚本攻击（XSS）是一种常见的网络安全漏洞，攻击者通过在受害者的浏览器上注入恶意脚本，从而窃取或操纵数据。内容安全策略（CSP）是一种安全特性，可以防止跨站脚本攻击和其他类似攻击。
通过以下方法组合可缓解XSS攻击。需要注意的是，CSP并不能完全防止XSS攻击，而是一种补充措施，结合其他安全策略和代码审查，共同提高网站的安全性。
3.1. 设置CSP headers
在服务器端，为响应添加以下CSP头部：
-
Content-Security-Policy：定义允许加载资源的来源，从而限制恶意脚本的来源。
例如：Content-Security-Policy: default-src 'self'; script-src 'self'; img-src 'self' data:; style-src 'self' -
Content-Security-Script-Source-List：指定允许脚本加载的来源，仅允许来自可信来源的脚本。
例如：Content-Security-Script-Source-List: https://example.com
3.2. 限制脚本执行
在HTML中使用sandbox属性，限制脚本在页面上的执行范围。
<iframe src="https://example.com" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
3.3. 使用CSP时组合HTTP-only Cookie
将Cookie标记为HTTPOnly，防止攻击者通过JavaScript脚本窃取Cookie。
document.cookie = "username=JohnDoe; HTTPOnly";
3.4. 启用CSP报告
启用CSP报告功能，以便在检测到违规行为时收到通知。
navigator.serviceWorker.ready.then(registration => {
registration.active.addEventListener('message', (event) => {
if (event.data.type === 'violation-report') {
console.log('CSP violation:', event.data.message);
}
});
});
3.5. 定期审查和更新CSP策略
随着网络环境的变化，定期审查和更新CSP策略，确保其持续有效。
4. 使用CSP防止点击劫持
clickjacking（点击劫持）是一种Web安全漏洞，攻击者通过覆盖或替换页面上的元素，诱使用户点击恶意链接或提交表单。CSP可以帮助防止点击劫持等攻击。以下是使用CSP防止点击劫持的主要步骤：
1、设置CSP headers
在服务器端，为响应添加以下CSP头部
-
Content-Security-Policy：定义允许加载资源的来源，从而限制恶意脚本的来源。
例如：Content-Security-Policy: default-src 'self'; script-src 'self'; img-src 'self' data:; style-src 'self' -
Content-Security-Script-Source-List：指定允许脚本加载的来源，仅允许来自可信来源的脚本。
例如：Content-Security-Script-Source-List: https://example.com
2、限制iframe的来源和行为
使用CSP限制iframe的来源和行为，以防止攻击者利用iframe实施点击劫持。
- 在CSP中添加以下规则：
iframe-src 'self';
iframe-src-attr allow-same-origin allow-script-src 'self';
这将允许来自同一站点的iframe，并允许在iframe中加载本站的脚本。
3、防止跨域资源共享（CORS）攻击
CORS是一种允许服务器在响应中加入CSP头部的机制，以限制跨域请求。通过设置CORS，可以防止攻击者利用跨域资源共享漏洞实施点击劫持。
- 在服务器端设置CORS：
// 服务器端代码
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
4、使用JavaScript检测和防止点击劫持
在客户端，使用JavaScript检测和防止点击劫持。例如，通过监听鼠标事件，检查用户点击的元素是否与页面内容相符。
document.addEventListener('mousemove', function(event) {
var target = event.target;
while (target != document.body) {
if (target.tagName.toLowerCase() === 'iframe') {
// 检查iframe的src属性是否与预期相符
if (target.src !== 'about:blank' && target.src !== 'https://example.com') {
alert('点击劫持攻击！');
// 采取措施阻止攻击，例如禁用该iframe
target.parentNode.removeChild(target);
}
}
target = target.parentNode;
}
});
5. 使用CSP削减悬空标记攻击
以下指令将仅允许加载与页面同源的图像：
img-src 'self'
以下指令将仅允许从特定域名加载图像：
img-src https://images.normal-website.com
请注意，这些策略将防止一些悬空标记攻击，因为在没有用户交互的情况下捕获数据的一种简单方法是使用img标记。然而，它不会阻止其他攻击，例如那些插入具有悬挂href属性的锚标记的攻击。
6. 通过策略注入来绕过CSP
我们可能会遇到一个将输入反射到实际策略的网站，最有可能的是在report-uri指令中。如果网站反射一个我们可以控制的参数，就可以注入一个分号来添加自己的CSP指令。通常，这个report-uri指令是策略列表中的最后一个。这意味着我们需要覆盖现有的指令才能利用这个漏洞并绕过策略。
通常，无法覆盖现有的script-src指令。然而，Chrome最近引入了script-src-elem指令，它允许我们控制脚本元素，但不允许控制事件。重要的是，这个新指令允许我们覆盖现有的script-src指令。
7. 参考
[1] https://portswigger.net/web-security/cross-site-scripting/content-security-policy