如何用HTML代码配置CSP内容安全策略-html教程-PHP中文网

不能用标签配置csp，因其优先级低于http响应头、不支持report-to/report-uri、chrome124+限制关键指令、file://协议下失效，且存在兼容性与安全风险。

如何用html代码配置csp内容安全策略

用 `<meta>` 标签配置 CSP 的限制与风险

不能只靠 <meta> 标签上线 CSP，它不支持 report-uri 和 report-to，且优先级低于 HTTP 响应头——服务器头一覆盖，<meta> 就失效。

常见错误是把开发期验证用的 Content-Security-Policy-Report-Only 也写进 <meta>，但浏览器根本不认这个值，直接忽略。

<meta http-equiv="Content-Security-Policy" content="..."> 只在无法控制响应头时作为临时方案（如静态托管、某些 SaaS 页面）
若页面含富文本渲染、innerHTML 注入或模板引擎动态插值，这些内容不会继承 <meta> 的策略，得单独验签或过滤
default-src 'none' 这类严格策略在 <meta> 中可能因加载顺序问题导致白屏（比如 CSS 还没加载就被拦截）

`script-src` 不写 `'unsafe-inline'` 却没配 `nonce` 或 `hash` 的后果

删掉 'unsafe-inline' 后，所有内联脚本（<script>alert(1)</script>、<button onclick="doX()"></button>、setTimeout("x()", 0)）会被静默拦截，页面功能直接中断，控制台只报 Refused to execute inline script，不提示缺什么。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

必须二选一：script-src 'nonce-RANDOM' + 每个 <script nonce="RANDOM"></script> 标签，或 script-src 'sha256-xxx' + 对内联脚本内容做哈希
Webpack 用户可用 html-webpack-plugin 的 meta 配置注入 nonce，但需确保服务端生成并同步传入模板
Vue/React 等框架的事件绑定（如 @click、onClick）不算内联脚本，不受影响；但手写的 onclick="" 属性会被拦

`img-src` 漏掉 `data:` 导致 base64 图片炸掉

现代前端大量用 data: URI 内嵌小图标、占位图或用户头像，如果 img-src 没显式加 data:，这些图片全部 404，页面显示空白或裂图，控制台只报 CSP violation，不说明是缺 img-src。

img-src 'self' data: https: 是较安全的起点，https: 允许任意 HTTPS 图片（慎用），data: 必须带冒号
别写成 data 或 data://，浏览器只认 data:
若用 SVG 内联在 HTML 里（<img src="data:image/svg+xml,...>%EF%BC%89%EF%BC%8C%E5%90%8C%E6%A0%B7%E4%BE%9D%E8%B5%96%20img-src%20data:

%0A%0A

`connect-src`%20%E6%B2%A1%E8%A6%86%E7%9B%96%20API%20%E5%9F%9F%E5%90%8D%EF%BC%8C`fetch()`%20%E5%92%8C%20`WebSocket`%20%E5%85%A8%E6%8C%82

%0A

%E5%BE%88%E5%A4%9A%E5%9B%A2%E9%98%9F%E5%8F%AA%E9%85%8D%E4%BA%86%20script-src%20%E5%92%8C%20img-src%EF%BC%8C%E5%8D%B4%E5%BF%98%E4%BA%86%20connect-src%20%E2%80%94%E2%80%94%20%E5%AE%83%E7%AE%A1%E6%89%80%E6%9C%89%E4%B8%BB%E5%8A%A8%E8%BF%9E%E6%8E%A5%EF%BC%9AXHR%E3%80%81fetch()%E3%80%81WebSocket%E3%80%81EventSource%E3%80%82%E6%BC%8F%E9%85%8D%E4%BC%9A%E5%AF%BC%E8%87%B4%E6%8E%A5%E5%8F%A3%E8%AF%B7%E6%B1%82%E9%9D%99%E9%BB%98%E5%A4%B1%E8%B4%A5%EF%BC%8C%E7%BD%91%E7%BB%9C%E9%9D%A2%E6%9D%BF%E9%87%8C%E7%9C%8B%E4%B8%8D%E5%88%B0%E8%AF%B7%E6%B1%82%E5%8F%91%E5%87%BA%EF%BC%8C%E6%8E%A7%E5%88%B6%E5%8F%B0%E5%8F%AA%E6%9C%89%20CSP%20%E6%8A%A5%E9%94%99%E3%80%82

%0A

connect-src%20'self'%20api.example.com%20wss://ws.example.com%EF%BC%8C%E6%B3%A8%E6%84%8F%20wss://%20%E8%A6%81%E5%8D%95%E7%8B%AC%E5%86%99%EF%BC%8Chttps:%20%E4%B8%8D%E8%87%AA%E5%8A%A8%E5%8C%85%E5%90%AB%20WebSocket
%E6%9C%AC%E5%9C%B0%E5%BC%80%E5%8F%91%E5%B8%B8%E8%BF%9E%20localhost:3000%EF%BC%8C%E4%B8%8A%E7%BA%BF%E5%90%8E%E5%BF%85%E9%A1%BB%E6%8D%A2%E6%88%90%E7%9C%9F%E5%AE%9E%E5%9F%9F%E5%90%8D%EF%BC%8Clocalhost%20%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E6%97%A0%E6%95%88
%E8%8B%A5%E7%94%A8%20Service%20Worker%EF%BC%8C%E5%AE%83%E7%9A%84%20fetch%20%E8%AF%B7%E6%B1%82%E4%B9%9F%E5%8F%97%20connect-src%20%E7%BA%A6%E6%9D%9F%EF%BC%8C%E4%B8%8D%E6%98%AF%E7%BB%95%E8%BF%87%E7%AD%96%E7%95%A5%E7%9A%84%E5%90%8E%E9%97%A8

%0A%0A%E5%AE%9E%E9%99%85%E9%83%A8%E7%BD%B2%E6%97%B6%EF%BC%8C%E6%9C%80%E6%98%93%E8%A2%AB%E8%B7%B3%E8%BF%87%E7%9A%84%E4%B8%8D%E6%98%AF%E6%9F%90%E6%9D%A1%E6%8C%87%E4%BB%A4%EF%BC%8C%E8%80%8C%E6%98%AF%E3%80%8C%E7%A1%AE%E8%AE%A4%E6%89%80%E6%9C%89%E5%8A%A8%E6%80%81%E8%B5%84%E6%BA%90%E8%B7%AF%E5%BE%84%E9%83%BD%E8%A2%AB%E8%A6%86%E7%9B%96%E3%80%8D%E2%80%94%E2%80%94%E6%AF%94%E5%A6%82%E7%AC%AC%E4%B8%89%E6%96%B9%20SDK%20%E7%9A%84%E5%9B%9E%E8%B0%83%E5%9C%B0%E5%9D%80%E3%80%81%E5%9F%8B%E7%82%B9%E4%B8%8A%E6%8A%A5%20URL%E3%80%81%E5%AD%97%E4%BD%93%20CDN%20%E7%9A%84%20font-src%E3%80%81%E7%94%9A%E8%87%B3%20base-uri%20%E8%A2%AB%E5%8A%AB%E6%8C%81%E7%9A%84%E9%A3%8E%E9%99%A9%E3%80%82%E7%AD%96%E7%95%A5%E8%B6%8A%E4%B8%A5%EF%BC%8C%E6%BC%8F%E7%82%B9%E8%B6%8A%E9%9A%90%E8%94%BD%E3%80%82

%0A">