作者：LoRexxar@知道創宇404實驗室 
時間：2020年01月17日

原文：

系列文章： 
1.《  
2.

在經歷了兩次對Chrome Ext安全的深入研究之後，這期我們先把Chrome外掛安全的問題放下來，這期我們講一個關於Chrome Ext的番外篇 -- Zoomeye Tools.

連結為：

這篇文章讓我們換一個角度，從開發一個外掛開始，如何去審視chrome不同層級之間的問題。

這裡我們主要的目的是完成一個ZoomEye的輔助外掛。

核心與功能設計

在ZoomEye Tools中，我們主要加入了一下針對ZoomEye的輔助性功能，在設計ZoomEye Tools之前，首先我們需要思考我們需要什麼樣的功能。

這裡我們需要需要實現的是兩個大功能，

1、首先需要完成一個簡易版本的ZoomEye介面，用於顯示當前域對應ip的搜尋結果。 
2、我們會完成一些ZoomEye的輔助小功能，比如說一鍵複製搜尋結果的左右ip等...

這裡我們分別研究這兩個功能所需要的部分：

ZoomEye minitools

關於ZoomEye的一些輔助小功能，這裡我們首先拿一個需求來舉例子，我們需要一個能夠複製ZoomEye頁面內所有ip的功能，能便於方便的寫指令碼或者複製出來使用。

在開始之前，我們首先得明確chrome外掛中不同層級之間的許可權體系和通訊方式：

在第一篇文章中我曾著重講過這部分內容。

我們需要完成的這個功能，可以簡單量化為下面的流程：

使用者點選瀏覽器外掛的功能
-->
瀏覽器外掛讀取當前Zoomeye頁面的內容
-->
解析其中內容並提取其中的內容並按照格式寫入剪下板中

當然這是人類的思維，結合chrome外掛的許可權體系和通訊方式，我們需要把每一部分拆解為相應的解決方案。

• 使用者點選瀏覽器外掛的功能

當使用者點選瀏覽器外掛的圖示時，將會展示popup.html中的功能，並執行頁面中相應加的js程式碼。

• 瀏覽器外掛讀取當前ZoomEye頁面的內容

由於popup script沒有許可權讀取頁面內容，所以這裡我們必須透過 chrome.tabs.sendMessage來溝通content script，透過content script來讀取頁面內容。

• 解析其中內容並提取其中的內容並按照格式寫入剪下板中

在content script讀取到頁面內容之後，需要透過 sendResponse反饋資料。

當popup收到資料之後，我們需要透過特殊的技巧把資料寫入剪下板

 function copytext(text){
    var w = document.createElement('textarea');
    w.value = text;
    document.body.appendChild(w);
    w.select();
    document.execCommand('Copy');
    w.style.display = 'none';
    return;
}

這裡我們是透過新建了textarea標籤並選中其內容，然後觸發copy指令來完成。

整體流程大致如下

ZoomEye preview

與minitools的功能不同，要完成ZoomEye preview首先我們遇到的第一個問題是ZoomEye本身的鑑權體系。

在ZoomEye的設計中，大部分的搜尋結果都需要登入之後使用，而且其相應的多種請求api都是透過jwt來做驗證。

而這個jwt token會在登陸期間內儲存在瀏覽器的local storage中。

我們可以簡單的把架構畫成這個樣子

在繼續設計程式碼邏輯之前，我們首先必須確定邏輯流程，我們仍然把流程量化為下面的步驟：

使用者點選ZoomEye tools外掛
-->
外掛檢查資料之後確認未登入，返回需要登入
-->
使用者點選按鈕跳轉登入介面登入
-->
外掛獲取憑證之後儲存
-->
使用者開啟網站之後點選外掛
-->
外掛透過憑據以及請求的host來獲取ZoomEye資料
-->
將部分資料反饋到頁面中

緊接著我們配合chrome外掛體系的邏輯，把前面步驟轉化為程式邏輯流程。

• 使用者點選ZoomEye tools外掛

外掛將會載入popup.html頁面並執行相應的js程式碼。

• 外掛檢查資料之後確認未登入，返回需要登入

外掛將獲取儲存在 chrome.storage的Zoomeye token，然後請求 ZoomEye.org/user判斷登入憑據是否有效。如果無效，則會在popup.html顯示need login。並隱藏其他的div視窗。

• 使用者點選按鈕跳轉登入介面登入

當使用者點選按鈕之後，瀏覽器會直接開啟  %3A%2F%2F%2Flogin

如果瀏覽器當前在登入狀態時，則會跳轉回ZoomEye並將相應的資料寫到localStorage裡。

• 外掛獲取憑證之後儲存

由於前後端的操作分離，所有bg script需要一個明顯的標誌來提示需要獲取瀏覽器前端的登入憑證，我把這個標識為定為了 當tab變化時，域屬於ZoomEye.org且未登入時，這時候bg script會使用 chrome.tabs.executeScript來使前端完成獲取localStorage並儲存進chrome.storage.

這樣一來，外掛就拿到了最關鍵的jwt token

• 使用者開啟網站之後點選外掛

在完成了登入問題之後，使用者就可以正常使用preview功能了。

當使用者開啟網站之後，為了減少資料載入的等待時間，bg script會直接開始獲取資料。

• 外掛透過憑據以及請求的host來獲取ZoomEye資料

後端bg script 透過判斷tab狀態變化，來啟發獲取資料的事件，外掛會透過前面獲得的賬號憑據來請求

https:///searchDetail?type=host&title= 並解析json，來獲取相應的ip資料。

• 將部分資料反饋到頁面中

當使用者點選外掛時，popup script會檢查當前tab的url和後端全域性變數中的資料是否一致，然後透過

bg = chrome.extension.getBackgroundPage();

來獲取到bg的全域性變數。然後將資料寫入頁面中。

整個流程的架構如下：

完成外掛

在完成架構設計之後，我們只要遵守好外掛不同層級之間的各種許可權體系，就可以完成基礎的設計，配合我們的功能，我們生成的manifest.json如下

{
    "name": "Zoomeye Tools",
    "version": "0.1.0",
    "manifest_version": 2,
    "description": "Zoomeye Tools provides a variety of functions to assist the use of Zoomeye, including a proview host and many other functions",
    "icons": {
        "16": "img/16_16.png",
        "48": "img/48_48.png",
        "128": "img/128_128.png"
    },
    "background": {
        "scripts": ["/js/jquery-3.4.1.js", "js/background.js"]
    },
    "content_scripts": [
        {
            "matches": ["*://*.zoomeye.org/*"],
            "js": ["js/contentScript.js"],
            "run_at": "document_end"
        }
     ],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';",
    "browser_action": {
        "default_icon": {
            "19": "img/19_19.png",
            "38": "img/38_38.png"
        },
        "default_title": "Zoomeye Tools",
        "default_popup": "html/popup.html"
    },
    "permissions": [
        "clipboardWrite",
        "tabs",
        "storage",
        "activeTab",
        "
        "https://*.zoomeye.org/"
    ]
}

上傳外掛到chrome store

在chrome的某一個版本之後，chrome就不再允許自簽名的外掛安裝了，如果想要在chrome上安裝，那就必須花費5美金註冊為chrome外掛開發者。

並且對於chrome來說，他有一套自己的安全體系，如果你得外掛作用於多個域名下，那麼他會在稽核外掛之前加入額外的稽核，如果想要快速提交自己的外掛，那麼你就必須遵守chrome的規則。

你可以在chrome的開發者資訊中心完成這些。

Zoomeye Tools 使用全解

安裝

chromium系的所有瀏覽器都可以直接下載

初次安裝完成時應該為

使用方法

由於Zoomeye Tools提供了兩個功能，一個是Zoomeye輔助工具，一個是Zoomeye preview.

zoomeye 輔助工具

首先第一個功能是配合Zoomeye的，只會在Zoomeye域下生效，這個功能不需要登入zoomeye。

當我們開啟Zoomeye之後搜尋任意banner，等待頁面載入完成後，再點選右上角的外掛圖示，就能看到多出來的兩條選項。

如果我們選擇copy all ip with LF，那麼剪下板就是

23.225.23.22:8883
23.225.23.19:8883
23.225.23.20:8883
149.11.28.76:10443
149.56.86.123:10443
149.56.86.125:10443
149.233.171.202:10443
149.11.28.75:10443
149.202.168.81:10443
149.56.86.116:10443
149.129.113.51:10443
149.129.104.246:10443
149.11.28.74:10443
149.210.159.238:10443
149.56.86.113:10443
149.56.86.114:10443
149.56.86.122:10443
149.100.174.228:10443
149.62.147.11:10443
149.11.130.74:10443

如果我們選擇copy all url with port

'23.225.23.22:8883','23.225.23.19:8883','23.225.23.20:8883','149.11.28.76:10443','149.56.86.123:10443','149.56.86.125:10443','149.233.171.202:10443','149.11.28.75:10443','149.202.168.81:10443','149.56.86.116:10443','149.129.113.51:10443','149.129.104.246:10443','149.11.28.74:10443','149.210.159.238:10443','149.56.86.113:10443','149.56.86.114:10443','149.56.86.122:10443','149.100.174.228:10443','149.62.147.11:10443','149.11.130.74:10443'

Zoomeye Preview

第二個功能是一個簡易版本的Zoomeye，這個功能需要登入Zoomeye。

在任意域我們點選右上角的Login Zoomeye，如果你之前登陸過Zoomeye那麼會直接自動登入，如果沒有登入，則需要在telnet404頁面登入。登入完成後等待一會兒就可以載入完成。

在訪問網頁時，點選右上角的外掛圖示，我們就能看到相關ip的資訊以及開放埠

寫在最後

最後我們上傳chrome開發者中心之後只要等待稽核透過就可以釋出出去了。

最終chrome外掛下載連結：

· 如需轉載請註明來源