从 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之前，首先我们需要思考我们需要什么样的功能。

这里我们需要需要实现的是两个大功能，

1、首先需要完成一个简易版本的ZoomEye界面，用于显示当前域对应ip的搜索结果。
2、我们会完成一些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中。