设置CSP缓解XSS，移除style-src 'unsafe-inline'后遇报错求助

我尝试通过设置Content-Security-Policy（CSP）标头缓解XSS攻击，但Chrome持续抛出错误：

拒绝执行内联事件处理程序，因为它违反了以下Content Security Policy指令："script-src 'self' 'nonce-Njg3MGUxNzkyMjViNDZkN2I3YTM3MDAzY2M0MjUxZGEzZmFhNDU0OGZjNDExMWU5OTVmMmMwMTg4NTA3ZmY4OQ=="。要启用内联执行，需使用'unsafe-inline'关键字、哈希值（'sha256-...'）或随机数（'nonce-...'）。

同时我还遇到一个问题：不想在应用中包含style-src 'unsafe-inline'，但移除该配置后就会抛出样式加载错误。

当前CSP标头配置代码如下：

httpResponse.setHeader(
        "Content-Security-Policy",
        "default-src 'self' 'unsafe-inline' 'unsafe-eval' data:;"
                + "style-src 'self' fonts.googleapis.com 'sha256-CwE3Bg0VYQOIdNAkbB/Btdkhul49qZuwgNCMPgNY5zw=';" + "base-uri 'self' data:;"
                + "frame-src 'self' * data:;" + "connect-src 'self' * data:;"
                + "font-src 'self' fonts.gstatic.com https://cdn.predix-ui.com data:;"
                + "frame-ancestors 'self' data:");
chain.doFilter(request, httpResponse);

解决内联事件处理程序的报错问题 #

你当前贴的配置里没有显式声明script-src规则，理论上会继承default-src的'unsafe-inline'，但报错信息里却显示script-src带有nonce值，说明实际生效的CSP规则和你提供的配置不一致——要么代码里还有其他地方设置了CSP，要么浏览器缓存了旧规则。

方案1：规范使用nonce（推荐） #

如果要保留nonce来允许内联脚本/事件，必须做到：

• 每个请求生成唯一随机的nonce值，不能用固定字符串（你现在的nonce是硬编码的，完全不符合安全要求）
• 在script-src中明确声明该nonce，同时把default-src里的'unsafe-inline'去掉（nonce/哈希会自动覆盖unsafe-inline的作用）
• 页面内的内联事件所在元素、内联脚本标签，必须带上对应的nonce属性，比如：<button nonce="生成的随机值" onclick="xxx">

方案2：移除内联事件（最安全） #

直接把HTML里的onclick、onload等内联事件属性删掉，改用外部JS文件通过事件监听器绑定逻辑，比如：

document.querySelector('#targetButton').addEventListener('click', function() {
  // 原内联事件的执行逻辑
});

解决移除style-src 'unsafe-inline'后的样式报错问题 #

移除后报错，说明页面里存在内联样式（比如<style>标签代码、元素的style属性），可以用两种方式解决：

方案1：为内联样式添加哈希值 #

计算页面内所有固定内联<style>标签内容的sha256哈希，把哈希值添加到style-src规则中。注意：如果内联样式是动态生成的，哈希值会变化，这种方法不适用。

方案2：彻底移除内联样式 #

• 把<style>标签里的代码全部移到外部CSS文件中
• 把元素的style属性替换成自定义类名，通过外部CSS控制样式

另外提醒：你的default-src里包含'unsafe-eval'，这会大幅削弱CSP的防护能力，如果不是业务必须使用eval相关功能，建议直接移除。

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