由Charles抓包想到前端代理

Charles抓Https包

Charles 破解工具 https://github.com/8enet/Charles-Crack

Charles无法抓HTTPS包问题:

1. 安装HTTPS证书

   
   
   

   image.png

2. 将证书设置为始终信任

   
   
   

   image.png

3. 信任所有的URL链接

   
   
   

   image.png

4. 默认会抓系统包

   
   
   

   image.png
   
   

   5.可以通过switchyOmega来切换代理

   
   
   

   image.png

代理原理

普通代理

image.png

var url = require('url');


function request(cReq, cRes) {
    var u = url.parse(cReq.url);

    var options = {
        hostname : u.hostname, 
        port     : u.port || 80,
        path     : u.path,       
        method     : cReq.method,
        headers     : cReq.headers
    };

    var pReq = http.request(options, function(pRes) {
        cRes.writeHead(pRes.statusCode, pRes.headers);
        pRes.pipe(cRes);
    }).on('error', function(e) {
        cRes.end();
    });

    cReq.pipe(pReq);
}
http.createServer()
.on('request',request)
.listen(8888, '0.0.0.0')

这里需要注意一点,上面无法代理 HTTPS请求

隧道代理

HTTP 客户端通过 CONNECT 方法请求隧道代理创建一条到达任意目的服务器和端口的 TCP 连接，并对客户端和服务器之间的后继数据进行盲转发。

image.png

function connect(cReq, cSock) {
    var u = url.parse('http://' + cReq.url);

    var pSock = net.connect(u.port, u.hostname, () => {
        cSock.write('HTTP/1.1 200 Connection Established\r\n\r\n');
        pSock.pipe(cSock);
    }).on('error', e => {
        cSock.end();
    })
    cSock.pipe(pSock);
}

http.createServer()
.on('connect', connect)
.listen(8888, '0.0.0.0')

由于CONNECT 方法只能对HTTPS进行代码，所以上面方法无法代码HTTP请求

前端开发代理到CONNECT 代理的服务器上

假设我们的代理模型如下:

image.png

由于nginx不支持CONNECT协议,无法通过Nginx转发到代理服务器。
这里我们可以使用Socat再加上一层代理。

socat.png

这样就解决了我们 前端开发请求分发到代理服务器的问题。

参考:
https://imququ.com/post/web-proxy.html
https://stackoverflow.com/questions/11697943/when-should-one-use-connect-and-get-http-methods-at-http-proxy-server