如何將本地存儲身份驗證令牌從我的網站共享到我的WebExtension？

Question

我有一個書籤Firefox /鉻WebExtension（使用標準popup,content和background腳本）。我的api服務器有一個/ login路由，它返回一個JSON Web Token，並且該Web應用程序將其存儲在本地存儲中。我完全可以控制擴展，api和網絡應用程序。

這樣做的赤腳方法是讓用戶通過彈出窗口登錄並將身份驗證令牌保存在background.js中以保存到WebExtension的本地存儲中。但我真的只想要求用戶在我的網站上進行身份驗證，並且同樣的身份驗證也適用於該擴展。

有沒有辦法共享認證令牌？我看到Pocket和許多其他人這樣做，但我不知道如何。

Answer 1

您可以將令牌存儲爲cookie。 Cookie的工作方式類似於localStorage，但額外的是，默認情況下，Cookie也會包裝到服務器的每個HTTP請求中。訣竅來了。 Chrome擴展程序可以訪問HTTP請求，並使用webRequest API。因此它可以查看請求頭並知道你的cookies。將該Web令牌作爲Cookie使其可用於擴展。

但仍然需要等待用戶打開您的網站才能讓HTTP請求流動並準備好被偷窺，對嗎？不是真的。您可以直接從擴展中發出ajax請求。

下面就來說明整個事情將如何工作：

清單：

"permissions": [ 
      "webRequest", 
      "webRequestBlocking", 
      "*://*.my_site.com/*" 
     ] 

背景頁：

function callback (details) { 
    // 
    token = func_extract_token_from_headers(details.requestHeaders); 

    chrome.webRequest.onBeforeSendHeaders.removeListener(callback); 

    return {cancel: false} //  set to true to prevent the request 
          // from reaching the server 
} 
chrome.webRequest.onBeforeSendHeaders.addListener (callback, 
     {urls: ["http://www.my_site.com/*", "https://www.my_site.com/*"]}, 
     ["blocking", "requestHeaders"]); 


var xurl = "https://www.my_site.com/"; 
var xhr = new XMLHttpRequest(); 
xhr.open("GET", xurl, true); 
xhr.send(); 

我應該指出，有一個更清潔的方式做到這一點，但由於CSP - 內容安全策略，它目前無法使用。正如wOxxOm在評論中提到的那樣，在後臺頁面內的iframe中打開網站應該可以正常工作，並將CSP列入白名單。這種方法也可以避免提示用戶輸入憑據，並且會更乾淨。不幸的是它的not currently working

編輯：

對不起，我錯了我的最後一個要求：在打開外部頁面的I幀被阻擋在後臺頁面。要將其顯示在後臺頁面（或針對該事件的彈出窗口）中，只需將CSP列入白名單，如下所示。

除了在iframe中打開頁面的業務之外，您還需要與之通信。

清單：

// Whitelist your website 
    "content_security_policy": "script-src 'self' https://my_site.com/; object-src 'self'" 
// Have the background declared as html 
    "background": { "page": "background.html"} 

背景：

window.addEventListener("message", receiveMessage, false); 

function receiveMessage(event) 
{ 
    if(event.origin == "https://my_site.com"); // you may want to check the 
              // origin to be your site 
    chrome.storage.storage.local.set({'auth_token': event.data}); // the token 
} 

iframe = document.createElement('iframe'); 
iframe.src = "https://my_site.com/"; 
// Have a div ready to place iframe in 
document.getElementById('div').appendChild(iframe); 

iframe.contentWindow.postMessage("give_token", "https://my_site.com") 

的應該在使用本window.postMessage API

下面就來舉例說明這一切是如何應該團結起來做網頁：

window.addEventListener("message", receiveMessage, false); 

function receiveMessage(event) 
{ 
    if(event.origin == "your_extension_id_aeiou12345"); 
    event.source.postMessage(''+localStorage.auth_token, event.origin); 
} 

編輯：

此外，爲了具有在iframe網站顯示，確保X-frame-options響應頭沒有被設置爲一個阻塞值。您可以將其刪除，也可以將其設置爲非阻止值，或者將該擴展程序的網址白名單。