浏览器不支持通过设置csp的script-src限制外链脚本，因其被静默忽略；仅http响应头中的content-security-policy生效，且需服务端配置（如nginx、express或apache），配合nonce/hash机制替代'unsafe-inline'以保障安全。
如何用设置CSP禁止外链脚本
不能。浏览器明确不支持通过 <meta> 设置 Content-Security-Policy 的 script-src 限制外链脚本（如 https://cdn.example.com/script.js）——这是硬性限制，不是写法问题。
原因很简单：CSP 的 script-src（以及 object-src、base-uri 等）在 <meta> 中被忽略，仅当响应头 Content-Security-Policy 存在时才生效。W3C 规范和 Chrome/Firefox/Edge 实现都一致：meta 版本只支持有限指令，且不包含脚本源控制。
哪些CSP指令能用设置
<meta> 仅支持部分低风险、无执行上下文的指令，比如：
-
default-src 'self'—— 但实际效果受限，无法阻止外链<script src="..."></script> -
img-src 'self'—— 可拦截外链图片（部分浏览器支持） -
style-src 'self'—— 对内联<style></style>或style=""有效，但对<link rel="stylesheet">外链无效 -
base-uri 'self'—— 有效，可防止<base href>被篡改
关键点：script-src、connect-src、frame-src 等涉及资源加载或执行的指令，在 <meta> 中完全被浏览器静默丢弃，不会报错，也不会生效。
为什么开发时容易误以为能拦外链JS
常见错误场景：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">放进 HTML，发现<script src="https://cdn.jsdelivr.net/..."></script>依然加载成功 - 查 DevTools → Security 标签页，看到 “No CSP header found”，但没注意 meta 本身不触发 script-src 检查
- 误信某些过时博客或 Stack Overflow 旧答案，它们未注明该限制已存在多年
验证方法：打开浏览器开发者工具 → Network → 查看 HTML 响应头，确认是否存在 Content-Security-Policy 字段；若只有 <meta>，则 script-src 等指令形同虚设。
真正有效的外链脚本拦截方案
必须通过 HTTP 响应头设置，且需服务端配合：
- Nginx 配置示例：
add_header Content-Security-Policy "script-src 'self' https://trusted-cdn.com; object-src 'none'; base-uri 'self'"; - Node.js（Express）：
res.setHeader('Content-Security-Policy', "script-src 'self' 'unsafe-inline' https://trusted-cdn.com"); - Apache：
Header set Content-Security-Policy "script-src 'self' https://trusted-cdn.com"
注意：'unsafe-inline' 和 'unsafe-eval' 会削弱防护，生产环境应避免；若必须用内联脚本，改用 nonce 或 hash 方式白名单化。
最易被忽略的一点：即使设置了正确响应头，若页面中已有 <script></script> 标签加载了外链脚本，浏览器会在控制台报 Refused to load the script ... because it violates the following Content Security Policy —— 这才是生效信号；而 <meta> 永远不会触发这类错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
