如何在 HTML 中通过 meta 标签的 content-security-policy 属性防范 XSS 攻击-html教程-PHP中文网

应使用服务端http响应头而非meta标签配置csp，因meta csp存在解析滞后、浏览器兼容性差、无法阻止内联脚本执行、易被响应头覆盖等问题，真实生产环境中基本无效。

如何在 html 中通过 meta 标签的 content-security-policy 属性防范 xss 攻击

别用 <meta http-equiv="Content-Security-Policy"> 防 XSS —— 它在真实生产环境里基本拦不住，还容易让你误以为“已经配好了”。

为什么 `<meta>` 的 CSP 几乎不拦内联脚本

浏览器解析 <meta http-equiv="Content-Security-Policy"> 是同步但滞后的行为：它必须等 HTML 解析到该标签位置才开始生效。而 <script>alert(1)</script> 或 <button onclick="..."></button> 这类内联代码，在解析到对应标签时就立刻尝试执行了 —— 此时 CSP 还没加载、没注册、没起效。

Safari 16.4 之前版本会直接跳过含 nonce- 或 sha256- 的整条 script-src 指令
Chrome 124+ 已移除对 script-src 'unsafe-inline' 在 <meta> 中的解析支持（写了也当没写）
只要服务端返回了任意 content-security-policy 响应头（哪怕只是空值或拼写错误），<meta> 就被完全忽略
本地用 file:// 打开 HTML 时，CSP 全面关闭 —— <meta> 和响应头都无效

`script-src 'self'` 写在 `<meta>` 里等于没设

你写 content="script-src 'self'"，本意是只允许同源 JS，但它根本无法阻止 <script>fetch('/api/user').then(r => r.json().then(console.log))</script> 这种内联脚本执行 —— 因为 'self' 只约束外部 <script src=""></script> 的来源，不约束内联脚本本身是否允许运行。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

真正禁用内联脚本，必须显式排除；要拦住它，得靠 nonce- 或 hash-，而这两者在 <meta> 中不被 Safari / Android WebView 等主流环境可靠支持
写了 script-src 'self' 'unsafe-inline' 更糟：等于主动放行所有 onclick、onerror、<script></script>，XSS 防御形同虚设
就算侥幸生效，它也只作用于当前 HTML 文档，无法覆盖 iframe、worker、fetch 子请求等上下文

真要上简版硬防御，必须走响应头 + 最小化指令

放弃 <meta>，改用服务端 HTTP 响应头发一条最简但有效的策略，才能真正阻断多数 XSS 载荷执行。

Nginx 配置示例（放在 server 或 location 块中）：

add_header Content-Security-Policy "default-src 'none'; script-src 'self'; connect-src 'self'; form-action 'self'; base-uri 'self'; frame-ancestors 'none'; object-src 'none'";