通过 Chrome 扩展程序避免跨域策略
Posted
技术标签:
【中文标题】通过 Chrome 扩展程序避免跨域策略【英文标题】:Avoid cross-origin policy via Chrome extension 【发布时间】:2019-03-20 02:34:14 【问题描述】:站点 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 所以不能修改他们的跨域策略。
我希望从扩展程序运行时,我得到用户的更多同意,以便能够绕过相同的来源策略并执行上述操作。
【问题讨论】:
如果您想将代码注入到站点 B 框架中,这是完全可行的。这是你想做的吗? iframe 的来源是否与站点 B 相同? @extempl 这些网站是两个不同的来源。 【参考方案1】:如果您希望将脚本注入框架,您可以使用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
检查帧是否正确。
【讨论】:
以上是关于通过 Chrome 扩展程序避免跨域策略的主要内容,如果未能解决你的问题,请参考以下文章