1. Why do such a small plug-in
For data, we have been thinking about how to make data flow more securely and serve customers. Around this idea, we have done many expansions. We have implemented a scenario-based design for data slicing on the server side, implemented the interception and slicing of SQL based on the JDBC protocol, implemented a full-link database audit solution and implementation at the application layer, and implemented light and dark watermarks and document watermarks on the WEB side, etc. etc., but these are all transformations on the application server side; then, based on the above ideas on the server side, we have to do some things on the end side, analyze the internal services of the group, and use the WEB server side to provide convenient functions and data usage scenarios for customers and users. . Web services mostly rely on the existence of browsers for access, so we try to put the data security protection scheme on the browser, and do auxiliary data detection on the browser, so that we can find the data used in the research and development phase and testing phase. Security issues, such as a certain interface returns a plaintext mobile phone number, a certain page does not use identity information but the called interface returns, etc.
So we need to make a browsing plug-in to implement the data security protection capability on the end, it will not affect developers and testers...
2. Solutions and ideas
The first step explains why we want to make such a small tool, this chapter is how to solve the above problems and ideas.
1. Analysis of the proportion of browsers
The browsers in the market are chrome/firefox/safri...According to market data analysis, the current chrome browser accounts for 66.93%, basically dominating the browser market, and MicrosoftEdge browser ranks second. According to such a result, we give priority to starting from the chrome plug-in.
2. The extension of knowledge
Our team focuses on the research and development of the back-end, and the capabilities on the front-end side are relatively weak, especially in the browser plug-in and involves some underlying operating mechanisms. First of all, the official documents go to understand the development of chrome plug-ins, which clarifies what is currently supported by chrome. The plug-in versions are v2 and v3. The bad news is that v2 will be abandoned by the subsequent version in 2023, which means that v2 and v3 will be carried out at the same time, so I went to understand the difference between the versions. The two versions are online There have been relatively big changes in interception. The latter has become a form of rules, which is not very friendly to interception.
3. Idea and functional design
Pre-installing data security protection capabilities on the browser side means analyzing and implementing current functions. First, plug-in capabilities should not affect R&D and testing personnel, and second, it should be convenient to use. There are the following four ideas:
The first is WEB watermarking capability
Through the understanding of the plug-in mechanism, after the plug-in is installed, the dom structure of the effective site can be modified, and the watermark can be automatically added to the page.
Second thought is sensitive data
The sensitive data source of the application is divided into three parts: resources for page rendering, data requested by the interface, and data returned by the interface. The idea around this layer is finally defined to realize the interception of pages and requests.
The third idea is to listen to the event of the operation of the page
This comes from the fact that some sites will provide a large amount of data. Users can directly copy the data to other data when using it. This operation belongs to the user's personal behavior and is not in the form of a file. The user cannot be the first in the copying process. Whether the time perception is sensitive or not, there is no way to track and protect it in the first place.
The fourth.. is actually an additional extension
We are also currently working on projects related to data flow chains. During the progress of the project, we found that the link between the front-end routing and the back-end routing is missing. I think that the operating mechanism of the browser plug-in is that the routing of the front-end page can be obtained through the DOM object. , this way of thinking can fill in the lack of this data link relationship.
3. There are many pits on the way to the landing
1. Simple logic diagram
2. The pit of devtool
In the life cycle of the chrome plug-in, events such as request sending and returning can be monitored in the background. Generally, the events that can be obtained are as follows:
// web请求监听，最后一个参数表示阻塞式，需单独声明权限：webRequestBlocking
chrome.webRequest.onBeforeRequest.addListener(details => {
// cancel 表示取消本次请求
if(details.type == 'image' || details.type === 'medis') return {cancel: false};
}, {urls: ["<all_urls>"]});
//ajax生命周期开始
chrome.webRequest.onBeforeRequest.addListener(details => {
console.log('onBeforeRequest', details);
}, { urls: ["*://*.jd.com/**"] });
chrome.webRequest.onBeforeSendHeaders.addListener(details => {
console.log('onBeforeSendHeaders', details)
},
{ urls: ["*://*.jd.com/**"] },
['blocking', 'requestHeaders', 'extraHeaders']
);
// 可以拦截ajax
chrome.webRequest.onResponseStarted.addListener(details => {
console.log('onResponseStarted', details);
}, {urls: ["*://*.jd.com/**"]});
// 请求完成，但是取不到response结果
chrome.webRequest.onCompleted.addListener(details => {
console.log('onCompleted', details);
}, {urls: ["*://*.jd.com/**"]
This method cannot get the response content. The common solution on the Internet is to add the devtools_page module to the browser plug-in, and then add the request end event to the devtools page, as follows:
chrome.devtools.network.onRequestFinished.addListener(
function(request) {
//request 包含请求响应数据，如：url,响应内容等
//request.request.url 接口 的url
//request.getContent 接口返回的内容
}
);
But there is a problem with this method, that is, if you want to trigger the page content of devtools, you need to press F12 on the page to call out the console of the browser. This experience is very general, so the form of devtools is more like introducing a debug tool for developers of.
3、xhr/fetch
Because of the limitations of the above two methods, consider rewriting xhr, and then perform injection replacement when the page is loaded. The method of rewriting xhr is as follows:
(function () {
var open = XMLHttpRequest.prototype.open;
var send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function (body) {
this["hookQuery"] = body;
send.apply(this, arguments);
};
XMLHttpRequest.prototype.open = function () {
this.addEventListener("load", function () {
if (this.responseType === "" || this.responseType === "text") {
window.dispatchEvent(
new CustomEvent("pageScript", {
...
})
);
}
});
open.apply(this, arguments);
};
})()
It mainly rewrites the original send method and open method. When sending, record the requested parameters into an attribute of the xhr entity, and then after the request is triggered and returned (load event), the requested parameters and the returned content of the response, The event is sent out through the event, and the event will be monitored and processed in content_scripts. The content_scripts part of the code is as follows:
// 加载重写的xhr所在js文件，然后注入到当前页面的document中，这样业务的页面会加载这段js
var hook = document.createElement("script");
hook.src = chrome.runtime.getURL("script/hook.js");
hook.onload = function () {
this.remove();
};
(document.head || document.documentElement).appendChild(hook);
// 监听xhr发送过来的消息
window.addEventListener(
"pageScript",
function (event) {
// 处理逻辑
},
false
);
5. Effect demonstration
6. To be continued
The first version of the function focuses on sensitive data protection, and other protection and perception capabilities for data security will be added in the future to assist businesses in solving data security risks from the end.
Author: Hao Shuaiwei, CCO System
Source: JD Cloud Developer Community