跨域 Chrome 扩展
Posted
技术标签:
【中文标题】跨域 Chrome 扩展【英文标题】：Cross Origin Chrome Extension 【发布时间】：2016-08-28 08:17:47 【问题描述】：上周左右我一直在阅读和使用 Chrome 扩展程序，但我在尝试实现我想要的东西时遇到了麻烦。我要创建的是一个扩展，它在后台（或静默）访问网站，填写网页上的表格并检索响应。该网站没有 API，我无法创建服务器来执行此操作，因为该网站每小时每个 IP 只允许 X 次请求，因此我的请求会在几个用户之后用尽。
所以我的想法是创建一个后台页面，其中包含一些 javascript 来使用 JS 填写表单以获取元素ById、设置值、提交表单并将响应无缝地返回给用户。
经过测试，似乎同源政策阻止了我。这是我的代码：
_
manifest.json
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"permissions": [
"activeTab", "webRequest", "webRequestBlocking",
"https://ajax.googleapis.com/"
],
"background":
"page": "Page.html"
页面.HTML：
<html>
<head>
<script src="myJS.js"></script>
</head>
<body>
<iframe src="CO-TEST-FRAME.html" id="maniframe" class="maniframe"></iframe>
<iframe src="http://www.myserver.com/iframe/CO-TEST-FRAME.html" id="maniframe2" class="maniframe2"></iframe>
<p id="test">new</div>
</body>
</html>
CO-TEST-FRAME.HTML：
<html>
<head>
</head>
<body>
<div id="desired" class="desired" hidden="hidden">some text</div>
</body>
</html>
myJS.js：
window.onload = function()
alert("working");
var iframe = document.getElementById("maniframe");
var iframeStuff = iframe.contentDocument || iframe.contentWindow.document;
var test = iframeStuff.getElementById("desired").innerHTML;
var iframe2 = document.getElementById("maniframe2");
var iframeStuff2 = iframe2.contentDocument || iframe.contentWindow.document;
var test2 = iframeStuff.getElementById("desired").innerHTML;
console.log(test);
console.log(test2);
当第 9、10、11、14 行被注释掉时，我得到了预期的“一些文本”，即本地框架工作正常。但是，当我取消注释这些行时，第二帧（在服务器上）会引发以下错误
myJS.js:10 Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "chrome-extension://laocffdoafnoeipdndafcdbiaaephcah" from accessing a frame with origin "http://www.myserver.com". The frame requesting access has a protocol of "chrome-extension", the frame being accessed has a protocol of "http". Protocols must match.
我理解为什么这会被阻止（因为人们能够以恶意意图运行 JS）但是 AFAIK 后台页面是在隔离环境中运行的，所以无论如何都可以减轻所有风险？有什么办法可以规避同源政策或做我试图以另一种方式实现的目标？可能在用户页面上带有内容脚本和 1x1 iframe？
【问题讨论】：
【参考方案1】：似乎没有办法规避扩展页面的同源策略。见https://bugs.chromium.org/p/chromium/issues/detail?id=344341。
您可以通过将content script 注入背景页面上的 iframe 并使用内容脚本访问和操作 iframe DOM 来实现您的目标。
一个简单的例子：
将以下内容添加到您的manifest.json：
"content_scripts": [
"matches": ["http://www.myserver.com/iframe/CO-TEST-FRAME.html"],
"js": ["contentScript.js"],
"all_frames": true
contentScript.js：
console.log("Content script injected.");
var test = document.getElementById("desired").innerHTML;
console.log("Text from " + document.URL + ": " + test);
请注意，内容脚本中没有window.onload。默认情况下，在 DOM 加载后注入内容脚本，因此不会触发 window.onload 事件。
如果需要在后台页面和内容脚本之间进行一些通信，您需要使用message passing。 SO上有很多与此相关的问题。
【讨论】：
"all_frames": true 是做什么的？
它将内容脚本注入到所有匹配的帧中。如果此参数设置为 false 或省略，则内容脚本将仅注入顶部框架（如果其 URL 匹配）。请参阅文档：developer.chrome.com/extensions/content_scripts#frames【参考方案2】：
您需要在 manifest.js 中明确列出所有权限下的 URL 尝试使用未列出的任何内容会导致跨源错误。
您可以在权限部分列出网址，这应该可以。
"permissions": [
"webRequest",
"storage",
"https://mail.google.com/*",
"http://myserver.com/*",
"https://blah.blah.com/*"
],
希望有帮助
【讨论】：
当我在 Chrome 66 中尝试这个时，我仍然遇到跨域错误。Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://example.com" from accessing a cross-origin frame.
另外，如果 iframe 指向我的 web_resources_directory 中的文件怎么办？以上是关于跨域 Chrome 扩展的主要内容，如果未能解决你的问题，请参考以下文章
跨域读取阻止 (CORB) API-调用 Chrome 扩展
如何避免 chrome web 扩展中的跨域读取阻塞（CORB）