作者：LoRexxar@知道創宇404實驗室
時間：2020年01月17日
英文版本: http://www.bjnorthway.com/1116/
系列文章：
1.《從 0 開始入門 Chrome Ext 安全（一） -- 了解一個 Chrome Ext》
2.《從 0 開始入門 Chrome Ext 安全（二） -- 安全的 Chrome Ext》

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

鏈接為：https://chrome.google.com/webstore/detail/zoomeyetools/bdoaeiibkccgkbjbmmmoemghacnkbklj

這篇文章讓我們換一個角度，從開發一個插件開始，如何去審視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窗口。

  • 用戶點擊按鈕跳轉登錄界面登錄

當用戶點擊按鈕之后，瀏覽器會直接打開 https://sso.telnet404.com/cas/login?service=https%3A%2F%2Fwww.zoomeye.org%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://www.zoomeye.org/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://api.zoomeye.org/",
        "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插件下載鏈接：

Paper 本文由 Seebug Paper 發布，如需轉載請注明來源。本文地址：http://www.bjnorthway.com/1115/