内容简介:在经历了两次对Chrome Ext安全的深入研究之后,这期我们先把Chrome插件安全的问题放下来,这期我们讲一个关于Chrome Ext的番外篇 -- Zoomeye Tools.链接为:这篇文章让我们换一个角度,从开发一个插件开始,如何去审视chrome不同层级之间的问题。
系列文章:
在经历了两次对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中。
我们可以简单的把架构画成这个样子
在继续设计代码逻辑之前,我们首先必须确定逻辑流程,我们仍然把流程量化为下面的步骤:
用户点击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的开发者信息中心完成这些。
写在最后
最后我们上传chrome开发者中心之后只要等待审核通过就可以发布出去了。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- GO 从入门开始放弃
- 入门区块链,从发币开始
- 开始再战 Python - 重新入门 - 工具篇
- 入门编程,一定要从C语言开始吗?
- 入门教程 | 从安装部署开始学习 Elasticsearch
- Mybatis从入门到精通——从JDBC编程开始
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Growth Hack 這樣做
Xdite / PCuSER電腦人文化 / 2016-5-7 / 300.00台幣
◎具體教你在預算有限的情況之下,把成長做出來的可行與必要方法! ◎帶動台灣成長駭客話題的專業講師,親授讓產品突破80分的成長秘笈 @這本書要給誰看? 1. 創業者、個人品牌經營者,想要提高自己服務轉換率的人。 2. 空有產品,但是賣不出去,花了錢投廣告卻效果低落的人。 @這本書有什麼不一樣? 1.全球最重要的趨勢,台灣最知名的 Growth Hack 講師 Xd......一起来看看 《Growth Hack 這樣做》 这本书的介绍吧!