從 0 開始入門 Chrome Ext 安全（番外篇） -- ZoomEye Tools

做者：LoRexxar@知道創宇404實驗室
時間：2020年01月17日
英文版本: https://paper.seebug.org/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以前，首先咱們須要思考咱們須要什麼樣的功能。

這裏咱們須要須要實現的是兩個大功能，

一、首先須要完成一個簡易版本的ZoomEye界面，用於顯示當前域對應ip的搜索結果。
二、咱們會完成一些ZoomEye的輔助小功能，好比說一鍵複製搜索結果的左右ip等...

這裏咱們分別研究這兩個功能所須要的部分：

ZoomEye minitools

關於ZoomEye的一些輔助小功能，這裏咱們首先拿一個需求來舉例子，咱們須要一個可以複製ZoomEye頁面內全部ip的功能，能便於方便的寫腳本或者複製出來使用。

在開始以前，咱們首先得明確chrome插件中不一樣層級之間的權限體系和通訊方式：

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

從0開始入門Chrome Ext安全（一） -- 瞭解一個Chrome Ext
咱們須要完成的這個功能，能夠簡單量化爲下面的流程：

用戶點擊瀏覽器插件的功能
-->
瀏覽器插件讀取當前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系的全部瀏覽器均可以直接下載

https://chrome.google.com/webstore/detail/zoomeye-tools/bdoaeiibkccgkbjbmmmoemghacnkbklj
初次安裝完成時應該爲

使用方法

因爲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插件下載連接：

Zoomeye Tools下載連接：https://paper.seebug.org/1115/