Cross Origin Chrome Extension

I have been reading and playing around with Chrome Extensions for the last week or so but I'm having trouble trying to achieve what I want. What I am trying to create is an Extension that in the background (or silently) visits a website fills out a form on the web page and retrieves the response. The website doesn't have an API and I can't create a server to do this as the website only allows X requests per IP per hour so my requests would be exhausted after a few users.

So my idea was to create a background page that would have some javascript to fill out the form using JS to getElementById, set the values, submit the form and return the response to the user seamlessly.

After testing it seems the Same Origin policy is blocking me. Here's my code:

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"
    }
}

Page.HTML:

<html>
    <head>
        <script src="myJS.js"></script>
    </head>
    <body>
        <iframe src="CO-TEST-FRAME.html" width="400" height="400" id="maniframe" class="maniframe"></iframe>
        <iframe src="http://www.myserver.com/iframe/CO-TEST-FRAME.html" width="400" height="400" 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);
}

When line 9, 10, 11, 14 is commented out I get "Some Text" as expected i.e. the local frame works fine. However when I uncomment those lines the second frame (on a server) throws the following error

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.

I understand why this is blocked (due to people being able to run JS with malicious intent) but AFAIK background pages are run in an isolated environment so all risk is mitigated anyway? Is there any way to circumvent the Same-Origin policy or do what I am trying to achieve in another way? Possibly with a content script and a 1x1 iframe on the user page?

标签： javascript google-chrome-extension cross-domain same-origin-policy

2条回答

你好瞎i

2楼-- · 2020-06-17 05:18

There seems to be no way to circumvent the Same-origin policy for extension pages. See https://bugs.chromium.org/p/chromium/issues/detail?id=344341.

You can achieve your objective by injecting a content script into the iframe on your background page and accessing and manipulating the iframe DOM using the content script.

A trivial example:

Add the following to your 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);

Note that there is no window.onload in the content script. Content scripts are injected after the DOM has loaded be default, so the window.onload event would not trigger.

In case some communcation between the background page and the content script is needed, you will need to employ message passing. There are many questions related to that on SO.

0人赞添加讨论(0) 举报

萌系小妹纸

3楼-- · 2020-06-17 05:26

You need to explicitly list all the URLs under permissions in manifest.js Trying to use anything which is not listed would cause a Cross origin error.

you can list the url under permissions section and that should work.

"permissions": [
        "webRequest",
        "storage",
        "https://mail.google.com/*",
        "http://myserver.com/*",
        "https://blah.blah.com/*"
    ],

Hope that helps

0人赞添加讨论(0) 举报

Cross Origin Chrome Extension

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间