配置Content-Security-Policy后WordPress博客及插件、Smartsupp异常求助

现有配置错误诊断 #

你当前的CSP规则存在核心语法错误：规则末尾; *.example.pl/blog/wp-content部分没有指定对应的CSP指令，分号是不同CSP指令的分隔符，该段属于无效配置，会导致浏览器解析规则异常，直接引发后续资源拦截问题。

功能异常的具体原因 #

• WordPress的图片、插件脚本、样式资源默认存放在/blog/wp-content/、/blog/wp-includes/路径下，后台功能还依赖/blog/wp-admin/路径的资源，现有规则未授权这些路径的资源加载权限，导致图片加载失败、插件失效。
• Smartsupp聊天工具除了静态资源外，还需要建立websocket连接同步在线状态，现有规则未配置connect-src指令授权对应接口连接，导致显示离线。
• 多数WordPress插件会使用内联脚本、动态加载第三方资源，未在CSP中授权对应源时就会出现功能失效。

修复方案 #

1. 修正主站.htaccess配置 #

替换原有CSP配置为以下内容：

<IfModule mod_headers.c>    
Header set Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval' *.example.pl *.youtube.com *.google.com *.linkedin.com *.fontawesome.com *.jsdelivr.net *.smartsuppcdn.com *.google-analytics.com *.googletagmanager.com *.example.com.pl;
img-src 'self' data: blob: *.example.pl *.gravatar.com;
connect-src 'self' *.smartsuppcdn.com wss://*.smartsupp.com *.google-analytics.com *.googletagmanager.com;
font-src 'self' *.fontawesome.com *.jsdelivr.net;
frame-src 'self' *.youtube.com *.google.com"
</IfModule>

调整说明：

• 新增img-src指令授权图片资源加载，覆盖WordPress常用的头像、本地图片、特殊格式图片需求。
• 新增connect-src指令授权Smartsupp的websocket连接、统计工具上报接口，解决聊天工具离线问题。
• 拆分了字体、iframe等专项资源的加载规则，减少规则冲突，提升安全性。
  如果不需要全局生效，可以单独在WordPress站点根目录的.htaccess文件中配置独立CSP规则，优先级会高于主站根目录配置。

2. WordPress端适配方案 #

如果后续仍有插件报错，可以使用WordPress的CSP配置类插件，在后台可视化添加对应插件需要的资源源，不需要手动修改服务器配置，适配效率更高。

CSP配置通用规范 #

• 调试阶段建议先将Content-Security-Policy改为Content-Security-Policy-Report-Only，此时规则只会上报错误不会实际拦截资源，确认所有资源加载正常后再切换为正式生效规则。
• 不同类型的资源尽量用对应的专项指令配置，不要全部堆砌在default-src中，减少规则冲突的同时提升防护效果。
• 规则中的源地址尽量缩小授权范围，不要随意使用大范围通配符，避免降低CSP的防护能力。

内容的提问来源于stack exchange，提问作者Michał Chęciński