添加带Nonce的Content Security Policy PHP头后控制台报错排查

核心问题排查 #

1. Nonce使用不符合规范 #

你当前用了固定值EDNnf03nceIOfn39fn3e9h3sdfa作为nonce，但CSP要求nonce必须是每次HTTP请求生成的唯一随机值：

• 固定nonce完全失去了安全防护意义，等同于直接放开内联脚本/样式的权限
• 部分浏览器会拒绝信任重复使用的nonce，导致带该nonce的内联代码被拦截

正确实现方式：每次请求用PHP生成随机nonce，同步到CSP头和HTML标签中：

// 生成随机nonce
$nonce = bin2hex(random_bytes(16));
// 设置CSP头
header("Content-Security-Policy: default-src 'self' https: data:; script-src 'self' https: data: 'nonce-$nonce'; style-src 'self' https: data: 'nonce-$nonce'; style-src-attr 'self' 'unsafe-hashes'");

HTML中对应引用：

<script nonce="<?php echo $nonce; ?>" type="text/javascript"> 
    // some code
</script>

<style nonce="<?php echo $nonce; ?>" type="text/css"> 
    // some code
</style>

2. 未授权元素内联样式属性 #

WordPress主题和插件常使用元素的style属性（如<div style="margin:0">），你的CSP配置未专门配置style-src-attr指令：

• 默认情况下style-src-attr会继承default-src规则，但default-src不允许内联属性，导致这类样式被拦截
• 需添加style-src-attr 'self' 'unsafe-hashes'（不推荐直接用'unsafe-inline'，优先用哈希或nonce做精准控制）

3. 可能的资源类型覆盖不全 #

如果控制台还有其他资源报错，可补充对应CSP指令：

• 字体资源：font-src 'self' https: data:
• 内嵌框架：frame-src 'self'
• 媒体资源：media-src 'self' https:

CSP头顺序说明 #

你当前的CSP指令顺序是正确的，CSP对指令排列顺序没有要求，浏览器会按指令类型（如script-src、style-src）分别处理，和书写顺序无关。

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