WordPress（Betheme主题）无法加载YouTube iframe_api的CSP问题求助

问题根源 #

你之前的操作方向错误——Frame Ancestors用于控制哪些外部网站可以嵌入你的站点，而当前报错是脚本加载被Content Security Policy（CSP）的script-src指令拦截，两者属于完全不同的CSP规则范畴，所以添加Frame Ancestors配置无法解决问题。

可行解决办法 #

方法1：通过Really Simple SSL插件配置CSP #

• 打开Really Simple SSL插件后台，找到Content Security Policy设置模块（而非Frame Ancestors）
• 在script-src的允许域名列表中，添加www.youtube.com（无需填写完整API路径，仅域名即可）
• 保存设置后，清空浏览器缓存并重新刷新页面测试

方法2：自定义代码添加CSP头（适合有开发基础的用户） #

如果插件配置未生效，可在当前主题的functions.php文件中添加以下代码，手动注入正确的CSP规则：

function custom_csp_header() {
    header("Content-Security-Policy: script-src 'self' 'unsafe-inline' 'unsafe-eval' www.google-analytics.com ajax.googleapis.com www.googletagmanager.com www.google.com www.gstatic.com www.youtube.com;");
}
add_action('send_headers', 'custom_csp_header');

注意：修改主题文件前务必备份原文件，避免操作失误导致站点异常。

方法3：检查Betheme主题自带的安全设置 #

部分主题会内置CSP相关配置，你可以在Betheme的主题设置面板中搜索“Content Security Policy”或“安全”类选项，查看是否有独立的脚本源配置项，直接将www.youtube.com添加至允许列表即可。

验证方式 #

修改完成后，打开Chrome开发者工具的Console面板，刷新页面，若原有的Refused to load the script错误不再出现，说明配置已生效。

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