Cross Origin Chrome擴展程序

Question

在過去一周左右的時間里，我一直在閱讀和玩Chrome Extensions，但我在努力實現我想要的東西時遇到了麻煩。 我想要創建的是一個擴展，在后台（或默默地）訪問網站填寫網頁上的表單並檢索響應。 該網站沒有API，我無法創建服務器來執行此操作，因為該網站僅允許每小時每個IP的X請求，因此我的請求將在少數用戶之后耗盡。

所以我的想法是創建一個后台頁面，該頁面將使用JS來填充表單，使用JS來getElementById，設置值，提交表單並將響應無縫地返回給用戶。

經過測試，似乎同源政策阻止了我。 這是我的代碼：

_

的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);
}

當第9,10,11,14行被注釋掉時，我按預期獲得“Some Text”，即本地框架正常工作。 但是，當我取消注釋這些行時，第二幀（在服務器上）會引發以下錯誤

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？

Answer 1

似乎沒有辦法繞過擴展頁面的同源策略。 請參閱https://bugs.chromium.org/p/chromium/issues/detail?id=344341 。

您可以通過將內容腳本注入背景頁面上的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事件。

如果需要在后台頁面和內容腳本之間進行某些通信，則需要使用消息傳遞。 有關SO的問題有很多。

Answer 2

您需要明確列出manifest.js中權限下的所有URL。嘗試使用未列出的任何內容都會導致Cross origin錯誤。

你可以列出權限部分下的網址，這應該有效。

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

希望有所幫助

Cross Origin Chrome擴展程序

問題描述

2 個解決方案

解決方案1
4 2016-05-03 15:09:58

解決方案2
0 2016-08-02 20:41:09

Cross Origin Chrome擴展程序

問題描述

2 個解決方案

解決方案1 4 2016-05-03 15:09:58

解決方案2 0 2016-08-02 20:41:09

解決方案1
4 2016-05-03 15:09:58

解決方案2
0 2016-08-02 20:41:09