Question

站点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的跨源访问权限。 B因此无法修改其跨来源政策。

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

Answer 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
    });
});

以上代码将同时注入A和B，但仅在B中执行。如果A中有多个帧，则还必须使用window.location.hostname检查该帧是否正确。

避免通过Chrome扩展程序执行跨域策略

1 个答案: