普通HTML配置CSP meta的script-src/style-src后外部JS被拦截问题

这个问题本质是两个绝大多数人刚用CSP都会踩的配置认知误区叠加导致的：

• 哈希规则的适用对象完全搞错：CSP中script-src配置的sha256哈希值，仅用于校验行内脚本的内容匹配，根本不会参与对带src属性的外部脚本的校验流程。把外部scripts.js文件算出来的哈希塞进规则，不管值算的对不对，都没法用来放行这个外部引入的脚本。哪怕哈希值100%准确，只要脚本标签带src，匹配逻辑就不会走哈希校验分支。
• 规则继承的逻辑被忽略：只要在CSP里显式声明了script-src指令，default-src 'self'的规则就完全不会再对脚本加载生效，脚本的所有放行规则100%以写在script-src里的内容为准。当前script-src里只写了那个sha256哈希值，没有加'self'作为允许来源，就算scripts.js是从同源目录加载的，也根本不在允许列表里，自然会被拦截。

额外容易触发拦截的细节：

• 很多开发者计算外部JS哈希的方式，本身就和CSP要求的内联脚本哈希计算逻辑不匹配。就算之后把src去掉改成内联脚本，只要磁盘上的文件内容和浏览器要校验的内容有一点差异（比如多了换行、经过压缩转码），哈希就会匹配失败。
• 如果配置CSP meta标签时，不同指令之间漏写了分号分隔符，会导致浏览器解析规则时出错，默认拦截所有未明确匹配的资源请求。

要让scripts.js正常加载，根据实际场景二选一即可：

• 如果确实需要保留外部文件引入的方式，在script-src规则里补上'self'来源，最终的script-src配置为：script-src 'self' 'sha256-Ql3n7tC/2D6wSTlQY8RcOKXhq02zfdaSDviOhpvbYWw='。这种方式既保留了对特定内联脚本的哈希校验能力，也能正常放行同源目录下的外部JS文件。完整的正确meta标签写法参考：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; object-src 'none'; style-src 'self'; script-src 'self' 'sha256-Ql3n7tC/2D6wSTlQY8RcOKXhq02zfdaSDviOhpvbYWw='">

• 如果就是要靠哈希规则放行脚本，那必须把标签中间，这时候之前算的sha256值才会被正常匹配。但这种写法完全失去了外部JS可以被浏览器缓存的优势，不推荐在实际项目中使用。

内容的提问来源于stack exchange，提问作者rupesh sharma