Question

在有人将此帖子标记为其他帖子的副本之前，例如：SecurityError: Blocked a frame with origin from accessing a cross-origin frame此帖子不同，因为它是关于在Chrome网络扩展程序的上下文中避免此错误，这意味着可能有独特之处的解决方案。

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

iFrame的来源是一个名为＆＃34; inject.html＆＃34;的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后，我设置了＆＃34;点击＆＃34;一旦iFrame加载，iFrame中按钮的监听器。我使用以下代码示例执行此操作。但是，虽然以下代码适用于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：阻止了一个包含起源的框架＆＃34; http://example.com＆＃34;从访问跨源框架。在HTMLIFrameElement.iFrame.onload（file：/// C：/Users/vroy1/Documents/Programming/web-extension-summarizer/src/inject-content/inject.js:58:56）

如何避免此错误？

如果有人想知道，我可以在Chrome扩展程序中使用Promise API和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所需的代码上传到Web服务器，并设置标头。

'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

Answer 2

对于Chrome浏览器-我在iframe中添加了一个脚本标记。然后，我可以在iframe加载的脚本中使用<button element>.addEventListener("click", function() {}。对于主机到主机的通信，我使用了window.parent.postMessage和其他此类方法。为了加载iframe，我在manifest.json中添加了以下内容：

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

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

2 个答案: