指南 · 约 3 分钟阅读
部署 Content-Security-Policy,不弄坏你的网站
CSP 告诉浏览器可以信任哪些脚本、样式和图片来源。它是抵御注入脚本和盗卡 skimmer 的最佳防线,部署越谨慎,效果越好。
代码和配置保持英文。
1. 从仅报告模式开始
浏览器会在控制台中报告违规,但不会拦截任何内容。
nginx
add_header Content-Security-Policy-Report-Only "default-src 'self'; img-src 'self' data: https:; script-src 'self'; style-src 'self' 'unsafe-inline'; frame-ancestors 'self'; object-src 'none'; base-uri 'self'" always;2. 浏览网站并查看控制台
在关键页面(首页、商品页、购物车和结账页、联系表单)打开 DevTools → Console。每个被拦截的来源都会显示在那里。把你信任的来源(例如 https://www.googletagmanager.com 或你的支付服务商)加入对应的指令。
3. 强制执行
当控制台不再报错时,把响应头改名为 Content-Security-Policy。在测试更严格的版本时,保留仅报告的响应头与之并存。
.htaccess
Header always set Content-Security-Policy "default-src 'self'; img-src 'self' data: https:; script-src 'self' https://www.googletagmanager.com; style-src 'self' 'unsafe-inline'; frame-ancestors 'self'; object-src 'none'; base-uri 'self'"WordPress 提示
- 很多主题和插件使用内联脚本。一开始你可能需要在
script-src中加入'unsafe-inline'。这样防护较弱,但frame-ancestors、object-src和base-uri仍然有用。 - 要实现严格的策略,请使用 nonce:WordPress 5.7+ 可以为通过
wp_print_inline_script_tag()输出的脚本添加属性。 - 先在最关键的结账页上启用严格的 CSP。
常用指令
frame-ancestors 'self':X-Frame-Options 的现代替代。upgrade-insecure-requests:自动把 http:// 资源升级为 https://。connect-src:限制脚本可以把数据发送到哪里,对防御 skimmer 很有用。