<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Chrome &#8211; 编码无悔 /  Intent &amp; Focused</title>
	<atom:link href="https://www.codelast.com/tag/chrome/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.codelast.com</link>
	<description>最优化之路</description>
	<lastBuildDate>Mon, 28 Nov 2022 18:23:08 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>[原创] 用Charles Proxy来抓包Chrome浏览器的数据</title>
		<link>https://www.codelast.com/%e5%8e%9f%e5%88%9b-%e7%94%a8charles-proxy%e6%9d%a5%e6%8a%93%e5%8c%85chrome%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84%e6%95%b0%e6%8d%ae/</link>
					<comments>https://www.codelast.com/%e5%8e%9f%e5%88%9b-%e7%94%a8charles-proxy%e6%9d%a5%e6%8a%93%e5%8c%85chrome%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84%e6%95%b0%e6%8d%ae/#respond</comments>
		
		<dc:creator><![CDATA[learnhard]]></dc:creator>
		<pubDate>Fri, 18 Feb 2022 09:17:18 +0000</pubDate>
				<category><![CDATA[Linux]]></category>
		<category><![CDATA[原创]]></category>
		<category><![CDATA[Charles Proxy]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[抓包]]></category>
		<guid isPermaLink="false">https://www.codelast.com/?p=13530</guid>

					<description><![CDATA[<div style="text-align: center;">
	<img decoding="async" alt="charles proxy" src="https://www.codelast.com/wp-content/uploads/2022/02/charles_proxy.png" style="width: 571px; height: 221px;" /></div>
<p>查看Charles Proxy文章合集，请点击<a href="https://www.codelast.com/?p=13742" target="_blank" rel="noopener">这里</a>。<br />
本文适用的操作系统：Ubuntu</p>
<blockquote>
<p>
		Charles Proxy是一个HTTP代理/HTTP监视器/反向代理，它使开发人员能够查看其计算机和Internet之间的所有HTTP和SSL/HTTPS流量。这包括请求、响应和HTTP headers（其中包含cookie和缓存信息）。</p>
</blockquote>
<p>在Chrome浏览器中把代理服务器设置成<a href="https://www.charlesproxy.com/" rel="noopener" target="_blank">Charles Proxy</a>在本地提供的代理，可以让Charles Proxy把Chrome的网络流量抓取下来。<br />
配置方法如下。<br />
<span id="more-13530"></span><br />
<span style="color:#0000ff;">➤</span> Charles Proxy端的配置<br />
<span style="color:#ff0000;">✔</span> Proxy&#8594;Proxy Settings：<br />
<img decoding="async" alt="charles proxy settings" src="https://www.codelast.com/wp-content/uploads/2022/02/charles_proxy_settings.png" style="width: 500px; height: 492px;" /><br />
Charles Proxy软件打开后，会启动一个代理服务器，在这里你可以修改代理服务器的端口等信息，通常来说保持默认参数即可。<br />
<span style="color: rgb(255, 255, 255);">文章来源：</span><a href="https://www.codelast.com/" rel="noopener noreferrer" target="_blank"><span style="color: rgb(255, 255, 255);">https://www.codelast.com/</span></a><br />
<span style="color: rgb(255, 0, 0);">✔</span>&#160;Proxy&#8594;SSL Proxying Settings：<br />
<img decoding="async" alt="charles ssl proxying settings" src="https://www.codelast.com/wp-content/uploads/2022/02/charles_ssl_proxying_settings.png" style="width: 450px; height: 411px;" /><br />
勾选上&#8220;Enable SSL Proxying&#8221;，这样可以对https的流量进行抓包。<br />
并且在&#8220;Location&#8221;里设置你感兴趣的域名，注意：只有这些域名的流量会被抓包。<br />
<span style="color: rgb(255, 255, 255);">文章来源：</span><a href="https://www.codelast.com/" rel="noopener noreferrer" target="_blank"><span style="color: rgb(255, 255, 255);">https://www.codelast.com/</span></a><br />
<span style="color: rgb(255, 0, 0);">✔</span>&#160;导出Charles Proxy的证书<br />
在Charles界面上点击菜单导出 .pem 证书：</p>
<blockquote>
<p>
		Help&#8594;SSL Proxying&#8594;Save Charles Root Certificate</p>
</blockquote>
<p>把文件保存到 ~/charles.pem&#8230; <a href="https://www.codelast.com/%e5%8e%9f%e5%88%9b-%e7%94%a8charles-proxy%e6%9d%a5%e6%8a%93%e5%8c%85chrome%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84%e6%95%b0%e6%8d%ae/" class="read-more">Read More </a></p>]]></description>
										<content:encoded><![CDATA[<div style="text-align: center;">
	<img decoding="async" alt="charles proxy" src="https://www.codelast.com/wp-content/uploads/2022/02/charles_proxy.png" style="width: 571px; height: 221px;" /></div>
<p>查看Charles Proxy文章合集，请点击<a href="https://www.codelast.com/?p=13742" target="_blank" rel="noopener">这里</a>。<br />
本文适用的操作系统：Ubuntu</p>
<blockquote>
<p>
		Charles Proxy是一个HTTP代理/HTTP监视器/反向代理，它使开发人员能够查看其计算机和Internet之间的所有HTTP和SSL/HTTPS流量。这包括请求、响应和HTTP headers（其中包含cookie和缓存信息）。</p>
</blockquote>
<p>在Chrome浏览器中把代理服务器设置成<a href="https://www.charlesproxy.com/" rel="noopener" target="_blank">Charles Proxy</a>在本地提供的代理，可以让Charles Proxy把Chrome的网络流量抓取下来。<br />
配置方法如下。<br />
<span id="more-13530"></span><br />
<span style="color:#0000ff;">➤</span> Charles Proxy端的配置<br />
<span style="color:#ff0000;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> Proxy&rarr;Proxy Settings：<br />
<img decoding="async" alt="charles proxy settings" src="https://www.codelast.com/wp-content/uploads/2022/02/charles_proxy_settings.png" style="width: 500px; height: 492px;" /><br />
Charles Proxy软件打开后，会启动一个代理服务器，在这里你可以修改代理服务器的端口等信息，通常来说保持默认参数即可。<br />
<span style="color: rgb(255, 255, 255);">文章来源：</span><a href="https://www.codelast.com/" rel="noopener noreferrer" target="_blank"><span style="color: rgb(255, 255, 255);">https://www.codelast.com/</span></a><br />
<span style="color: rgb(255, 0, 0);"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>&nbsp;Proxy&rarr;SSL Proxying Settings：<br />
<img decoding="async" alt="charles ssl proxying settings" src="https://www.codelast.com/wp-content/uploads/2022/02/charles_ssl_proxying_settings.png" style="width: 450px; height: 411px;" /><br />
勾选上&ldquo;Enable SSL Proxying&rdquo;，这样可以对https的流量进行抓包。<br />
并且在&ldquo;Location&rdquo;里设置你感兴趣的域名，注意：只有这些域名的流量会被抓包。<br />
<span style="color: rgb(255, 255, 255);">文章来源：</span><a href="https://www.codelast.com/" rel="noopener noreferrer" target="_blank"><span style="color: rgb(255, 255, 255);">https://www.codelast.com/</span></a><br />
<span style="color: rgb(255, 0, 0);"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>&nbsp;导出Charles Proxy的证书<br />
在Charles界面上点击菜单导出 .pem 证书：</p>
<blockquote>
<p>
		Help&rarr;SSL Proxying&rarr;Save Charles Root Certificate</p>
</blockquote>
<p>把文件保存到 ~/charles.pem<br />
<span style="color: rgb(255, 255, 255);">文章来源：</span><a href="https://www.codelast.com/" rel="noopener noreferrer" target="_blank"><span style="color: rgb(255, 255, 255);">https://www.codelast.com/</span></a><br />
<span style="color: rgb(0, 0, 255);">➤</span>&nbsp;Chrome浏览器端的配置（以Ubuntu系统上的Chrome为例）<br />
<span style="color: rgb(255, 0, 0);"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>&nbsp;把证书导入Chrome<br />
依次打开Chrome的如下页面：<br />
&ldquo;<span style="color: rgb(0, 0, 255);">设置</span>&rdquo;&rarr;&ldquo;<span style="color: rgb(0, 0, 255);">安全和隐私设置</span>&rdquo;&rarr;&ldquo;<span style="color: rgb(0, 0, 255);">安全</span>&rdquo;&rarr;&ldquo;<span style="color: rgb(255, 0, 0);">管理证书</span>&rdquo;&rarr;&ldquo;<span style="color: rgb(255, 0, 0);">授权机构</span>&rdquo;：<br />
<img decoding="async" alt="" src="https://www.codelast.com/wp-content/uploads/2022/02/import_charles_proxy_ca_1.png" style="width: 668px; height: 182px;" /><br />
点击&ldquo;<span style="color:#0000ff;">导入</span>&rdquo;按钮，选择刚才生成的 .pem 证书文件，会弹出下面的对话框：<br />
<img decoding="async" alt="" src="https://www.codelast.com/wp-content/uploads/2022/02/import_charles_proxy_ca_2.png" style="width: 507px; height: 297px;" /><br />
勾选第一项。<br />
<span style="color: rgb(255, 255, 255);">文章来源：</span><a href="https://www.codelast.com/" rel="noopener noreferrer" target="_blank"><span style="color: rgb(255, 255, 255);">https://www.codelast.com/</span></a><br />
<span style="color: rgb(255, 0, 0);"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>&nbsp;配置Chrome的代理<br />
使用Chrome的SwitchyOmega插件，添加一个名为&ldquo;Charles Proxy&rdquo;的情景模式：<br />
<img decoding="async" alt="" src="https://www.codelast.com/wp-content/uploads/2022/02/charles_proxy_config_in_SwitchyOmega.png" style="width: 600px; height: 266px;" /><br />
<span style="color: rgb(255, 255, 255);">文章来源：</span><a href="https://www.codelast.com/" rel="noopener noreferrer" target="_blank"><span style="color: rgb(255, 255, 255);">https://www.codelast.com/</span></a><br />
<span style="color: rgb(0, 0, 255);">➤</span>&nbsp;测试<br />
在Chrome的SwitchyOmega插件中选择刚配置好的Charles Proxy情景模式，再访问一个前面设置好的感兴趣的域名下的网页。<br />
在导入证书之前，会发现抓不了：<br />
<img decoding="async" alt="" src="https://www.codelast.com/wp-content/uploads/2022/02/before_trust_charles_proxy_ca.png" style="width: 600px; height: 74px;" /><br />
&mdash;&mdash;界面上全是红叉，以及 Failed。</p>
<p>在导入了证书之后，再试一次，会发现抓包可以成功完成：<br />
<img decoding="async" alt="" src="https://www.codelast.com/wp-content/uploads/2022/02/after_trust_charles_proxy_ca.png" style="width: 821px; height: 117px;" /><br />
&mdash;&mdash;状态码是200，以及Status是Complete，这说明一切正常。</p>
<p><span style="color: rgb(255, 255, 255);">文章来源：</span><a href="https://www.codelast.com/" rel="noopener noreferrer" target="_blank"><span style="color: rgb(255, 255, 255);">https://www.codelast.com/</span></a><br />
<span style="color: rgb(255, 0, 0);">➤➤</span>&nbsp;版权声明&nbsp;<span style="color: rgb(255, 0, 0);">➤➤</span>&nbsp;<br />
转载需注明出处：<u><a href="https://www.codelast.com/" rel="noopener noreferrer" target="_blank"><em><span style="color: rgb(0, 0, 255);"><strong style="font-size: 16px;"><span style="font-family: arial, helvetica, sans-serif;">codelast.com</span></strong></span></em></a></u>&nbsp;<br />
感谢关注我的微信公众号（微信扫一扫）：<br />
<img decoding="async" alt="wechat qrcode of codelast" src="https://www.codelast.com/codelast_wechat_qr_code.jpg" style="color: rgb(77, 77, 77); font-size: 13px; width: 200px; height: 200px;" /><br />
以及我的微信视频号：</p>
<p style="border: 0px; font-size: 13px; margin: 0px 0px 9px; outline: 0px; padding: 0px; color: rgb(77, 77, 77);">
	<img decoding="async" alt="" src="https://www.codelast.com/wechat_shipinhao_qr_code.jpg" style="text-align: center; width: 200px; height: 199px;" /></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.codelast.com/%e5%8e%9f%e5%88%9b-%e7%94%a8charles-proxy%e6%9d%a5%e6%8a%93%e5%8c%85chrome%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84%e6%95%b0%e6%8d%ae/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
