如何在低代码改动下移除CSP中的unsafe-inline和unsafe-eval

针对内联脚本的处理方案 #

• 哈希授权可信内联脚本
  对没法删除的内联脚本，计算它的SHA-256/384/512哈希值，把哈希串加到script-src规则里。比如内联脚本是alert('init')，生成哈希后，CSP里的script-src就写成：

  script-src 'sha256-abcdef123456...' https://ajax.googleapis.com https://analytics.kaltura.com
  

  浏览器会自动验证内联脚本的哈希是否匹配，不用修改原有脚本代码，只要把哈希加进CSP就行。唯一要注意的是，如果内联脚本内容改了，哈希也要重新生成更新。

• 用动态nonce标记内联脚本
  给必须保留的内联脚本标签加nonce="随机唯一值"属性，同时在CSP的script-src里加入'nonce-随机唯一值'。这个随机值要每个请求都动态生成（比如后端在响应页面时生成），不能固定死。这种方式不用改脚本内容，只需要给脚本标签加属性，适合批量处理大量内联脚本的场景。

• 替代'unsafe-eval'的方案
  要是代码里有eval、new Function这类依赖unsafe-eval的语法，优先改成直接写函数逻辑。如果实在改不了，就用'unsafe-hashes'配合哈希值，只允许特定的eval调用。比如某个eval执行的内容是固定的，计算这个内容的哈希，加到script-src里：

  script-src 'unsafe-hashes' 'sha256-xxx...' https://ajax.googleapis.com ...
  

  这样只允许这个特定的eval执行，比直接开unsafe-eval安全太多。

针对内联样式的处理方案 #

• 哈希授权内联样式
  像<div class="some-class" style="background-color: red;"></div>这种内联样式，计算整个style属性值的哈希，把哈希加到style-src规则里。比如style值是background-color: red;，生成哈希后，CSP里的style-src写成：

  style-src 'self' 'sha256-xxx...'
  

  浏览器会验证内联样式的哈希，不用修改页面代码就能通过CSP校验。

其他实用建议 #

• 外部脚本统一管控
  已经在script-src里配置了可信外部域名，确保这些域名都是经过验证的安全来源。可以把分散的外部脚本尽量合并到少数几个可信域名，减少CSP规则里的域名数量，降低维护成本。

• 用Report-Only模式逐步过渡
  别一下子直接移除unsafe-inline和unsafe-eval，先开启CSP的report-only模式：

  Content-Security-Policy-Report-Only: default-src 'self' https: blob: data:; script-src https://ajax.googleapis.com https://analytics.kaltura.com ...; ...
  

  这个模式下不会拦截资源加载，只会把违规行为上报到你指定的地址。等收集完所有需要处理的内联脚本、样式后，再针对性添加哈希或nonce，最后再正式移除unsafe-inline和unsafe-eval，避免一下子出现大量页面异常。

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