🔒 前端安全演示沙盒

交互式学习平台 · 直观对比安全与不安全编码的实际效果

🎯 XSS 攻击模拟 — 不安全 vs 安全

在下方输入框中输入任意文本或 HTML/JavaScript 代码，观察不安全渲染与安全渲染的差异。

不安全 innerHTML（XSS 风险）
等待运行...
安全 textContent（自动编码）
等待运行...
🔍 教学要点： 使用 textContent 替代 innerHTML 是最简单有效的 XSS 防御手段。 如果必须渲染富文本，请使用 DOMPurify.sanitize() 进行过滤。

📋 DOM XSS 高危 API 自查清单

高危 API风险等级安全替代方案
element.innerHTML = str高危element.textContent = str
element.outerHTML = str高危element.insertAdjacentText()
document.write(str)高危document.createTextNode()
insertAdjacentHTML()中危insertAdjacentText()
eval(str) / new Function(str)高危避免使用，用 JSON.parse 替代
elem.setAttribute('onclick', str)高危elem.addEventListener('click', fn)

🛡️ CSP 策略演示 — 开启前后的效果对比

点击下方按钮，通过内联脚本执行测试来演示 CSP 如何阻止恶意脚本执行。

当前 CSP 状态： 未开启
CSP 关闭 内联脚本可以执行
尚未测试...
CSP 开启 内联脚本被阻止
尚未测试...
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:
💡 提示： 此演示通过 <meta http-equiv="Content-Security-Policy"> 模拟 CSP 效果。 生产环境应始终在服务端响应头中设置 CSP，而非仅依赖 <meta> 标签。

📖 CSP 核心指令速查

指令控制范围开发注意事项
default-src所有资源的兜底来源建议始终设置
script-srcJavaScript 脚本来源避免 unsafe-inline，优先 nonce
style-srcCSS 样式来源评估是否允许 unsafe-inline
img-src图片来源包含 data: 支持 base64 图片
connect-srcfetch/XHR/WebSocket 目标严格限制 API 端点
frame-ancestors是否允许被 iframe 嵌入防点击劫持的关键指令
base-uri<base> 标签允许的 URL限制防 base 标签劫持
form-action表单提交目标 URL限制防表单劫持

🖱️ 点击劫持（Clickjacking）演示

下方模拟了一个攻击者页面：透明 iframe 覆盖在伪造界面之上，用户以为自己点击的是"领取优惠券"，实际点击的是隐藏的"确认转账"按钮。

🔒 目标页面（透明不可见）
点击上面按钮查看效果...
🔍 教学要点： 防御点击劫持推荐使用 三段式方案： X-Frame-Options: DENY（兼容旧浏览器）+ CSP frame-ancestors 'self'（精准控制）+ Frameguard 脚本（前端兜底）。

🔍 安全头部检测与配置

输入一个 URL 查看其安全头部配置情况，或了解各安全头部的推荐配置值。

安全头部 状态 当前值 / 推荐值 说明
输入 URL 或点击"查看示例数据"开始检测
add_header X-Content-Type-Options "nosniff" always; add_header X-Frame-Options "DENY" always; add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always; add_header Referrer-Policy "strict-origin-when-cross-origin" always; add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always; add_header Content-Security-Policy "default-src 'self'; script-src 'self'" always;