zoukankan      html  css  js  c++  java
  • 01_Fiddler原理、代理设置、https设置、辅助工具

     

    一、HTTP协议简介
    二、Fiddler简介
    三、Fiddler工作原理

    3.2 Firefox浏览器需手动设置局域网代理

    3.3 自己设置浏览器代理

    3.4 Firefox 中安装Fiddler插件

    四、Fiddler界面介绍

    五、Fiddler抓取HTTPS请求配置

    六、fiddlerb捕获设置

    七、Fiddler的HTTP统计视图
    八、QuickExec命令行的使用

    九、Fiddler自带方便的编码工具:TextWizard

     

    一、HTTP协议简介

    HTTP是超文本传输协议,信息是明文传输的,而HTTPS是安全超文本传输协议,需要证书和提供安全连接,换句话说,HTTPS是嵌套了SSL加密的HTTP连接,其内容由SSL先加密,然后再传输。

    简单来讲,HTTPS是加过密的HTTP。由于网络上传输的数据是加密的,用户在浏览网页时,除了用户自己可以看到当前在看什么网页,其他第三方是无法得知用户在做什么的。比如用户在网上登录或输入其他敏感信息进行传输时一旦使用HTTPS,那么数据传输就不是明文了,对于第三方来讲就无法获取你的敏感信息。

    二、Fiddler简介

    官网:https://www.telerik.com/fiddler
    Fiddler是比较好用的web代理调试工具之一,它能记录并检查所有客户端与服务端的HTTP/HTTPS请求,能够设置断点,篡改及伪造Request/Response的数据,修改hosts,限制网速,http请求性能统计,简单并发,接口测试,辅助自动化测试,等等。现在抓包工具成为测试人员的必备使用工具,开发人员也在普遍使用,进行问题的定位分析,是非常有助于工作的一款工具。

    三、Fiddler工作原理

    先来看看fiddler未参与时,一个普通的客户端与服务端的请求流程图:浏览器访问一个网站:87testing.com,浏览器给webserver发送一个Request,webserver接收到Request后进行处理,返回给浏览器Response,然后浏览器解析Response中的html,展现网页给用户。如图:

    3.2 Firefox浏览器需手动设置局域网代理

    Fiddler工作于七层中的应用层,在client与webserver之间以代理服务器的形式存在,启动fiddler后会监听本地127.0.0.1的8888端口(默认端口),IE/Chrome浏览器会自动设置局域网代理(Firefox代理是独立的,需要单独设置),如图:

    此时,fiddler就作为代理服务器,浏览器访问87testing.com的流程:浏览器给webserver发送一个Request,代理服务器fiddler接收到Request,fiddler将Request发送到webserver,webserver接收到Request后进行处理,Response到代理服务器fiddler,Fiddler将Response返回到浏览器,如图:

     

    3.3 自己设置浏览器代理

    默认情况下Fiddler会自动开启IE、chrome等浏览器代理服务,这样的话列表中会显示很多我们实际上不需要的请求。我们可以自己来指定监听哪个浏览器。打开fiddler4工具,点击【Tools】-【Options】-【Connections】

    Act as system proxy on startup:默认勾选,当启动fiddler的时候就会设置为系统代理。取消勾选,点击确认然后重启fiddler。

     

    然后自己手动设置浏览器代理。(以IE为例)工具—>Internet选项—>连接—>局域网设置—>高级代理。手动设置127.0.0.1:8888即可。

    再次查看左侧请求栏的请求数据时,发现只有IE浏览器发出的请求才会被捕获。

    3.4 Firefox 中安装Fiddler插件

    修改Firefox 中的代理比较麻烦, 不用fiddler的时候还要去掉代理。 麻烦

    推荐你在firefox中使用fiddler hook 插件, 这样你非常方便的使用Fiddler获取firefox中的request 和response

    当你安装fiddler后, 就已经装好了Fiddler hook插件, 你需要到firefox中去启用这个插件
    打开firefox   tools->Add ons -> Extensions 启动 FiddlerHook

    找不到如下的工具l时,参考https://support.mozilla.org/en-US/kb/restore-menu-bar-firefox

    四、Fiddler界面介绍

     看看Fiddler的基本界面

    2.#:会话框列表最左侧,#号这一栏是代表这个请求大概是什么内容,<>这个符号就是我们一般要测试的请求与响应的类型。

    3.result:这里是服务器返回的代码,如

    --200,请求ok;2xx一般是服务器接受成功了并处理

    --3xx,重定向相关

    --4xx,404最常见的的就是找不到服务器,一般是请求地址有问题

    --5xx,这个一般是服务器本身的错误

    4.protocol:这个是协议类型,如http、https

    5.host:主机地址或域名

    6.url:请求的路径

    7.body:该条请求产生的数据大小

    8.caching:缓存相关

    9.content-type:连接类型

    10.process:客户端类型

    Request 和Response

    1.Request是客户端发出去的数据,Response是服务端返回过来的数据,这两块区域功能差不多

    2.headers:请求头,这里包含client、cookies、transport等

    3.webfroms:请求参数信息表格展示,更直观。可以直接该区域的参数

    4.Auth:授权相关,如果现实如下两行,说明不需要授权

    No Proxy-Authorization Header is present.

    No Authorization Header is present.

    5.cookies:查看cookie详情

    6.raw:查看一个完整请求的内容,可以直接复制

    7.json:查看json数据

    8.xml:查看xml文件的信息

    decode解码

    1.如果response的TextView区域出现乱码情况,可以直接点下方黄色区域解码

    2.也可以选中上方快捷菜单decode,这样后面的请求都会自动解码了

    五、Fiddler抓取HTTPS请求配置

    由于fiddler安装后默认只能抓取http请求,如果需要抓取https请求需要进行配置。配置方式:
    Tools--->Options--->HTTPS,勾选CaptureHTTPS CONNECTs、Decrypt HTTPS traffic 、ignore server certificate errors(unsafe),点击OK,会弹出证书直接确认即可。

    (2)此时,在电脑chrome浏览器上就可以访问https的请求了,且fiddler会话列表上就可以显示出https请求。

    (3)抓firefox上https请求 https://www.cnblogs.com/yoyoketang/p/6538021.html

    (4)移动端
    在配置移动端证书之前检查下如下配置,Tools---->Connections---->勾选Allow remote computers to connect:

    实际工作中,移动端项目大部分会在真机上进行测试,那么下面介绍针对手机端访问http/https请求在电脑端可以抓取到对应手机端发出的请求。iOS设备及Android设备设置方式基本类似,下面以iphone设置为例:
    在手机上设置代理:设置—>无线网络,设置服务器ip和端口号:

    然后手机safari浏览器输入地址:电脑ip:8888如:http://172.21.10.42:8888会出现如下页面:

    点击“FiddlerRoot certificate”进行证书安装,安装完成后,如下说明安装成功:

    此时,证书还不算完成安装完,假如手机是ios10.0以上系统,需要在手机系统设置---关于手机----证书信任设置,在此页面把证书开启即可,此时手机safari浏览器地址栏输入:87testing.com,进行访问,在电脑端fiddler上即可显示出对应的请求:

     

    六、fiddlerb捕获设置

    见另一随笔

    七、Fiddler的HTTP统计视图

    通过陈列出所有的HTTP通信量,Fiddler可以很容易的向您展示哪些文件生成了您当前请求的页面。使用Statistics页签,用户可以通过选择多个会话来得来这几个会话的总的信息统计,比如多个请求和传输的字节数。

    选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间。从条形图表中还可以分别出哪些请求耗时最多,从而对页面的访问进行访问速度优化

    八、QuickExec命令行的使用

    Fiddler的左下角有一个命令行工具叫做QuickExec,允许你直接输入命令。

    常见得命令有

    help  打开官方的使用页面介绍,所有的命令都会列出来

    cls    清屏  (Ctrl+x 也可以清屏)

    select  选择会话的命令

    ?.png  用来选择png后缀的图片

    bpu  截获request

    九、Fiddler自带方便的编码工具:TextWizard

     点击Fiddler 工具栏上的TextWizard,  这个工具可以Encode和Decode string.

     

    转自:https://www.cnblogs.com/UncleYong/p/10795347.html#_label3

    转自:https://www.cnblogs.com/ceshijiagoushi/p/9418459.html

    转自:https://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html#summaryview

    转自:https://www.cnblogs.com/yoyoketang/p/6731121.html

  • 相关阅读:
    c 语言学习第一天
    react+antd 使用脚手架动态修改主题色
    用 vitePress 快速创建一个文档项目
    react懒加载,减少首屏加载时间
    react-devtools安装以及使用中的问题
    react为什么不用数组的下标来绑定key
    三种js缓存(笔记)
    关于浏览器自动记住登录帐号和密码后, 一些输入框会显示帐号密码信息
    H5 Hybrid开发-前端资源本地化方案纪要
    webpack + ts 配置路径别名无死角方法总结
  • 原文地址:https://www.cnblogs.com/dashu123/p/11778227.html
Copyright © 2011-2022 走看看