从 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/