注入內容腳本和請求跨源許可

我很好奇，如果以下情況是Chrome中的錯誤，按預期工作或開發人員錯誤。注入內容腳本和請求跨源許可

所以，我有一個擴展。在它的manifest.json我請求跨域權限兩個站點：

"permissions": [ 
    "http://www.foo.com/*", 
    "http://www.bar.com/*" 
]

我也聲明內容腳本：

"content_scripts": [ 
    { 
     "matches": ["http://www.foo.com/*"], 
     "js": ["injectedScript.js"] 
    } 
]

所以，我指出，我想注入「injectedScript .js「放入所有foo.com域。「injectedScript.js」看起來像：

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = handleStateChange; // Implemented elsewhere. 
xhr.open("GET", 'http://www.bar.com/123'), true); 
xhr.send();

現在，一個iframe添加到我的Chrome擴展的頁面。它看起來像這樣：

<iframe src="http://www.foo.com/123"></iframe>

這個框架的src我的內容腳本模式相匹配。因此，當框架加載時，injectScript.js被注入其中。 但是注入腳本中的XMLHttpRequest失敗。

現在，這讓我想知道預期的行爲是什麼。當我請求適當的權限時遇到CORS問題令人沮喪......但是我也可以理解，我試圖從我的chrome擴展之外的原點訪問「http://www.bar.com/123」......儘管加載到擴展中的iframe我有權訪問。

任何關於此事的想法？

編輯：如果你想知道什麼我可以在從實際情況來看越來越 - 我想注入一些JavaScript可以調用getImageData在注入的頁面的視頻。但是，我不能，因爲getImageData認爲視頻的src是有污染的數據。我已經請求了適當的權限，但是它並沒有緩衝到iframe中。

UPDATE：這裏有一個畫面：http://i.imgur.com/PR48HO2.png

來源

2013-05-08 Sean Anderson

我面臨同樣的問題。我知道你已經找出了原因，並在你的（不幸的）擴展中解決它。你能分享這個解決方案嗎（或許你自己添加一個答案）？ – 2017-05-05 01:44:26

-1

同源政策實施，以防止惡意的JavaScript攻擊（你可以閱讀更多有關here），是網絡安全模型的重要組成部分。很遺憾，你不能直接在內容腳本中使用HTTP請求。

但是，如果你碰巧有機會獲得你要允許訪問，您可以添加下面的PHP代碼，允許將文件跨來源：

header('Access-Control-Allow-Origin: *');

該代碼基本上允許任何網站/ IP地址在以下文件中使用Cross-Origin。

如果您沒有訪問該文件，你可以做一個變通辦法，例如，而不是試圖直接將HTML，調用個人服務器上的PHP腳本會抓住它，你有跨來源啓用使用上面的代碼。

下面是一個例子：

header('Access-Control-Allow-Origin: *'); 

$URL = ("http://www.bar.com/123"); 

$HTMLfromURL = file_get_contents($URL); 

echo $HTMLfromURL

，然後在Chrome擴展方面有：

注意：您要使用XMLHttpRequest已經過時，並導致用戶側顯著的性能影響。下面的代碼是一個異步版本的，它沒有負面的性能影響。

var URL = "http://example.com/myscript.php"; 
var xhr = new XMLHttpRequest(); 
xhr.open("GET", URL, true); 
xhr.onload = function (e) { 
if (xhr.readyState === 4) { 
    if (xhr.status === 200) { 
     var HTMLfromURL = xhr.responseText; 
} else { 
      // Received unexpected HTML error code (such as 404, or 403) 
      console.error(xhr.statusText); 
     } 
     } 
    }; 
xhr.onerror = function (e) { 
    console.error(xhr.statusText); 
    // Run this code if failed to load page 
}; 
xhr.send(null);

來源

2016-02-23 07:06:05 Tidal5

注入內容腳本和請求跨源許可

回答

相關問題