原理解答
在开始介绍原理之前,我们首先要了解一下网页访问过程中的工作原理,那么先说下浏览器,浏览器就是我们平时用来浏览网页的时候打开的
窗口,关于内核,我们首先了解一下内核是什么? 很简答, 我们通俗一点理解,它就好比我们让几个翻译把一篇中文翻译成英文一样,但因为这几个翻译
的专业程度导致翻译的记过会有差异,这其实就像国内大多数做浏览器的公司,如 360 , 腾讯这些公司,他们内核起初都是通过IE改进而来。
不可否认,IE让我们看到了互联网的世界是什么样子, 但因为技术的更新,IE对很多新的技术支持不是太好,导致它非常的糟糕。所以很多我们
目前都会使用如,Chrome,Firefox,Safari,国内浏览器是换皮不换囊,用浏览器还是要用这三种。好了大概浏览器我们说到这里。下面我们通过一张图来
了解一下访问网页的工作流程。"
"我们深度来理解一下浏览网页的时候背后都干了什么, 首先,我们要有一个网址,浏览器首先找到本地网络,检测网络是否连通,然后本地路由器
将地址通过DNS解析成IP, 这是网络地址了,提交给远程的计算机,远程计算机必定会有WEB服务,然后通过WEB服务将你访问的文件返回给你,这里
如果有服务端语言的话,服务器会解析成浏览器能认识的HTML,浏览器只负责解析HTML,其他的都是远程来搞定的,接下来都是浏览器可解析的HTML了,
然后才是你看到的页面。我们来张图。
-
网络拓扑
黑色是访问过程中,红色是返回的。
"我们了解了网页访问的工作流程,接下来我们进入正题,我们访问三国杀www.sanguosha.com的时候,运营商的DNS负责将这个人性化的地址解析成网络地址,就是
我们所知道的IP,那么当访问这个文件的时候,我们怎么才能拦截下来,让这个地址的内容是我们可以支配的。这里我再介绍一个工具,就是基于http协议的抓包工具
关于挂包工具,一般透明网络我们都用支持http的就可以, TCP/UPD的我们需要用到另外的工具进行抓取,就比如三国杀出牌建房间这些操作,都是进行封包后给了服务器的
我们就算抓到了,也是一堆乱码,没什么意义,也可以解包。这样行为就有点过了我们不干。还是用一张图来说明。"
-
抓包预览
抓包工具有很多,我这个是用的花瓶,[Charles]
"通过抓包,假设已知三国杀某张图片的地址为:
http://web.sanguosha.com/220/assets/simplified/DianJiang/55.png
那么我们就用这个地址来实验,我们
怎么才能拦截这个地址,不让他去三国杀的服务器中读取,而是读取我们自己的图片呢。这里我们前面也说了,域名都是要经过解析的,这里在我们本地计算机中
有个hosts文件,关于hosts文件,这个文件在任何计算机中都存在,他可以让你指定一个域名应该去哪儿访问,那么我们先用这个办法试试。这里需要批评一下三国杀
这家公司了,现在全民https了,你还这么low,还在使用http。好言归正传,当我们打开这个地址的时候
浏览器会返回给我们一个图片,当然这个图片来源是三国杀服务器中。
-
源资源
这张图片是常用武将界面那个小图片
接下来,我们要修改我们的hosts文件,将web.sanguosha.com这个域名指向到我们本地服务,这里我们可能要了解一个web服务,有时候
常说web服务器,那么到底是个什么,因为你是基于http协议访问的,http协议端口默认是80,就相当于你对暗号一样,所以
我们访问的地址都是com结束了,其实还隐藏一个80.正常的应该是web.sanguosha.com:80,所以这个80到底是谁在开启着呢?我们先修改了
hosts看下会发生什么?。
-
修改hosts文件
关于hosts大家自行搜索一下baidu吧,这个很简单。
"我们会发现奇怪的事情发生了,图片找不到了,这是因为什么呢,看图可以看到,我们的hosts文件中,web.sanguosha.com地址被我们指向到
了127.0.0.1了, 那么这个127.0.0.1是哪儿呢? , 这个地址是我们本地的环回地址,就是你本机,本机默认IP就是这个。当你在浏览器中输入
这个IP后,计算机看到这个地址,不会在进行下面各种复杂的网络流传了,直接在你本机找对应的端口访问,前面我们说了,基于浏览器的都默认是
80端口,这个时候我们本机是没有开启80端口的,接下来我们开启一个80看看会发生什么事儿?我这里为了方便用一个请便的语言搞一个mini的http
服务。关于Nodejs这个语言,可以访问 [ https://nodejs.org/en/ ]有你想要的一切."
-
创建http服务
我们尽量使用最少的代码实现一个http服务.
-
访问预览
我们会发现,这个请求已经被我们拦截下来了。
"让我们总结一下, 第一步我们通过设置计算机的hosts做到了域名定向到某个ip的目的,访问到了我们自己的计算机。第二步,通过使用一个简单的编程语言nodejs在自己计算机上面开启了一个80端口,使我们的计算机有了web功能,
但是问题来 , 你把整个域名都定向到自己的计算机上面,那么三国杀其他的资源怎么办,因为整个域名都被你指向到了其他地方,所以接下来,我们要做的是,我们只拦截我们关心的地址,其他的都还给凉企。"
还是使用我们的那个刚刚那个代码,稍作修改。
//第一版本,只有web功能
const http = require('http')
let server = http.createServer( (request , response ) => {});
server.on('connection' , (err, socket )=>{});
server.on( 'request' , (request , response ) =>{
response.end( 'The request address is : ' + request.headers['host'] + request.url);
})
server.listen(80);
const http = require('http');
const child_process = require("child_process");
const mime = require('mime-types');
const fs = require("fs");
const url = require('url');
let ip = '59.49.42.252';
let server = http.createServer( (request , response ) => {});
server.on('connection' , (err, socket )=>{});
server.on( 'request' , (request , response ) =>{
// 这是一张我们个人常用武将里面的那个小图
let match = request.url.match(/^\/220\/assets\/simplified\/DianJiang\/55.png/);
if (match !== null) {
console.log(request.url , ' 本地读取 ')
//匹配到的就是我们要拦截的,读取我们自己的资源
let file = fs.readFileSync("55.png");
let contentType = mime.lookup(request.url);
response.writeHead(200, {'Content-Type': ''+contentType+'' });
response.write(new Buffer(file, 'binary'));
response.end();
} else {
//这里我们会将请求扔回去
console.log( request.url,' 远程读取 ' )
let arg = url.parse(request.url);
let curl = 'curl http://'+ip+'/'+ arg.pathname +' -H "X-Forwarded-For: 1.1.1.1" -H "Host: '+ request.headers['host'] +'"';
let child = child_process.exec(curl,{encoding: 'binary',timeout:0,maxBuffer: 20000 * 10240} ,function(err, stdout, stderr ){
let contentType = mime.lookup(arg.pathname);
if( contentType == false ){
//contentType = 'application/octet-stream';
}
response.writeHead(200, {'Content-Type': ''+contentType+'','Content-Length': Buffer.byteLength(new Buffer(stdout, 'binary'), 'binary') });
console.log( arg.pathname,contentType , Buffer.byteLength(new Buffer(stdout, 'binary'), 'binary') )
response.end(new Buffer(stdout, 'binary'));
})
}
})
server.listen(80);
当我们运行了第二个版本的代码,你会发现,55.png这张图片已经从我们本地读取了,下图我们将要开启我们的服务.
-
开启服务
这里是我们终端显示
-
服务运行中
你会发现,所有资源除了55.png这张图片,我们都不会拦截.
“知识点到这里就结束了,接下来的章节是安装使用,我们开始领略一下我们这个自己动手做的工具,到底有多么强大。”
From "The Funny Side of Sanguosha " by A. B. CUPDIR