最近在做公司后台管理系统的前端优化，页面刚上线，控制台突然一堆报错，JS 不执行，样式加载失败，差点以为是服务器出问题了。仔细一看，原来是 Content Security Policy（内容安全策略，简称 CSP）在作怪。
\n\n啥是内容安全策略？
\nCSP 是浏览器提供的一种安全机制，用来防止跨站脚本（XSS）、数据注入等攻击。简单说，它像一道门卫，规定哪些资源能加载，哪些直接拦下。比如你只允许从自己域名加载脚本，那第三方恶意脚本就进不来。
\n\n但问题也出在这儿——门卫太严格，合法的资源也可能被误拦。最常见的报错长这样：
\n\nRefused to load script from 'https://cdn.example.com/jquery.js' because it violates the following Content Security Policy directive: "script-src 'self'"意思很明白：你只允许加载同源脚本，现在却想从 cdn.example.com 加载 jQuery，不行，拒绝。
\n\n本地开发也中招？
\n很多人以为 CSP 只在生产环境生效，其实开发时如果用了某些框架或本地服务器启用了安全头，照样会触发。比如用 Webpack Dev Server 时配了 headers，或者后端代理转发时带上了 Content-Security-Policy 响应头，前端突然就“瘫痪”了。
有个同事前几天在调试 React 组件，页面一片空白，查了半天发现是内联脚本被禁了。React 开发模式有些动态注入确实会用到 eval 或内联代码，而默认 CSP 不允许 unsafe-eval 和内联脚本，直接跪了。
常见错误场景和解法
\n最典型的就是引入 CDN 资源被拦。比如你用了 BootCDN 的 Vue 或 Element UI，没在 CSP 里声明允许，就会被拒。
\n\n解决办法是在 HTTP 响应头里放宽策略。比如 Nginx 配置：
\n\nadd\_header Content-Security-Policy "default-src 'self'; script-src 'self' cdn.bootcss.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;";这里允许了从 bootcss.com 加载脚本，样式允许内联（unsafe-inline），图片支持 base64 数据。虽然 unsafe-inline 不够安全，但老项目过渡期难免要用。
另一个坑是 WebSocket 连接被阻断。CSP 有 connect-src 控制 AJAX、WebSocket 等请求。如果你用 ws:// 或 wss:// 连后端，但没在策略里写清楚，浏览器也会拦。
Content-Security-Policy: connect-src 'self' wss://api.example.com;这样就能通了。
\n\n别忘了 meta 标签
\n除了 HTTP 头，CSP 还能通过 <meta> 标签设置。但注意：meta 不支持所有指令，比如 report-uri 或 frame-ancestors 就只能用 HTTP 头。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *; media-src media.example.com">这种写法适合静态页或无法改服务器配置的情况。
\n\n如何快速定位问题？
\n打开浏览器开发者工具，看 Console 报错信息，通常会明确告诉你违反了哪条策略。点开详情能看到完整的 CSP 指令，以及被拦截的资源地址。
\n\n也可以先在本地临时加个宽松策略：
\n\nContent-Security-Policy: default-src * data: blob:;让所有资源都能加载，先把功能跑通，再逐步收紧权限，比一开始就卡死方便多了。
\n\n线上环境建议开启报告模式，用 Content-Security-Policy-Report-Only 头，把违规行为发到指定地址，不影响用户使用，又能收集问题。
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report-endpoint/;搭个接口接收报告，就知道哪些资源该放行了。
\n\n小结一下
\nCSP 是把双刃剑，防得住攻击，也容易误伤自己。开发中遇到加载失败，别急着查网络或代码逻辑，先看看是不是 CSP 在拦路。搞清楚当前策略是什么，资源从哪来，差在哪，补上就行。安全重要，但也不能让正常功能动不了。
","seo_title":"开发中遇到的内容安全策略错误怎么办 - 数码学堂","seo_description":"详解开发过程中常见的内容安全策略（CSP）错误，包括报错原因、典型场景和实际解决方案，帮助开发者快速定位并修复资源加载问题。","keywords":"内容安全策略,CSP错误,开发安全,前端安全,资源加载失败,XSS防护"}