时间戳

首页 > 解决方案 > 通过 Chrome 扩展程序避免跨域策略

javascript - 通过 Chrome 扩展程序避免跨域策略

问题描述

站点 A 是一个<iframe>包含站点 B 的网站。它在带有扩展名的 chrome 浏览器上运行。

我可以控制扩展。我想做的是让用户控制编辑站点 B 的部分内容。

当用户按下扩展程序上的按钮时，将调用以下内容。目的是加载 jQuery，以便我可以使用它，定位页面上的 iframe，进入 iframe，然后更改其主体颜色。

chrome.tabs.executeScript(null, {file: 'assets/jquery.min.js'}, function () {
  chrome.tabs.executeScript({
    code: "jQuery('iframe').contents().find('body').css('backgroundColor', 'red');"
  });
});

站点 A 和站点 B 位于不同的域中，因此启动相同的源策略。还值得注意的是，站点 B 没有授予站点 A 的跨源访问权限。我也不是站点 A 或站点 B 的所有者，所以不能修改他们的跨域政策。

我希望从扩展程序运行时，我得到用户的更多同意，以便能够绕过相同的来源策略并执行上述操作。

标签： javascriptgoogle-chrome-extensionsame-origin-policy

解决方案

如果您希望将脚本注入框架，您可以使用该allFrames选项将代码注入页面的所有框架。

在运行代码之前，您必须检查您是否在 A 或 B 中：您可以通过window.self与window.parent. 在顶部框架 (A) 中，它们将是相同的对象，但在<iframe>（如 B）内部，它们将不同。

这里是：

chrome.tabs.executeScript(null, {file: 'assets/jquery.min.js', allFrames: true}, function () {
    chrome.tabs.executeScript({
        code: "if (self != parent) jQuery('body').css('backgroundColor', 'red');",
        allFrames: true
    });
});

注意：自 2021 年 1 月起，改为使用 Manivest V3 chrome.scripting.executeScript()。

上面的代码将同时注入 A 和 B，但只会在 B 中执行。如果 A 中有多个帧，您还必须使用例如检查帧是否正确window.location.hostname。

推荐阅读