Charles劫持修改JS文件

原创已于 2022-01-25 11:28:09 修改 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #https #http

于 2022-01-25 11:00:02 首次发布

杂七杂八专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用Charles代理服务器实现HTTPS流量的监控与文件替换，包括安装配置Charles、浏览器配置及文件替换步骤。

Charles 介绍：

Charles 是一个HTTP代理服务器，反转代理服务器，当浏览器连接Charles的代理访问互联网时，Charles可以监控浏览器发送和接收的所有数据。它允许一个开发者查看所有连接互联网的HTTP通信，这些包括request, response 和 HTTP headers (包括cookies 与 caching 信息)。

第一步：安装Charles

  打开官网： https://www.charlesproxy.com/，可以下载：

第二步：配置Charles

  1.    安装证书
        如果不安装证书的话，会出现抓取到的文件，显示unknown的状

打开charles，点击help->SSL Proxying->Install Charles Root Certificate，如下图所示：
　　　　　　在这里插入图片描述
接下来会弹出安装窗口，如下图：

点击安装证书进入证书导入向导，存储位置根据自己要求选择（我选择了存储在本地计算机），点击“下一步”
　　　　　　这时向导提示选择证书存储，这里选择“将所有的证书都放入下列存储”，点击“浏览”，在弹出的选择证书存储窗口中，选择“受信任的根证书颁发机构”。
　　　　　　在这里插入图片描述

点击最后的“完成”按钮，会弹出一个导入成功的弹框：

　2. Charles 上进行相应的配置

                 点击菜单栏中Proxy->SSL Proxying Setting，会弹出SSL Proxying Setting的弹框。

首先要将“Enable SSL Proxying”勾选，表示开启SSL。

点击“Add”按钮，添加需要抓取的网站。
在这里插入图片描述

第三步：配置浏览器

1. 点击F12，打开开发者工具，network -> 勾选Disable cache，清除浏览器缓存。

2. 以Chrome浏览器为例，打开浏览器的设置页面：
在这里插入图片描述
点击局域网设置：

这样就配置好了，抓包的界面如下图所示：

第四步：替换文件

首先在浏览器中，保存自己需要修改的文件，选中文件夹，点击右键，选中Save as 保存到本地

2. 本地修改完文件以后，打开Charles ，找到抓取到的需要替换的文件，点击右键 --> Map Local…

在Local path 点击“Choose”按钮，选取本地需要替换的文件，刷新页面，就大功告成啦！