動手打造跨設備、無需同步的密碼管理器

*本文原創作者：mscb，本文屬FreeBuf原創獎勵計劃，未經許可禁止轉載

密碼管理器大家都有用過吧？但你相信有一種密碼管理器不僅可以跨設備使用，還無需同步！無論你相不相信，今天就讓我來教你如何自己動手製作一個。

密碼管理器，實在太多。簡直能讓人挑花眼。有各種各樣類型的，但主要是有2種：網路同步的、存在自己本地資料庫的。

從理論上講，存在本地的會比自己存在網路上的會相對安全一點。因為最近經常能聽到某些網路型密碼管理器被爆出漏洞什麼的，雖然說你保存的密碼是加密保存在伺服器上的，但還是有點安全隱患。

相對於網路型密碼管理器，本地型密碼管理器確實會安全一點（取決與你的安全意識）。不過，與此同時，也帶來一些缺點。比如沒有網路型的方便，需自己對保存密碼的資料庫進行同步等等。

原理說明

跨平台？離線？不同步？

如果要實現這3個要求，我們需要重新審視一下自己對應密碼管理器的需求。首先，我們使用密碼管理器的目的不僅僅是為了保存密碼，還為了安全。

保證每個網站註冊的密碼都不同，而且是隨機的，不存在與本人有掛鉤的信息，比如手機號、生日、幸運數字等等，防止他人根據你的個人信息生成字典跑包。

既然要保證密碼中沒有個人信息，而且需要無序，隨機數顯然是最好的選擇。但如果使用隨機數就無法實現每個平台都相同。

所以必須使用一個統一的演算法，這樣各個設備使用同一套演算法就能保證生成的密碼都是相同的。

最終，想到如下演算法，來實現密碼同步：

用戶需指定一個通用密碼

需要指定一個網站的域名（不包含具體文件地址）

使用Hash演算法生成密碼。

這樣，我們就能保證各個網站的密碼都不一樣，而且還不需要同步！

開始動手

密碼管理器最終還是為瀏覽器服務的，不如我們直接將它做成Chrome瀏覽器擴展，這樣使用方便，還能跨平台。

chrome擴展開發

開發一個chrome擴展其實很簡單，只需要一點js的知識就行了，接下來讓我們一起來看看如何開發！

要開發，首先需要開發者文檔，這是Google官方的文檔地址，請自備梯子。如果需要中文文檔的話可以自己找翻譯版本的~

第一，在本地新建一個文件夾，這裡取名為「ImPassword」

第二，新建一個名稱為manifest.json 的文件，這是用於保存整個擴展的描述信息。

{
"manifest_version": 2,

第三，我們再來分析一下。我們這個擴展的需求。

1.擴展要能提取到瀏覽器地址欄的網址。

2.能儲存必要的信息到本地中。

3.對所有的網站都必須要有讀取的許可權。

第四，根據需求，我們查查開發者文檔，需要加入一些許可權，比如："permissions": ["tabs","storage",""]

第五，把最終的manifest.json 文件寫出來！

{
"name": "密碼管理器",
"manifest_version":2,
"version": "1.0",
"description": "密碼管理器Chrome擴展",

這裡簡單的對上面的信息解析說明。permissions表示你需要申請的許可權。options_page表示「選項」界面和html網頁，也就是說，有了這個欄位則當擴展安裝到瀏覽器後，能實現 右鍵->選項 操作。

background里的內容我這裡是添加一個空js文件，因為如果沒有該參數，每次點開擴展的時候滑鼠會一直轉轉轉，強迫症患者表示無法接受。

第六，根據信息，建立相關的文件。

書寫代碼

從用戶的角度看，用戶點擊一下我們的擴展圖標會彈出一個小小的框框，而這個框實際上就是我們上面配置的popup.html。使用這個html文件里的內容就是用戶能看到的東西，可以稱它為顯示界面。

options 代碼

對於options.html內的內容則是當用戶右鍵->選項時顯示的內容。我們現在的目的就是，通過選項界面需要用戶配置一個獨立密鑰，並保存。

而當用戶點擊擴展圖標的時候，擴展會自動獲取網站的域名，並與設置的密鑰進行Hash操作，產生一個重複率比較低的網站密碼。

首先，打開popup.html文件，寫入以下內容

這裡的代碼實在太簡單了，相信大家都能看懂。id為status的標籤主要用來顯示網站的密碼，下面引用了2個JS文件，一個是我們等一下要寫的popup.js文件，還有一個是用於哈希的庫。

由於考慮到很多網站的密碼位數不能大於20位，大部分的hash函數都無法用，這裡只能用一個16 BIT MD5的hash演算法。

現在，先來寫一下選項界面的代碼。

打開options.html,寫入以下內容。

其實也就是一個簡單的html，一個文本框一個按鈕而且。接下來打開options.js，開始真正寫代碼了。

document.body.onload = function() {
chrome.storage.sync.get("data", function(items) { if (items.data == undefined){ return;
} if (!chrome.runtime.error) { console.log(items); document.getElementById("text").value = items.data;
}
});
}document.getElementById("set").onclick = function() { var d = document.getElementById("text").value;
chrome.storage.sync.set({ "data" : d }, function() { if (chrome.runtime.error) { console.log("Runtime error.");
}
}); window.close();}

下面來和分析一下，上面代碼的具體意思。代碼由2個塊組成，這2個塊實際上都是事件。第一個為載入事件（即當你打開選項界面的時候會觸發的內容），第二個為ID為set的按鈕的點擊事件。

chrome.storage.sync.get是chrome的一個api，用於獲取儲存的內容。這裡的判斷邏輯是，如果獲取有獲取到內容（即說明之前有保存過密碼），則顯示原先的密碼。如果沒有獲取到，就不顯示。

chrome.storage.sync.set就很好理解了，當然是把密碼保存起來起來。

popup 代碼

既然選項界面的代碼寫好了，接下來看看popup.js里的內容，這個是這個擴展的主要邏輯部分。但也不要擔心，這個擴展只是做了一點微小的工作，不會很難~

點擊閱讀原文查看popup.js的全部代碼，等一下我們再來分析具體的原理。開頭定義了2個全局變數，一個是接收器數組，一個是儲存函數指針的變數。

由於Chrome是以回調的方式返回具體的url的，這樣會給我們處理帶來很大不便。所以receiver是我自己定義的一個接收器，用於處理傳入的信號，並將信號數據保存到接收器數組裡。

接收器數組就像一個容器，接受到的數據只要不超過數組下標，均保存起來。接收器會對傳入的信號進行處理，如果沒出現Run標誌，則把數據保存到數組中，如果出現指定標誌，則通過函數指針執行指定函數，同時帶上接收器數組的內容。

介紹完接收器的具體實現方式，我們再來看看，這個代碼的具體邏輯。

由於我們需要得到tab的URL地址，並對其進行分解。所以要使用Chrome的一個api去實現（前面我們已經申請了許可權）。

chrome.tabs.query({"active": true, "windowId": chrome.windows.WINDOW_ID_CURRENT},function(tabs){})

現在只需要在function(tabs){}內寫入需要執行的操作即可！而該匿名函數內的處理的是，對tabs得到的url地址進行分解，得到一個域名地址，並保存到urllink中。

接著從chrome.storage取到之前保存的密鑰，如果沒有則顯示「未配置密鑰」。然後就是把密碼、地址、run函數指針，通通發送給receiver.

receiver判斷傳入的標籤，如果是RUN則將函數指針保存到callFun變數中，如果是其他的則保存到receiver_data數組裡。

run函數主要是處理由receiver傳的參數，並對參數解析。最終進行Hash計算並輸出到ID為status的標籤中。

總結

雖然說，這裡使用的密碼是用md5 16bit 計算出來的，但也確實是無奈之舉，同時也不算太安全。但相對與N個網站用同一個密碼來說，這套不需要同步的且N個網站對應N個密碼的方案，確實能有效的提高安全性。

不過，這套方案真的有那麼完美嗎？顯然不是。舉個例子，你無法很高效更改某個網站的密碼。

假設有一天你註冊過的某個網站被脫褲，你的密碼被爆出來了，雖然不會影響其他網站賬號，但你在該網站的密碼肯定要修改吧？

但你沒有一個很有效的方案修改密碼，因為該密碼是根據你的初始密鑰計算出來的，如果要修改就要修改初始密鑰，那就得修改所有網站的密碼……

沒辦法，一個方案有它好的方面，必然有它不好的方面。所以我本人的解決方案是，用2種密碼管理器，一種是本地型的，一種是本篇文章寫的。

我對於一些很重要的網站，比如支付寶、百度、Google、Youtube、Twitter、Freebuf、Github…這些網站均保存到本地密碼管理器中，而在網路中其他亂七八糟的網站、或者是各種只有註冊才能看的網站，都用本篇文章的密碼管理器生成密碼。

對於重點網站重點保護，對於不重要的網站用普通的方式保存（但安全性也蠻高的）。

根據開發者文檔的描述，用chrome.storage保存密碼的方式貌似並不安全，歡迎大家提供更好的方式給我~

最後，我把該擴展的所有代碼，打包上傳到Github上了，歡迎大家提交issues和pull request哦！

NoSync-PasswordManager : https://github.com/mscb402/NoSync-PasswordManager

*本文原創作者：mscb，本文屬FreeBuf原創獎勵計劃，未經許可禁止轉載