3년만에 다시 모바일 H5페이지 개발을 접하게 되었습니다. 마지막은 4학년 인턴이었습니다. 이번에는 h5 페이지와 네이티브 앱 간의 상호 작용이 포함된 하이브리드 개발입니다. h5 페이지는 네이티브 앱으로 로그인 상태를 열고 네이티브 카메라를 호출하는 등 네이티브 앱의 인터페이스를 호출해야 합니다. QR 코드를 스캔하세요. 위챗 미니 프로그램 개발과 다르게 위챗은 로컬 개발을 위한 위챗 개발자 도구를 제공하는데, 이는 로컬에서 시뮬레이션하고 호출할 수 있지만, 매번 정적 파일을 패키징하고 디버깅을 위해 서버에 업로드해야 하는데 매우 번거롭습니다.
네이티브 앱이 온라인 h5를 로드할 때 로컬 코드를 실행할 수 있나요? 대답은 '예'입니다. 휘슬과 같은 패킷 캡처 도구를 사용하여 온라인 페이지 요청 데이터를 가로채고 로컬 코드에 응답할 수 있습니다. 이 문서에서는 주로 패킷 캡처 도구 휘슬의 사용을 설명합니다.
패킷 캡처는 네트워크 전송 중에 주고받은 데이터 패킷에 대한 가로채기, 재전송, 편집, 전송 및 기타 작업을 수행하는 것입니다. 패킷 캡처를 통해 다음을 수행할 수 있습니다.
네트워크 문제 분석
비즈니스 분석
네트워크 정보 흐름 분석
네트워크 빅데이터 금융 리스크 통제
네트워크 침입 시도 공격 탐지
내부 및 외부 사용자의 네트워크 자원 남용 탐지
네트워크 영향 탐지 침입
링크 인터넷 광대역 트래픽 모니터링
네트워크 사용 트래픽 모니터링(내부 사용자, 외부 사용자 및 시스템 포함)
인터넷 및 사용자 컴퓨터의 보안 상태 모니터링
침투 및 속임수
..
데이터는 아주 작은 단위의 프레임으로 네트워크에서 전송되며, 프레임은 네트워크 드라이버라는 특정 프로그램에 의해 형성됩니다. 통과 네트워크 카드는 데이터를 네트워크 케이블로 보내고, 네트워크 케이블을 통해 대상 시스템에 도달하며 대상 시스템의 한쪽 끝에서 역방향 프로세스를 수행합니다. 수신 시스템의 이더넷은 이러한 프레임을 캡처하고 운영 체제에 프레임이 도착했음을 알리고 저장합니다. 이 전송 및 수신 프로세스 중에 패킷 캡처 도구(스니퍼)를 사용하여 프런트 엔드 개발자는 일반적으로 애플리케이션 계층에서 HTTP/HTTPS 패킷을 캡처할 수 있습니다. 帧的单位传输的，帧通过特定的称为网络驱动程序的程序进行成型，然后通过网卡发送到网线上，通过网线到达目的机器，在目的机器的一端执行相反的过程。接收端机器的以太网捕获到这些帧，并告诉操作系统帧已到达，然后对其进行存储。在这个传输和接收的过程，就可以使用抓包工具（Sniffers）进行抓包，作为前端开发者，通常是抓取应用层的 HTTP/HTTPS 的包。
HTTP/HTTPS 是应用层使用的通信协议，常见的应用层体系结构是客户端-服务器体系。
对运行在不同端系统上的客户端程序和服务端程序是如何互相通信的么？实际上，在操作系统上的术语中，进行通信的实际上是进程而不是程序，一个进程可以被认为是运行在端系统中的一个程序。
在 web 应用程序中，一个客户浏览器进程与一台服务器进程进行会话交换报文。
浏览器进程需要知道接收进程的主机地址，以及定义在目的主机中的接收进程的标识符，也就是目的端口。
多数应用程序由通信进程对组成，每对中的两个进程互相发送报文。进程通过一个称为套接字的软件接口向网络发送报文和从网络接收报文。
进程可以类比一座房子，而它的套接字可以是它的门，套接字是应用层与运输层之间的端口。
知道了两个进程的通信流程，我们要怎么抓包呢？举一个生活中的例子，小明暗恋小雯，于是他写了一封情书，但他有点害羞，找了小雯的好朋友小花帮忙传递情书。这个时候，小花可以负责小雯与小明之间的情书传递，作为中间人，她可以偷偷查看他们的情书内容。
思路就是设置一个中间人进程负责抓包，每次目标进程之间的会话都先与中间人进程通信，再进行转发。
在 http 标准中，没有对通信端身份验证的标准。对于服务器来说，它接收的 HTTP 请求报文只要格式符合规范，就发送响应报文。
对于客户端来说也是如此，它无法校验服务器的身份，比如它连接的 http://www.jecyu.com 的主机，但由于中间节点的存在，最终连接的可能是 http://www.jerry.com
서로 다른 시스템에서 실행되는 클라이언트 프로그램과 서버 프로그램은 어떻게 서로 통신하나요? 실제로 운영 체제 측면에서 실제로 통신하는 것은 프로그램이 아닌 프로세스입니다. 프로세스는 최종 시스템에서 실행되는 프로그램으로 간주될 수 있습니다.
소켓은 애플리케이션 계층과 전송 계층 사이의 포트입니다. 🎜🎜
🎜🎜알아주세요 두 프로세스 간의 통신 프로세스를 이해한 후 패킷을 어떻게 캡처합니까? 인생의 예를 들자면 샤오밍은 샤오웬을 짝사랑해서 러브레터를 썼지만 조금 수줍어하며 샤오웬의 친한 친구 샤오화에게 러브레터 전달을 도와달라고 부탁했다. 이때 Xiaohua는 Xiaowen과 Xiaoming 사이의 러브레터 전달을 담당할 수 있으며 중개자로서 그들의 러브레터 내용을 비밀리에 볼 수 있습니다. 🎜🎜패킷을 캡처하기 위해 중개자 프로세스를 설정하는 것이 아이디어입니다. 대상 프로세스 간의 각 세션은 먼저 중개자 프로세스와 통신한 다음 이를 전달합니다. 🎜🎜
🎜http://www.jecyu.com에 연결하는 호스트 등 서버의 신원을 확인할 수는 없지만 중간 노드, 최종적으로 연결되는 것은 http://www.jerry.com의 호스트일 수 있습니다. 🎜🎜따라서 HTTP 패킷 캡처의 경우 너무 많은 처리를 할 필요가 없습니다. 중개자가 클라이언트와 서버의 데이터 패킷 전달을 담당하도록 하면 됩니다. 🎜🎜🎜1.2.2 HTTPS 패킷 캡처 원리🎜🎜🎜HTTP는 일반 텍스트 전송이므로 중간자 공격에 취약하고 안전하지 않습니다. 🎜HTTPS 의미 체계는 여전히 HTTP이지만 HTTP 프로토콜 스택의 http와 tcp 사이에 보안 계층이 삽입됩니다SSL/TSL.
보안 계층은 대칭 암호화를 사용하여 전송 데이터를 암호화하고 비대칭 암호화를 사용하여 대칭 키를 전송합니다. 이는 http 데이터가 암호화되지 않음, 신원을 확인할 수 없음, 데이터 수정이 용이하다는 세 가지 핵심 문제를 해결합니다.
HTTP + 암호화 + 인증 + 무결성 보호 = HTTPS
본인 확인 문제는 디지털 서명 기술을 이용하여 제3자 기관(CA 인증서 발급 기관)에서 관리하는 서버의 인증서를 검증함으로써 이루어지며, 인증서 생성, 인증서 저장, 인증서 업데이트, 인증서 취소 등이 포함됩니다.
random1 + 지원되는 암호화 알고리즘 세트
random2
random1 +random2를 사용하여 pre-master-secure를 생성하고 서버 공개 키 암호화를 통해 서버로 전송합니다. pre-master-secure
,을 해독한 다음 암호화 알고리즘을 사용하여 생성합니다. master-secure(대칭 암호화 키)를 클라이언트에 보낸 후
클라이언트가 생성된마지막으로
클라이언트가 보낸 인증서가 포함된 메시지를 가로채 서버인 척하고 인증서를 [클라이언트가 반환한 대칭 암호화 통신 키가 포함된 메시지]에서 중개자와 클라이언트 사이에 대칭 암호화를 위한 키를 생성합니다.
역시 클라이언트인 척 [클라이언트가 반환한 대칭암호 통신키가 포함된 메시지]를 서버 자체의 비대칭 공개키로 암호화하여 서버로 전송하고, 서버가 생성한 대칭암호키를 획득한다. .
입니다. CA 기관이 중개자에 속하지 않고, 웹 사이트에도 없는 도메인 이름 인증서를 단순히 발급하는 것은 불가능합니다. 따라서
중개자의 루트 인증서만 클라이언트의 운영 체제로 가져올 수 있습니다
앞서 배운 내용에 따라 모바일 웹 애플리케이션의 데이터 패킷을 컴퓨터를 통해 가져오려면 중개자 전략이 필요합니다.
웹 애플리케이션의 대상 서버인 것처럼 가장하여 PC 측에 서버 미들맨 프로세스를 만듭니다. 모바일 웹 애플리케이션에서 전송된 요청 데이터는 먼저 중개자를 거쳐 이를 가로채서 처리한 후 대상 서버로 전송됩니다. 그러면 대상 서버에서 보낸 데이터 패킷이 먼저 중개자를 통과한 다음 중개자가 브라우저 클라이언트에 응답합니다.
여기서 주목해야 할 점은 개인용 컴퓨터이든 휴대폰이든 인터넷 네트워크에 연결되어 있어야 하며 서로를 찾아 통신할 수 있다는 것입니다.
일반적으로 개발을 위해 개인용 컴퓨터에서 로컬로 시작된 서버 프로세스는 공용 네트워크에서 액세스할 수 없습니다. 일반적으로 개인용 컴퓨터와 휴대폰은 동일한 라우터에서 전송되는 Wi-Fi에 연결하여 통신할 수 있습니다.
구체적인 단계:
PC에서 로컬로 서버 프로세스를 시작하고 8899
휴대폰에서 동일한 LAN에 연결하고, 네트워크 프록시를 구성하고, PC의 IP 주소 및 포트 8899
이렇게 하면 휴대폰의 모든 네트워크 통신이 먼저 PC의 포트 8899로 전달되고 데이터 패킷을 분석하고 처리할 수 있습니다
예를 들어, 예를 들어, YouTube에 액세스할 때 컴퓨터는 [서버 소프트웨어]를 사용하여 성공적으로 액세스했습니다. 이때 휴대전화가 컴퓨터 IP 주소와 지정된 포트를 가리키도록 프록시를 구성하면 휴대전화에서도 YouTube에 액세스할 수 있습니다. .
Whistle은 Node.js를 기반으로 하는 크로스 플랫폼 패킷 캡처 무료 디버깅 도구입니다.
1. 완전히 크로스 플랫폼입니다. , Windows 및 기타 데스크톱 시스템을 지원하며 서버와 같은 명령줄 시스템을 지원합니다
2. 강력한 기능:
HTTP, HTTPS, SOCKS 프록시 및 역방향 프록시 역할을 지원합니다.
HTTP의 패킷 캡처 및 수정을 지원합니다. HTTPS, HTTP2, WebSocket, TCP 요청
HTTP, HTTPS, HTTP2, WebSocket, TCP 요청 재생 및 구성 지원
업스트림 프록시, PAC 스크립트, 호스트, 지연된(속도 제한) 요청 응답 설정 지원 등
지원 원격 페이지의 콘솔 로그 및 DOM 노드 보기
Node를 사용하여 플러그인 확장 기능 개발을 지원하고 독립적인 npm 패키지로도 참조할 수 있습니다
3.
whistle을 빠르게 사용하는 방법
npm i -g whistle & w2 start
w2 proxy // 设置全局代理 w2 proxy off // 关闭全局代理
http://127.0.0.1:8899/에 액세스할 수 있습니다. 브라우저를 통해 패킷 캡처, 수정 요청 등을 볼 수 있습니다. http://127.0.0.1:8899/ 查看抓包、修改请求等。
如果你不想使用全局代理，就可以安装 SwitchyOmega
SwitchyOmega 플러그인을 설치하고 필요에 따라 특정 웹사이트에 대한 휘슬 프록시를 설정할 수 있습니다. 할 일이 많습니다 공식 웹사이트 사진은 다음과 같습니다.
아래 그림은 몇 가지 구성 예입니다.
웹 페이지는 h5를 통해 로드되었습니다. 하지만 로컬에서 개발할 때는 조립 라인이나 패키지를 거쳐 매번 로컬에서 코드를 업로드하고 싶지 않습니다.
기본 앱의 요청을 로컬 서버로 프록시해야 합니다. 전제 조건은 Wi-Fi 전화와 컴퓨터가 서로 액세스할 수 있어야 한다는 것입니다. 즉, 컴퓨터가 앞서 언급한 PC 패키지를 캡처합니다.
내 웹 서버는 https 애플리케이션이기 때문에 whistle에서 제공하는 루트 인증서를 다운로드하고 수동으로 내 휴대폰으로 가져와야 합니다.
🎜HTTPS 메뉴를 클릭한 다음 휴대폰을 사용하여 QR 코드를 스캔하고 모바일 브라우저를 사용하여 열어 다운로드하고 가져오기를 설정하고 휴대폰 인증서에 대한 신뢰를 설정하세요. 🎜此时，再在手机上配置代理指向 PC 电脑的 IP和 whistle 监听的端口即可在电脑上截获数据包。
我本地webpack 启动的服务器应用访问地址为：xxx.xxx.xxx.xxx:8080
whistle 的配置规则：
# Rules # 访问首页走本地 jecyu.com/webs/short-transport http://xxx.xxx.xxx.xxx:8080?deptCode=755DL # 首页路径 # 后续的请求都使用本地代码 jecyu.com http://xxx.xxx.xxx.xxx:8080?deptCode=755DL
其中试过在原生 app 访问本地应用时出现错误“ webpack 会提示 invalid host header”，解决方案是在 devServer 配置添加即可：
devServer: {
allowedHosts: 'all',
}至此，成功让原生 app 访问PC 端本地的开发代码。
Whistle 能够通过内置的 Weinre 去实现查看移动端的 DOM 样式，配置规则如下
# 设置 weinre https://juejin.cn weinre://test
手机上重新访问 juejin.cn 网站，然后打开 weinre 可以看到如下，绿色表示远程连接成功。
可以点击 Element 查看手机上网页 DOM 结构、样式等信息。
也可以在 console 控制台中，执行代码，比如 alert ，手机应用上会显示弹框。
学会抓包是软件开发人员必须掌握的调试技能，本文先介绍抓包的原理，再介绍抓包工具 whistle 的使用，whistle 非常强大，本文只是粗略的介绍，更多的使用技巧，大家可以查看官方文档whistle 文档。
原文地址：https://juejin.cn/post/7140040425129115684
（学习视频分享：web前端）
![당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
