Chrome扩展嵌入站点时的跨域iframe访问问题

问题根源分析 #

你遇到的Blocked a frame with origin "https://myblog.com" from accessing a cross-origin frame错误，核心原因是WordPress登录页面的内置代码（tryShowingMateBar函数）尝试访问父窗口，同时WordPress默认的安全机制（X-Frame-Options头、Cookie SameSite属性）阻止了跨域iframe中的正常登录流程，并非你添加的CSP头直接导致的问题。

分步解决方案 #

1. 移除WordPress默认的X-Frame-Options限制 #

WordPress会默认给wp-login.php页面添加X-Frame-Options: SAMEORIGIN头，这个头优先级高于CSP的frame-ancestors，会直接阻止跨域页面嵌入登录页面。你需要通过代码移除这个头：

在主题的functions.php文件中添加以下代码：

add_filter('wp_headers', function($headers) {
    // 仅针对登录页面移除X-Frame-Options
    if (isset($_SERVER['REQUEST_URI']) && strpos($_SERVER['REQUEST_URI'], 'wp-login.php') !== false) {
        unset($headers['X-Frame-Options']);
    }
    return $headers;
});

2. 修正Content-Security-Policy设置 #

你之前重复设置了两次CSP头，后一次会覆盖前一次导致配置无效。合并成单个正确的CSP头，仅保留frame-ancestors（控制哪些页面可以嵌入你的WordPress站点）：

在wp-config.php中替换原有的CSP相关代码为：

// 注意：确保扩展ID与错误提示中的一致（之前你写错了一个字符）
header('Content-Security-Policy: frame-ancestors https://anothersite.com https://myblog.com chrome-extension://kacbklkbjmnjkhnellgciecdogkkldoj');

3. 调整WordPress Cookie的SameSite属性 #

跨域iframe中登录时，浏览器的SameSite Cookie政策会阻止非同源请求携带Cookie。需要修改WordPress的Cookie设置，允许跨域iframe传递登录Cookie：

在wp-config.php中添加以下配置：

define('COOKIE_SAMESITE', 'None');
define('COOKIE_SECURE', true); // 必须启用，因为SameSite=None要求HTTPS环境

4. 检查iframe的sandbox属性（如果使用） #

如果你的Chrome扩展在注入iframe时添加了sandbox属性，必须确保包含必要权限，否则登录表单无法提交、Cookie无法保存。正确的sandbox配置示例：

<iframe 
    src="https://myblog.com/wp-login.php" 
    sandbox="allow-same-origin allow-forms allow-scripts allow-top-navigation"
></iframe>

如果不需要sandbox限制，直接移除该属性即可。

验证步骤 #

1. 清除浏览器缓存和Cookie
2. 重新加载https://anothersite.com页面，测试iframe中的登录流程
3. 检查浏览器开发者工具的「网络」标签，确认wp-login.php请求的响应头中：
   • 没有X-Frame-Options头
   • 正确包含Content-Security-Policy: frame-ancestors ...
   • Cookie的SameSite属性为None且Secure为true

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