我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

charles工具的使用方法

本篇内容介绍了“charles工具的使用方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联服务项目包括魏都网站建设、魏都网站制作、魏都网页制作以及魏都网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,魏都网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到魏都省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

1. Charles 简介

好多人把它叫做抓包工具,好像也没什么不对。但官方把它定义为一个代理(Proxy)。我们看看官方是怎么说的:

Charles是一个HTTP代理(或HTTP监视器,或反向代理),可以让开发者观察到他们的机器和互联网之间的所有HTTP和SSL/HTTPS流量。这包括请求,响应和HTTP标头(包含cookie和缓存信息)。

Charles 使用Java开发,支持Windows、macOS、Linux操作系统:

charles工具的使用方法

并且,让Windows和macOS用户有福的是,它支持系统代理设置,也就是用它设置为系统代理,就不用再去设置浏览器代理了。老猿我就比较悲催了,用Ubuntu就没这个福利了,启动Charles后还有设置Chrome的代理。好在我用SwitchyOmega(你懂的),新增一个代理指向Charles也不是什么难事儿。

2. Charles的下载安装

我们去 官网下载 一个免费试用版,有30天的试用期,不过每次运行半小时就不能使用了,需要重新运行charles。
选择适合你的系统的版本下载安装即可。安装过程是傻瓜式的,一路点下一步即可。

3. Charles的配置:http 代理

以Windows为例(macOS类似)
运行Charles,在Windows系统下,已经默认设置为系统代理,可以在左边栏看到已经记录的http请求(如果有请求的话)。点击菜单“Proxy”可以看到默认的系统设置。如下图所示:

charles工具的使用方法

图中绿色方框就是已经选中Windows Proxy(系统代理),橙色框中便是它记录的http请求。点击红框中的“Proxy Settings…”菜单,可以修改代理端口,默认的是8888:

charles工具的使用方法

Windows下的Chrome浏览器默认使用系统代理,这时候你用Chrome打开网页就可以看到Charles记录的请求了。

Ubuntu(Linux)下配置Chrome浏览器

Ubuntu下就没有前面图中类似绿色框中的”Linux Proxy”可以选择,我们需要自己去Chrome浏览器设置代理,然而Chrome是使用系统代理的。于是,我们有两种选择来设置Chrome使用Charles的代理:

(1) 去系统设置里面把系统代理设置成Charles的8888端口
打开 System Settings -> Network,选择 Network proxy,如图所示:

charles工具的使用方法

(2)像老猿我这样使用SwitchyOmega插件
打开插件的配置页面,点击左侧的New profile按钮,填写名称并创建:

charles工具的使用方法

填写代理的地址为 127.0.0.1,端口为8888 :

charles工具的使用方法

填写后,左侧的 Apply changes 按钮变成绿色,点击它保存配置。
以后需要使用Charles和Chrome分析网站时,只需选择SwitchyOmega 的这个代理即可。

Ubuntu(Linux)下配置Firefox浏览器

打开 Firefox 的 Preference -> General -> Network Settings 进行代理配置:

charles工具的使用方法

看上图,同样对于Firefox 也有两种使用代理的方式:

  • Use system proxy settings : 使用系统代理

  • Manual proxy configuration : 手动设置代理

4. Charles的配置: HTTPS/SSL代理

上面的配置,是针对HTTP的,也就是非加密的请求的设置,但是现在的网络环境是加密传输(HTTPS)已经相当普及,所以我们要对SSL/HTTPS 做相应的配置,让Charles也能捕获并解析HTTPS传输。

如果不配置的话,捕获到的HTTPS内容会是乱码,如图:

charles工具的使用方法

我们可以看到,凡是HTTPS传输的,都是,右边的内容也是很多乱码。

大家应该已经知道了,HTTPS加密传输靠的是CA证书,配置Charles支持HTTPS也就是把Charles自己的CA证书导入到系统或浏览器。

(1)启用并配置 Charles的SSL 代理
点击菜单 Proxy -> SSL Proxying Settings,选中 “Enable SSL Proxying”,点击“Add”,Host填写*(即对所有网站使用代理),Port填写 443,点击OK保存即可。如图:

charles工具的使用方法

(2)Windows导入Charles的根证书
点击菜单 Help -> SSL Proxying -> Install Charles Root Certificate,

charles工具的使用方法

会跳出导入证书的窗口,点击 “安装证书”,一步一步安装即可。

charles工具的使用方法

这种方式导入的证书只对Windows自带的IE浏览器生效,而对Firefox、Chrome等第三方浏览器要自己从浏览器导入证书。如果第三方浏览器不导入Charles的根证书,访问HTTPS网站时,就会是这样的:

charles工具的使用方法

同样的,在macOS系统下用这种方式导入的证书只对macOS自带的Safari浏览器生效。

(3)Chrome导入Charles的根证书
Charles证书的获得有两种方式:
一种是从软件里面Save为文件,点击菜单 Help -> SSL Proxying -> Save Charles Root Certificate… 保存为文件。

charles工具的使用方法

另一种方法是,Chrome启用Charles代理,访问  chls.pro/ssl  即可下载证书。

得到证书文件后,通过 菜单: 设置->高级-> 管理证书 打开证书管理窗口,点击“受信任的根证书颁发机构”,再点击“导入…”按钮,选择刚才得到的证书导入即可,如图:

charles工具的使用方法

导入证书成功后,记得要重启Chrome浏览器,让证书生效。
这样,Charles就可以解密Chrome的HTTPS传输了。Firefox导入证书的方法类似,就不再详述。使用Firefox的小猿们可以自己试试看。

“charles工具的使用方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


网页标题:charles工具的使用方法
分享URL:http://shouzuofang.com/article/gpeshh.html

其他资讯