![浏览器控制台在实战中的这些功能，你都知道吗？]( "浏览器控制台在实战中的这些功能，你都知道吗？")
每一个网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的 HTML、CSS 和 JavaScript，显示每个资源页面的请求以及载入所花费的时间。
浏览器控制台即F12-开发者工具，在现实生活中除了前端、测试等一些互联网技术人员外，大多数人会忽视这个工具。而实际破案过程中，浏览器控制台也是破解案件线索的关键工具之一，本文将阐述实战过程中常用的几个功能点：
○ Firefox：菜单➤ Web 开发者 ➤ 切换工具箱，或者工具栏中的 ➤ Web 开发者 ➤ 切换工具箱
○ Chrome：菜单 ➤ 更多工具 ➤ 开发者工具
○ Safari：Develop ➤ Show Web Inspector。如果你看不到 Develop 菜单，去到Safari ➤ Preferences ➤ Advanced，然后点击Show Develop menu in menu bar 复选框。
○ Opera：Developer ➤ Web Inspector
控制台位于浏览器内部的子窗口中，具体界面取决于你使用的浏览器，例如无糖浏览器的界面展示如下：
本文阐述浏览器控制台功能点的过程均以谷歌浏览器为例：
浏览器通常以电脑模式呈现网页效果，但是还可以通过手机模式来模拟该网页在手机浏览器上的界面和功能。
刷新一下，可以选择不同的手机型号，如果没有你需要的型号，可以点击下方的【edit】；
当我们访问一些特定的网站比如某些微商界面，它只能在微信里访问，如果我们在浏览器上进行抓包测试，打开网站就会出现自动跳转的情况，那么我们该如何使用浏览器访问该界面呢？
可以将浏览器的网页模式切换成手机模式，自定义添加一个微信的模拟设备，设置好user-Agent，最后，在维度选择微信，就可以浏览器微商界面了。
最后，选择在顶部选择微信，便能在浏览器端打开仅微信可见的页面了。
仅仅设置好user-Agent字符串就可以访问某个特定设备才能打开的界面，那么这个user-Agent到底为何物呢？
我们先看看百度解释：User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。
简单来说，UA是浏览器的身份证，让服务器知道你是谁？服务器通过识别UA，来响应适合你电脑、手机...的网络页面
不懂？没关系，下面举个例子告诉你，我们就拿一个华为手机浏览器来举例：
在浏览器中，我们可以通过调节UA，来获取不同板式的网页。UA（身份证）告诉服务器，我是nova9鸿蒙系统等一系列信息， 随之网站返回与屏幕尺寸、系统等相适应的一个网页。
此处若选择电脑UA，则告诉服务器我是Wiin10，64位系统（此处win10为举例），服务器网站知道后返回与之系统参数相适应的网页 。
这也是为什么我们在PC端设置好参数后，就可以访问特定微信界面的原因。
在浏览器中打开开发者工具，按【F12】➤【network】，可以查看数据接口（XHR）、图片、音频媒体文件、文档、以及websocket等。
XHR（Xml HTTP Request）是Ajax技术实现所依赖的对象，那么什么是Ajax？
Ajax = 异步 JavaScript 和 XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
官方描述总是耐人寻味，那么我们同过一张简单的图示来说明到底什么是Ajax：
没有Ajax之前，你收到小白发送的一条消息：你好！然后你回复了他，但是此时你不知道小白有没有回复你。
要怎么才能知道小白回复你消息没有呢？你得通过手动刷新整个页面，知道小白已经回复你了说：我不好！或者写一个定时自动刷新功能的程序，也会返回小白的消息。
但是对于浏览器来说，仅仅因为查看小白的消息有没有返回，每次都把整个页面进行重新渲染，如果该界面存在大量的图片、广告、视频，那么浏览器就存在超负荷工作的情况。
为了解决超负荷工作的情况，浏览器有了Ajax技术。
Ajax技术实际上就是指网页里面有一个javascript脚本，有了这个脚本，每次查看是否有新消息时，你可以不再刷新整个网页，直接通过这个脚本发送一个Ajax请求（即http请求）如：
（Get）http://chat.com/message (Get)聊天室消息的接口
{'msg':“我不好”，'from'：“小白”} 聊天室接口（返回）有一条新消息，脚本代码把新消息展示在聊天框里。
所以说Ajax技术出现之后，我们就再也不用刷新整个页面了，它可以不断的使用javascript脚本，发送请求并返回数据。
赌博类诈骗，嫌疑人通常使用某种客服系统与受害人联系，这种客服系统使用 WebSocket是很常见的。而且，近年来， WebSocket可以说是客服系统的标配，那么，到底什么是 WebSocket呢？
WebSocket是一种在单个TCP连接上进行全双工通信的协议。我们可以认为他是一种更高级的在网页上进行相互通信的方式，WebSocket 的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话。
与Ajax技术进行对比，在 WebSocket没有出现之前，查看某个网页客服系统是否有人发送了新的消息给他，他得每秒去服务器查询一次，询问服务器是否有新的消息？例如：
客户端：啦啦啦，有没有新信息 (Request)
服务端：没有（Response）
客户端：啦啦啦，有没有新信息 (Request)
如果该网页客服系统有一千个人同时在线，那么这一千人每一秒都会请求一次服务器，久而久之，服务器扛不住这种压力，就会崩溃。
此时，为了减少如此频繁访问服务器的次数，就有了另外一种请求机制——Ajax long polling（Ajax 长轮询），这种方式是指客户端发起请求后，如果没有新消息，就一直不返回 Response 给客户端。直到有新消息才返回，返回完之后，客户端再次建立连接，周而复始。
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request）
服务端：额。。等待到有消息的时候。。给你（Response）
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request） -loop
从上面可以看出其实这两种方式，都是在不断地建立HTTP连接，然后等待服务端处理，可以体现HTTP协议的另外一个特点，被动性。
何为被动性呢，其实就是，服务端不能主动联系客户端，只能有客户端发起。
从上面很容易看出来，不管怎么样，上面这两种都是非常消耗资源的。
ajax轮询 需要服务器有很快的处理速度和资源。long poll 需要有很高的并发，也就是说同时接待客户的能力。
所以 ajax轮询 和 long poll 都有可能发生这种情况。
客户端：啦啦啦啦，有新信息么？
服务端：正忙，请稍后再试（503 Server Unavailable）
客户端：。。。。好吧，啦啦啦，有新信息么？
服务端：正忙，请稍后再试（503 Server Unavailable）
通过上面这两个例子，我们可以看出，这两种方式都不是最好的方式，需要很多资源。所以在这种情况下出现了 WebSocket 。他解决了 HTTP 的这几个难题。首先，被动性，当服务器完成协议升级后（HTTP->WebSocket），服务端就可以主动推送信息给客户端啦。所以上面的情景可以做如下修改。
客户端：啦啦啦，我要建立WebSocket协议，需要的服务：chat，WebSockett协议版本：17（HTTP Request）
服务端：ok，确认，已升级为WebSocket协议（HTTP Protocols Switched）
客户端：麻烦你有信息的时候推送给我噢。。
服务端：ok，有的时候会告诉你的。
服务端：新balabalabalabala
服务端：新balabalabalabala
这样，只需要经过一次 HTTP 请求，就可以做到源源不断的信息传送了。
在浏览器中打开开发者工具，按【F12】➤【network】➤【WS】，我们以美洽客服举例说明，查看网页请求，箭头向上表示发给服务器的消息，箭头向下表示服务器返回的消息
随着时代的发展，犯罪分子可能都已经形成技术体系，并不会让你轻而易举的就发现我代码的机密，因此，对网页源代码加密也经常出现。如何查看被加密的源代码呢？
进入页面后使用快捷键【F12】，或进入菜单选项选择“开发者工具”，此时我们就可以按住【 ctrl+shift+F】，就可以出现下面这个搜索框。
搜索key，快速定位其源代码书写逻辑，找到源代码中的密钥。
浏览器本地存储主要分为1.Cookie 2. Local Storage 3.Session Storage 。
Cookie是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存，或是从客户端的硬盘读取数据的一种技术。Cookie是当你浏览某网站时，由Web服务器置于你硬盘上的一个非常小的文本文件，它可以记录你的用户ID、密码、浏览过的网页、停留的时间等信息 。
当你再次来到该网站时，网站通过读取Cookie ， 得知你的相关信息 ，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。
cookie存放数据的大小为4k左右，存储的内容有限，后面就发展出了例如Local Storage、Session Storage的数据库。当你有大量数据需要存储时，就可能使用到Local Storage。
实际案件中，诈骗团伙创建的网站经常会把网站的后台域名和接口域名分离，这种情况下怎么实现授权？其中一种可能的原因是将token存储到了本地Local Storage中，在调取软件接口时，首先调出了本地的数据，带上token去访问远程日志的请求接口，这时，我们就可以拿到cookie登录上他的后台。
Local Storage除了token以外，可能还存有用户的其他数据例如用户ID，IP地址、密钥等，这些也可以帮你登录他的网站。
浏览器控制台除了上述功能点，能在研判线索时提供帮助，其他还有查看网页结构、调试脚本等，重点找到合适的研判方式去处理、分析线索，后续我们也会对浏览器控制台功能点进行更深入的讲解，欢迎大家随时关注我们哟~
1.无糖浏览器-您身边的办案助手。你可以根据操作系统的不同，从下面的地址下载最新的安装包程序
http://browser.nosugar.tech
2.下载成功后，点击无糖浏览器的程序即可启动，双击后点击“接受”按钮，再点击“安装”即可成功安装。
3.注册时可使用邀请码【YZZAIJG4NP9J】快速开通完整权限哟。
如有疑问，可以扫描下方二维码，进入无糖反网络犯罪研究中心。
![浏览器控制台在实战中的这些功能，你都知道吗？]( "浏览器控制台在实战中的这些功能，你都知道吗？")
原文始发于微信公众号（无糖反网络犯罪研究中心）：浏览器控制台在实战中的这些功能，你都知道吗？
评论