Chrome扩展程序 - 未捕获DOMException:阻止具有来源的框架访问跨源框架

Question

之前有人将这篇文章标记为另一篇文章的副本,例如:SecurityError:阻止了一个原始框架来访问跨文本框架这篇文章是不同的,因为它是关于在Chrome网络扩展的上下文中避免此错误,这意味着可能有独特的解决方案.

我正在向Firefox移植Firefox Quantum扩展程序.扩展将iFrame注入用户的当前网页.现在,扩展程序在Firefox Quantum中没有问题,你可以在这里找到它:https://addons.mozilla.org/en-US/firefox/addon/tl-dr-auto-summarizer/？src = search

iFrame的源代码是一个名为"inject.html"的HTML文件,它绑定在扩展名中.

这是注入iFrame的缩短(以避免使帖子过长)的代码.此代码位于用户当前选项卡的内容脚本中:

var iFrame = document.createElement("iFrame");
iFrame.id = "contentFrame";
iFrame.classList.add("cleanslate");
iFrame.style.cssText = "width: 100% !important; height: 100% !important; border: none !important;";
iFrame.src = browser.extension.getURL("inject-content/inject.html");
document.body.appendChild(iFrame);

这是manifest.json

{
    "manifest_version": 2,
    "name": "TL;DR - Summarizer",
    "version": "3.0",

    "description": "Summarizes webpages",

    "permissions": [
        "activeTab",
        "tabs",
        "*://*.smmry.com/*"
    ],

    "icons":
    {
        "48": "icons/border-48.png"
    },

    "browser_action":
    {
        "browser_style": true,
        "default_popup": "popup/choose_length_page.html",
        "default_icon":
        {
            "16": "icons/summarizer-icon-16.png",
            "32": "icons/summarizer-icon-32.png"
        }
    },

    "web_accessible_resources": [
        "inject-content/inject.html",
        "inject-content/cleanslate.css"
    ],

    "content_security_policy": "script-src 'self' 'sha256-AeZmmPP/9ueCrodQPplotiV3Pw0YW4QqifjUL7NE248='; object-src 'self'"

}

注入iFrame后,我在iFrame加载后为iFrame中的按钮设置了"click"监听器.我使用以下代码示例执行此操作.但是,虽然以下代码适用于Firefox Quantum,但它会在Chrome中引发异常.

iFrame.onload = () => {

                //The error occurs on the following line.

                var closeButton = iFrame.contentWindow.document.getElementById("close-btn");

                closeButton.addEventListener("click", () => {
                    //Do Stuff
                });

                var copyButton = iFrame.contentWindow.document.getElementById("copy-btn");

                copyButton.addEventListener("click", () => {
                    //Do stuff
                });

            }

我得到以下异常:

未捕获的DOMException:阻止具有原点" http://example.com " 的帧访问跨源帧.在HTMLIFrameElement.iFrame.onload(file:/// C:/Users/vroy1/Documents/Programming/web-extension-summarizer/src/inject-content/inject.js:58:56)

我怎样才能避免这个错误？

如果有人想知道,我能够在Chrome扩展程序中使用PromiseAPI和browser命名空间的原因是因为我使用的是Mozilla提供的polyfill,它允许我使用promises和browser命名空间.

以下是单击其工具栏图标时扩展程序显示的弹出窗口的代码:

//Enable the polyfill for the content script and execute it in the current tab

browser.tabs.executeScript({ file: "/polyfills/browser-polyfill.js" }).then(loadContentScript).catch((error) => logError(error));

function loadContentScript() {
    browser.tabs.executeScript({ file: "/inject-content/inject.js" }).then(listenForClicks).catch((error) => logError(error));
}

function listenForClicks() {
    document.addEventListener('click', e => {
        if (!e.target.classList.contains('btn')) {
            return;
        } else {
            browser.tabs.query({ active: true, currentWindow: true })
                .then(tabs => {
                    browser.tabs.sendMessage(tabs[0].id, { summaryLength: e.target.id, targetURL: tabs[0].url });
                });
        }
    });
}

function logError(error) {
    console.log(error);
}

最后,这是内容脚本的完整代码:

https://pastebin.com/Yrs68zAB

Answer 1

您可以尝试将该代码（您想要在 iframe 上显示的内容）上传到网络服务器，然后设置标头。

'Access-Control-Allow-Origin: *'

Firefox 通常更适合本地文件，这可以解释您的错误

origin "http://example.com" from accessing a cross-origin frame. at file:///C:/Users/vroy1/Documents/Programming/web-extension-summarizer/src/inject-content/inject.js