Chrome扩展程序-未捕获的DOMException:阻止了具有原点的框架访问跨源框架 [英] Chrome Extension - Uncaught DOMException: Blocked a frame with origin from accessing a cross-origin frame
问题描述
Before someone marks this post as a duplicate of another post, such as this: SecurityError: Blocked a frame with origin from accessing a cross-origin frame this post is different because it is about avoiding this error in the context of a Chrome web extension, which means there may be unique solutions.
我正在将Firefox Quantum扩展程序移植到Chrome.该扩展程序将iFrame注入到用户的当前网页中.现在，该扩展程序可以在Firefox Quantum中正常运行，您可以在以下位置找到它:
I am porting a Firefox Quantum extension to Chrome. The extension injects an iFrame into the user's current web page. Right now, the extension works without problems in Firefox Quantum, you can find it here: https://addons.mozilla.org/en-US/firefox/addon/tl-dr-auto-summarizer/?src=search
iFrame的来源是扩展程序中捆绑的名为"inject.html"的HTML文件.
The source of the iFrame is a HTML file called "inject.html" that is bundled within the extension.
这里是插入iFrame的缩短的代码(以避免使帖子过长).此代码位于用户当前标签中的内容脚本中:
Here is the shortened (to avoid making the post excessively long) code that injects the iFrame. This code is within a content script in the user's current tab:
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
Here is the 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中引发了异常.
After injecting the iFrame, I set the "click" listeners for the buttons within the iFrame, once the iFrame has loaded. I do this using the following code sample. However, while the following code works in Firefox Quantum, it throws an exception in 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)
Uncaught DOMException: Blocked a frame with origin "http://example.com" from accessing a cross-origin frame. at 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，允许我使用promise和browser命名空间.
In case anyone is wondering, the reason I am able to use the Promise API and the browser namespace inside of a Chrome extension is because I am using a polyfill provided by Mozilla that allows me to use promises and the browser namespace.
这是扩展程序在单击其工具栏图标时显示的弹出窗口的代码:
Here is the code for the popup that the extension displays when its toolbar icon is clicked:
//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);
}
最后，这是内容脚本的完整代码:
Lastly, here is the full code of the content script:
推荐答案
对于Chrome，我在iframe中添加了一个脚本标记.然后，我可以在iframe加载的脚本中使用<button element>.addEventListener("click", function() {}.对于主机到主机的通信，我使用了window.parent.postMessage和其他此类方法.为了加载iframe，我在manifest.json中添加了以下内容:
For Chrome--I included a script tag in my iframe. I then could use <button element>.addEventListener("click", function() {} inside of the script loaded by the iframe. For frame to host communication, I used window.parent.postMessage and other such methods. In order to load the iframe, I added the following to my manifest.json:
"web_accessible_resources": [
"inject-content/inject.html",
"inject-content/cleanslate.css"
]
这篇关于Chrome扩展程序-未捕获的DOMException:阻止了具有原点的框架访问跨源框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
