正文 

当前位置： 首页 > 问答 >

跨域 Chrome 扩展

     2023-02-27     124

关键词：

【中文标题】跨域 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 扩展程序避免跨域策略

】通过Chrome扩展程序避免跨域策略【英文标题】：Avoidcross-originpolicyviaChromeextension【发布时间】：2019-03-2002:34:14【问题描述】：站点A是一个网站，其&lt;iframe&gt;包含站点B。它在带有扩展程序的chrome浏览器上运行。我可以控... 查看详情

跨域读取阻止 (CORB) API-调用 Chrome 扩展

】跨域读取阻止(CORB)API-调用Chrome扩展【英文标题】：Cross-OriginReadBlocking(CORB)API-CallChrome-extension【发布时间】：2019-10-2201:54:52【问题描述】：我想通过我的chrome-extension的post调用一个api，问题是没有得到响应数据。我刚刚在控制台... 查看详情

如何避免 chrome web 扩展中的跨域读取阻塞（CORB）

】如何避免chromeweb扩展中的跨域读取阻塞（CORB）【英文标题】：HowtoavoidCross-OriginReadBlocking(CORB)inachromewebextension【发布时间】：2019-07-1403:50:46【问题描述】：我写了一个chromewebextension来避免在开发自己的网络应用程序时出现CORS限... 查看详情

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

】Chrome扩展-未捕获的DOMException：阻止具有源的框架访问跨域框架【英文标题】：ChromeExtension-UncaughtDOMException:Blockedaframewithoriginfromaccessingacross-originframe【发布时间】：2018-10-1401:26:43【问题描述】：在有人将此帖子标记为另一个帖... 查看详情

Chrome 跨域补丁请求不起作用

】Chrome跨域补丁请求不起作用【英文标题】：ChromeCross-DomainPATCHrequestnotworking【发布时间】：2013-07-0208:52:35【问题描述】：我有一个带有RESTApi的网站，现在我正在创建一个浏览器扩展程序，它将从一些页面收集数据并将它们发送... 查看详情

chrome插件(扩展)开发资料

...用的Chrome浏览器API Chrome浏览器扩展开发系列之十五：跨域访问的XMLHttpRequest对象 Chrome浏览器扩展开发系列之十四：本地消息机制Nativemessaging Chrome浏览器扩展开发系列之十三：消息传递Message Chrome浏览器扩展开发系... 查看详情

来自 Google Chrome 中的用户脚本的跨域 XHR

】来自GoogleChrome中的用户脚本的跨域XHR【英文标题】：Cross-originXHRfromauserscriptinGoogleChrome【发布时间】：2010-12-2813:01:07【问题描述】：有没有人幸运地从GoogleChrome中的用户脚本执行跨源XHR？请求通过服务器（我可以在日志中看到... 查看详情

Chrome 扩展程序中的 SWF 对象 - API 不可用

...Listener的JavaScript控件之外，一切都正常。我的猜测是它与跨域策略有关，因为在网络服务器上测试页面时一 查看详情

Chrome 扩展如何将数据从内容脚本发送到 popup.html

...我有这个班级作业。所以我需要制作一个插件，可以使用跨域请求计算任何给定页面上的 查看详情

解决chrome跨域问题-跨域系列

解决Chrome跨域问题-跨域系列团子家族_方糖咖啡 关注 0.3 2018.06.2117:36* 字数385 阅读5951评论0喜欢2解决Chrome跨域问题，首先注意要区分Chrome版本，49之前的版本和49之后的版本处理方法不同。具体如下：Chrome49之后... 查看详情

从 v38 开始，Chrome 扩展程序无法再从 HTTP URL 加载，解决方法？

...用户运行我们的Chrome插件，其中包括通过XMLHttpRequest执行跨域请求，如Chromeextensiondevelopmentpage 查看详情

开发机上绕过chrome同源策略的办法

...发机上绕过Chrome同源策略的办法标签： Chrome同源策略跨域2013-08-2118:33 6071人阅读 评论(0) 收藏 举报 分类：Chrome扩展（1） 版权声明：本文为博主原创文章，未经博主允许不得转载。当需要用jQuery通过ajax... 查看详情

跨域 iFrame 中的凭据填充

】跨域iFrame中的凭据填充【英文标题】：Credentialfillingincross-originiFrame【发布时间】：2019-10-3006:20:02【问题描述】：同源策略禁止***域访问跨域iFrame。浏览器扩展的内容脚本在***页面(https://developer.chrome.com/extensions/content_scripts)的... 查看详情

chrome跨域设置

...ular路由，用版本为54.0的chrome运行示例中的html时出现禁止跨域现象，如下：google了下解决方法，转载如下，原文地址：http://www.cnblogs.com/cshi/p/5660039.html做前后分离的webapp开发的时候，出于一些原因往往需要将浏览器设置成支持跨... 查看详情

注入内容脚本并请求跨域权限

】注入内容脚本并请求跨域权限【英文标题】：Injectingcontentscriptsandrequestingcross-originpermissions【发布时间】：2013-05-0308:20:00【问题描述】：我很好奇以下情况是Chrome中的错误、按预期工作还是开发人员错误。所以，我有一个扩展... 查看详情

chrome禁用浏览器跨域拦截

版本号49之后的chrome跨域设置chrome的版本升到49之后，跨域设置比以前严格了，在打开命令上加--disable-web-security之后还需要给出新的用户个人信息的目录。众所周知chrome是需要用gmail地址登录的浏览器，登录后就会生成一个存储... 查看详情

求助关于chrome跨域的问题

参考技术Ajsonp能使用的前提是跨域地址给你提供了访问方式，就像你不可以直接请求baidu地址一样，百度又没有给你提供这样的服务，一般解决跨域问题， 查看详情

使用后台页面的跨域 XMLHttpRequest

】使用后台页面的跨域XMLHttpRequest【英文标题】：Cross-domainXMLHttpRequestusingbackgroundpages【发布时间】：2011-12-0317:14:04【问题描述】：在我的Chrome扩展程序中，我想让我的options.html页面与Google的OpenIdAPI之类的东西进行通信。为了无缝... 查看详情