如何搭建JavaScript XSS测试的“不安全”环境并通过CSP修复漏洞

一、让测试环境能执行目标XSS代码 #

现代浏览器内置的XSS防护机制会拦截这种明显的URL注入脚本，要触发弹窗，需按以下步骤操作：

1. 编写存在明确XSS漏洞的HTML文件 #

创建index.html，代码如下：

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div id="user-content"></div>
  <script>
    // 提取URL中的name参数
    const params = new URLSearchParams(window.location.search);
    const userName = params.get('name');
    // 直接将未转义的参数插入DOM（漏洞核心：无任何过滤）
    document.getElementById('user-content').innerHTML = userName;
  </script>
</body>
</html>

2. 关闭浏览器的XSS防护（以Chrome为例） #

默认的XSS审计会拦截测试脚本，需临时关闭：

• 右键Chrome桌面图标 → 属性
• 在「目标」输入框末尾添加 --disable-xss-auditor --disable-web-security（注意前面有空格）
• 重启Chrome，用这个实例打开本地的index.html，访问指定URL：

  http://localhost/index.html?name=<script>alert('XSS attack!')</script>
  

此时就能正常触发alert弹窗。注意：此模式仅限测试，不要用来浏览普通网站，避免安全风险。

二、用CSP修复XSS漏洞 #

CSP通过限制资源加载源来阻断未授权脚本执行，具体操作：

1. 添加CSP规则 #

在index.html的<head>标签中加入CSP meta标签：

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

规则说明：

• default-src 'self'：所有资源（图片、样式、脚本等）仅允许从当前域名加载
• script-src 'self'：仅允许执行当前域名下的合法脚本，禁止执行内联脚本、注入脚本

2. 验证修复效果 #

再次访问恶意URL，浏览器会直接拦截注入的<script>标签，控制台会输出CSP违规提示，alert弹窗不会触发。

3. 更严格的CSP配置（可选） #

如果页面不需要任何内联脚本，可以进一步收紧规则，彻底阻断内联XSS的可能：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; object-src 'none'; style-src 'self'">

内容的提问来源于stack exchange，提问作者uldonsHD