跨域OAuth ...如何獲得響應？

Question

我正在創建一個Chrome擴展程序，它將與特定的熱門網站進行交互。

它將html注入到添加了新功能的站點中。這些功能的部分功能取決於用戶的登錄狀態，爲了獲取登錄的用戶信息，我們需要使用此網站的OAuth身份驗證API對擴展進行身份驗證。

例如，讓我們說，流行的網站（即不擁有，很明顯）是www.github.com。

當用戶在www.github.com，我們的擴展注入一個按鈕，上面寫着「連接與GitHub的」在網站上。

點擊該按鈕後，會彈出一個對Githubs OAuth API的彈出窗口，並詢問用戶：'您是否想讓應用程序XYZ訪問您的GitHub帳戶？是/否「。

一旦他們打是的，我們的擴展進行身份驗證，現在可以使用GitHub的API來訪問像他們的用戶名和這樣的信息，並將它注入右轉入github.com網站。

所有這些都是我們希望它工作的方式，但問題是我們在當前窗口（www.github.com）和我們自己的服務器（www.server.com）的彈出窗口之間進行通信時遇到了很多困難。

基於OAuth的認證成功回調恰好在彈出，返回的道理，我們無法溝通回主頁，因爲「協議，域和端口的不匹配。

什麼是捕獲從彈出的OAuth成功窗口內該令牌，這樣我們就可以使用此標記在我們的擴展，它坐落在其他領域的最佳方法是什麼？

Answer 1

如何執行以下操作：在身份驗證流程的最後階段，你可以重定向到server.com。既然你自己server.com你可以在它通過window.opener.postMessage

例如將數據傳遞到擴展年底注入一個腳本，在由server.com呈現的最後一頁：

window.opener.postMessage({"userhash": "abc1234567890"}, '*'); 

然後在窗口上註冊事件監聽器在擴展

window.addEventListener('message', function(e) { 
    console.log(e.data); 
}); 

這應該在鉻和Firefox的工作。

Answer 2

也許你不能得到迴應，因爲Chrome有一個「相同的來源策略」。 https://en.wikipedia.org/wiki/Same-origin_policy

通常情況下，您可以通過讓www.server.com將www.github.com放入響應中的Access-Control-Allow-Origin標頭來解決這個問題。

又見回答這個問題的一個例子： How does Access-Control-Allow-Origin header work?