最近想抽奖送书，可以关注公众号等后续抽奖通知，今天（1月12日）晚上9点，群内送50元红包，欢迎大家进群交流（群二维码在文末，关注公众号加我个人微信，也可以进群）。现在让我们进入正文。什么是抓包和代理抓包：当我们需要知道一个HTTP请求发送和返回的信息时，就需要用到抓包工具。Chrome在电脑上自带网络调试工具。如果是在移动设备上，则需要专门的抓包工具来抓取移动端的流量，了解网络请求发送了哪些数据，返回了哪些数据；proxy：当我们在本地调试在线网站的代码时，由于本地域名localhost没有在线域名的cookie，所以无法进行认证。这时候就需要使用代理工具，让浏览器认为浏览器访问的是在线地址，从而可以使用在线cookies来调试native代码。代理工具的作用是将对地址栏url的请求替换为指定的url，但浏览器本身并不知道。这里我们说的是web开发过程中的代理。此外，还有其他形式的代理，暂不介绍。whistle简介今天给大家介绍whistle，一款开源免费的抓包代理神器，配置非常简单。与其竞品Charles、Fiddler、wireshark相比，具有以下优势：开源，不易包含恶意代码；免费（查尔斯收费）；所有平台都可以使用（基于nodeJS）（Fiddler很难在linux上使用）；配置代理非常简单；Github:https://github.com/avwo/whistle官网https://wproxy.org/whistle/下面是whistle的功能图：快速入门和首先安装whistle:$npminstall-gwhistle安装成功然后您可以使用w2start、wproxystart、whistlestart之一来启动whsitle。启动后显示如下信息：启动完成后whistle会在后台运行，ctrl+c无法关闭。关闭和重启的操作如下：#stop$w2stop#restart$w2restart配置代理：主推是在浏览器中安装SwitchyOmega，用过的人都知道它的强大。Chrome和FF插件商店都可以找到，如果找不到可以到https://github.com/FelisCatus/SwitchyOmega下载。以Chrome为例，安装完成后，插件栏会出现一个圆圈图标，点击圆圈，然后点击选项进行配置。按照这张图配置。要开始使用whistle来抓包，首先要在SwitchyOmega中选择我们刚刚创建的场景模式，我这里设置的叫proxy。然后进入一个页面，以http://tools.jb51.net/为例（非HTTPS网站）。进入页面后，可以在whistle左侧的网络选项中看到一个请求列表：使用whistle代理本地服务器whistle代理匹配规则：https://wproxy.org/whistle/pattern.html引入web连接在文章开头Agent，我们来模拟一下真实情况。以下是笑话：A公司有一个在线网站http://lxfriday.com，还有一个专门做预发布的网站http://test-lxfriday.com（测试环境）。新人小刘来到A公司，老板给他提了一个要求，“小刘，客户这几天反馈说个人中心页面xx的字体太小了，请把字体换大一点尺寸！！！”.小刘拉取最新代码，执行yarnstart开始运行。然后小刘在浏览器访问localhost:3000，发现页面报了很多错误！！！打开控制台看到向后端发送请求时的url地址都是以http://test-lxfriday.com/api开头的，请求被浏览器判断为跨域。小刘心急如焚，心想：怎么办啊，服务器哥们没有开启CORS跨域，我用localhost根本无法正常显示页面！！！在上面的场景中，小刘遇到了浏览器跨域问题，服务器没有开启CORS，导致localhost:3000和http://test-lxfriday.com无法直接通信。在这种情况下，您可以使用代理工具作为代理。配置whistle代理规则：#该规则会阻止test-lxfriday.com/api被代理，服务器仍然请求在线测试环境test-lxfriday.com/apitest-lxfriday.com/api#代理test-lxfriday。comtolocalhost:3000test-lxfriday.comlocalhost:3000SwitchyOmega切换到whistle对应的配置（我的是proxy），然后访问test-lxfriday.com就会正常显示。我的测试代码：consthttp=require('http')constserver=http.createServer((req,res)=>{console.log('req.url',req.url)res.writeHead(200,{//'content-type':'application/json',//'access-control-allow-origin':'*',//'access-control-allow-headers':'name'//'access-control-allow-method':'get,post,put,option,delete'})res.end(JSON.stringify({name:'lxfriday',age:1111}))})server.listen(3000)console.log('listenning')页面效果：使用whistle做手机代理需要手机和电脑在同一个内网下（大多数情况下是同一个wifi下，大公司的内网）公司互通，这个内网地址也可以）。以小米手机为例，点击已连接的wifi，向下滑动，有一个【代理】选项，设置为【手动】然后设置host为电脑内网ip地址，端口为【8899】，点击右上角保存，即Butproxywassuccessful.小米手机代理设置：代理完成后，访问页面：whistle抓取HTTPS请求。在没有配置HTTPS根证书的情况下，使用上一章配置的方法访问掘金，查看抓取的数据，发现都是Tunnelto。要开始捕获HTTPS，您需要先检查CaptureTUNNELCONNECTs，然后安装并信任根证书。根证书在弹窗上，点击下载即可。下面以Windows10为例，说明安装和信任根证书的过程：双击下载的根证书，点击【安装证书】，选择【本地计算机】，下一步，选择【将所有证书放入followingstorage]，选择然后完成下一步。这时电脑再次访问掘金网站，可以看到HTTPS请求的内容：抓取手机的HTTPS请求抓取手机的HTTPS请求是最难配置的一步，爬不同手机效果可能不一致。下面介绍的步骤在小米手机上测试后，页面图片无法正常加载。以华为平板为例，配置手机。首先和之前的代理手机一样，手机和电脑连接到同一个内网，手机配置代理连接电脑的whistle端口。然后用手机扫描以下二维码：系统会提示您下载根CA证书。下载后进入设置，搜索【加密】，点击【加密和凭证】，选择【从存储设备安装】，选择下载的CA证书（最好是下载到电脑上，直接拖到根目录方便搜索），证书名称随便设置，我设置为【whistle】，凭据和用途选择【VPN和应用】，点击确定导入成功。如果导入成功，可以在【可信凭证】->【用户】中看到。导入成功后，我们请求手机端的掘金页面。查看whistle网络，可以看到抓包数据。代理HTTPS请求与服务端联调时，服务端可能部署在HTTPS上，你的代码必须显示在应用的webview中。这时候联调就比较麻烦了。可以考虑使用HTTPS代理手机请求。除了抓取手机HTTPS请求部分的配置外，还需要在whistle中配置代理地址：https://xx.comhttps://juejin.im配置完成后，访问https://xx在你的手机上。com访问掘金主页的内容。当然我们实际开发更像是下面的配置，让我们在访问在线地址时在电脑上访问代码：https://site-online.comhttp://192.168.0.106:3000访问成功后，显示如下（示例代码在前面）：总结总的来说，whistle的功能是很齐全的。Whistle是免费的，可以在所有平台上使用。我相信这是一个非常亮点。whistle的匹配模式大致可以分为域名、路径、正则模式、精确匹配、通配符匹配。关于whistle配置代理的规则，官网有详细的说明https://wproxy.org/whistle/pattern.html，这里摘录一部分：域名匹配#匹配域名www下的所有请求。test.com，包括http、https、ws、wss、tunnelwww.test.comoperatorURI#匹配域名www.test.com下的所有http请求http://www.test.comoperatorURI#匹配域名下的所有https请求域名www.test.comhttps://www.test.comoperatorURI#以上匹配还可以限制域名的端口号www.test.com:8888operatorURI#8888端口www.test.com/operatorURI#http为80端口，其他443端口路径匹配#限制请求协议，只能匹配http请求http://www.test.com/xxxoperatorURIhttp://www.test.com:8080/xxxoperatorURI#匹配所有请求指定路径下www.test.com/xxxoperatorURIwww.test.com:8080/xxxoperatorURI精确匹配包含请求协议$http://www.test.comoperatorURI$https://www.test.com/xxx？operatorURI在这种情况下只能分别匹配这两种请求http://www.test.com#浏览器会自动变成http://www.test.com/https://www.test.com/xxx？不包含请求协议$www.test.com/xxxoperatorURI可以匹配以下四个请求http://www.test.com/xxxhttps://www.test.com/xxxws://www.test.com/xxxwss://www.test.com/xxx最后，感谢阅读，欢迎关注我的公众号云影天空，带你解读前端技术，掌握最本质的技能。关注公众号拉你进讨论群，有什么问题我都会回复。
