ExtJS应用配置CSP Header遇eval拦截问题及优化咨询

核心结论 #

因为你无法修改ExtJS代码移除eval()调用，所以必须在CSP的script-src中添加'unsafe-eval'才能解决当前报错；同时可以通过哈希替代的方式移除'unsafe-inline'，将安全风险降到最低。

具体实施步骤 #

1. 添加unsafe-eval解决eval阻塞问题
   ExtJS的ext-core.js中内置了eval()调用，CSP默认会阻止这类动态代码执行，且没有其他指令能替代'unsafe-eval'来允许外部脚本中的eval()（除非修改源码），所以这一步是必要的妥协。

2. 用哈希替代unsafe-inline
   移除script-src和style-src中的'unsafe-inline'后，浏览器会在控制台输出所有被阻止的内联内容对应的哈希值，直接复制这些哈希添加到CSP配置即可：

   • 对于内联<script>块，将哈希添加到script-src
   • 对于内联<style>块或元素的style属性，将哈希添加到style-src
   • 对于内联事件处理（如onclick、onload），需要在script-src中同时添加'unsafe-hashes'和对应事件代码的哈希

示例配置 #

假设浏览器给出的内联脚本哈希是sha256-0987654321fedcba，内联样式哈希是sha256-abcdef1234567890，内联事件哈希是sha256-1357924680abcdef，最终CSP配置如下：

Header always set Content-Security-Policy "default-src 'self'; style-src 'self' 'sha256-abcdef1234567890'; script-src 'self' 'unsafe-eval' 'sha256-0987654321fedcba' 'unsafe-hashes' 'sha256-1357924680abcdef'"

注意事项 #

• 哈希值必须与内联内容完全匹配（包括空格、换行），直接复制浏览器报错信息中的哈希是最准确的方式
• 'unsafe-eval'确实存在一定安全风险，但结合移除'unsafe-inline'并使用哈希的配置，已经是无法修改代码情况下的最优安全方案

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