Perkara yang mesti dimiliki untuk orang hadapan: Penjelasan terperinci tentang prinsip penangkapan paket dan penggunaan wisel alat penangkapan paket

Selepas 3 tahun, saya kembali berhubung dengan pembangunan halaman h5 mudah alih. Kali terakhir adalah sebagai latihan pada tahun senior saya. Kali ini ia adalah pembangunan hibrid, yang melibatkan interaksi antara halaman h5 dan apl asli Halaman h5 perlu membuka keadaan log masuk dengan apl asli dan memanggil antara muka apl asli, seperti memanggil kamera asli ke. mengimbas kod QR. Berbeza dengan pembangunan program mini WeChat, WeChat menyediakan alat pembangun WeChat untuk pembangunan tempatan, yang boleh disimulasikan dan dipanggil secara tempatan Walau bagaimanapun, saya perlu membungkus fail statik setiap kali dan memuat naiknya ke pelayan untuk penyahpepijatan, yang sangat menyusahkan.

Bolehkah saya menjalankan kod tempatan apabila apl asli dimuatkan dalam talian h5? Jawapannya ialah ya. Anda boleh menggunakan alat penangkapan paket seperti wisel untuk memintas data permintaan halaman dalam talian dan kemudian bertindak balas kepada kod tempatan Artikel ini terutamanya menerangkan prinsip penangkapan paket dan penggunaan alat penangkapan paket.

1. Prinsip penangkapan paket

1.1 Apakah itu penangkapan paket?

Tangkapan paket adalah untuk memintas, menghantar semula, mengedit dan memindahkan paket data yang dihantar dan diterima semasa penghantaran rangkaian, anda boleh:

• . Analisis masalah rangkaian

• Analisis perniagaan

• Analisis aliran maklumat rangkaian

• Rangkaian data besar Risiko kewangan kawalan

• Kesan serangan yang cuba menceroboh rangkaian

• Kesan penyalahgunaan sumber rangkaian oleh pengguna dalaman dan luaran

• Kesan kesan pencerobohan rangkaian

• Pantau lalu lintas jalur lebar Internet pautan

• Pantau trafik penggunaan rangkaian (termasuk pengguna dalaman, Pengguna luaran dan sistem)

• Pantau status keselamatan Internet dan komputer pengguna

• Penembusan dan penipuan

• ...

Mengingat kembali pengetahuan rangkaian komputer, data dihantar pada rangkaian dalam unit 帧 yang sangat kecil, dan bingkai melalui program khusus yang dipanggil pemacu rangkaian Ia terbentuk , kemudian dihantar ke kabel rangkaian melalui kad rangkaian, sampai ke mesin destinasi melalui kabel rangkaian, dan proses terbalik dilakukan pada satu hujung mesin destinasi. Ethernet mesin penerima menangkap bingkai ini, memberitahu sistem pengendalian bahawa bingkai telah tiba, dan kemudian menyimpannya. Semasa proses penghantaran dan penerimaan ini, anda boleh menggunakan alat tangkapan paket (Sniffers) untuk menangkap paket Sebagai pembangun bahagian hadapan, anda biasanya menangkap paket HTTP/HTTPS pada lapisan aplikasi.

1.2 Prinsip penangkapan paket HTTP/HTTPS

HTTP/HTTPS ialah protokol komunikasi yang digunakan oleh lapisan aplikasi, aplikasi biasa sistem lapisan Seni bina adalah seni bina pelayan-pelanggan.

Bagaimanakah program klien dan program pelayan yang dijalankan pada sistem yang berbeza berkomunikasi antara satu sama lain? Malah, dalam istilah sistem pengendalian, ia sebenarnya 进程 yang berkomunikasi dan bukannya program Sesuatu proses boleh dianggap sebagai program yang berjalan pada sistem akhir.

Dalam aplikasi web, proses penyemak imbas pelanggan bertukar-tukar mesej dengan proses pelayan.

Proses penyemak imbas perlu mengetahui alamat hos proses penerimaan dan pengecam proses penerimaan yang ditakrifkan dalam hos destinasi, iaitu port destinasi.

Kebanyakan aplikasi terdiri daripada pasangan proses berkomunikasi, dengan dua proses dalam setiap pasangan menghantar mesej antara satu sama lain. Satu proses menghantar mesej kepada dan menerima mesej daripada rangkaian melalui antara muka perisian yang dipanggil soket.

Sesuatu proses boleh dibandingkan dengan rumah, dan soketnya boleh menjadi pintunya 套接字 ialah port antara lapisan aplikasi dan lapisan pengangkutan.

Sekarang kita tahu proses komunikasi antara kedua-dua proses, bagaimana kita menangkap paket? Untuk memberi contoh dalam kehidupan, Xiao Ming menyukai Xiao Wen, jadi dia menulis surat cinta, tetapi dia agak malu dan meminta rakan baik Xiao Wen, Xiao Hua untuk membantu menyampaikan surat cinta itu. Pada masa ini, Xiaohua boleh bertanggungjawab menghantar surat cinta antara Xiaowen dan Xiaoming Sebagai orang tengah, dia boleh melihat kandungan surat cinta mereka secara rahsia.

Ideanya adalah untuk menyediakan proses orang tengah untuk menangkap paket Setiap sesi antara proses sasaran mula-mula berkomunikasi dengan proses orang tengah dan kemudian memajukannya.

1.2.1 Prinsip penangkapan paket HTTP

Dalam standard http, tiada standard untuk pengesahan akhir komunikasi. Untuk pelayan, selagi format mesej permintaan HTTP yang diterima memenuhi spesifikasi, ia akan menghantar mesej respons.

Perkara yang sama berlaku untuk pelanggan Ia tidak boleh mengesahkan identiti pelayan, seperti hos http://www.jecyu.com yang disambungkannya, tetapi disebabkan kewujudan nod perantaraan, sambungan terakhir mungkin adalah. hos daripada http://www.jerry.com.

Oleh itu, untuk penangkapan paket HTTP, tidak perlu melakukan terlalu banyak pemprosesan Anda hanya perlu membiarkan orang tengah bertanggungjawab untuk memajukan paket data pelanggan dan pelayan.

1.2.2 Prinsip Tangkapan Paket HTTPS

HTTP ialah penghantaran teks yang jelas, yang terdedah kepada serangan man-in-the-middle dan tidak selamat.

Semantik HTTPS masih HTTP, tetapi lapisan keselamatan dimasukkan antara http dan tcp dalam timbunan protokol HTTP SSL/TSL.

Lapisan keselamatan menggunakan penyulitan simetri untuk menyulitkan data penghantaran dan penyulitan asimetri untuk menghantar kunci simetri untuk menyelesaikan tiga masalah: data http tidak disulitkan, identiti tidak boleh disahkan dan data adalah soalan teras yang mudah diubah suai.

Perlindungan integriti pengesahan penyulitan HTTP = HTTPS

Masalah pengesahan identiti dicapai dengan mengesahkan sijil pelayan, yang merupakan organisasi pihak ketiga (Sijil CA pihak berkuasa yang mengeluarkan) menggunakan teknologi tandatangan digital untuk mengurus , termasuk membuat sijil, menyimpan sijil, mengemas kini sijil dan membatalkan sijil.

Pelayar bersambung ke tapak web HTTPS Pelayan menghantar bukan sahaja sijil entiti pelayan, tetapi rantai sijil, tetapi tidak termasuk sijil akar akan disertakan dalam sistem pengendalian seperti Windows, Linux, macOS, Android dan iOS.

Pengesahan sijil terbahagi kepada dua langkah, pengesahan pengeluar sijil dan pengesahan sijil entiti pelayan

Pengesahan rantaian sijil:

• 1.1 Penyemak imbas memperoleh kunci awam daripada sijil peringkat atas (seperti sijil B) sijil entiti pelayan untuk mengesahkan tandatangan sijil entiti pelayan (tandatangan adalah melalui kunci persendirian organisasi CA yang ditandatangani), teruskan jika pengesahan berjaya, jika tidak pengesahan sijil gagal.

• 1.2 Penyemak imbas mendapatkan kunci awam daripada sijil peringkat atas sijil B (seperti sijil C) untuk mengesahkan tandatangan sijil B,

Teruskan jika pengesahan berjaya, jika tidak pengesahan sijil gagal.

• 1.3 Penyemak imbas secara berulang mengesahkan tandatangan setiap sijil, dan akhirnya menemui sijil akar yang ditandatangani sendiri (pengeluar dan pengguna adalah orang yang sama Memandangkan penyemak imbas telah menyepadukan sijil akar, anda). boleh mempercayai sepenuhnya kunci awam sijil akar untuk melengkapkan tandatangan akhir.

2. Pengesahan sijil entiti pelayan: sama ada maklumat nama domain yang diakses konsisten dengan sijil, tarikh, pengesahan sambungan sijil, dsb.

Setelah memahami pengesahan sijil, mari kita lihat proses komunikasi https khusus:

• Yang pertama ialah jabat tangan tiga hala tcp untuk mewujudkan sambungan

• Kemudian proses jabat tangan penyulitan asimetri

• pelanggan menghantar nombor rawakrawak1Set algoritma penyulitan yang disokong

• pelayan menerima maklumat dan mengembalikan sijil algoritma penyulitan yang dipilih (termasuk kunci S_public) random2

• klien mengesahkan kesahihan sijil dan penggunaan random1 rawak2 menjana pra-master-secure dan menghantarnya ke pelayan melalui pelayan penyulitan kunci awam

• pelayan menerima Kepada pra-master-secure, gunakan S_private key untuk menyahsulit pra-master-secure mengikut algoritma yang dipersetujui,

• Kemudian gunakan algoritma penyulitan untuk menjana master-secure (kunci penyulitan simetri), dan kemudian hantar kepada klien

• klien menerima master-secure yang dihasilkan, penghantaran kunci penyulitan simetri selesai

• Akhir sekali, anda boleh menggunakan master-secure untuk simetri data sebenar penghantaran penyulitan.

Jika orang tengah ingin menangkap paket, dia perlu berbuat demikian sebelum komunikasi disulitkan HTTPS:

• Memintas sijil yang dihantar oleh pelanggan termasuk mesej sijil, berpura-pura menjadi pelayan, menghantar sijilnya sendiri kepada pelanggan, dan kemudian mendapatkan [mesej yang mengandungi kunci komunikasi penyulitan simetri yang dikembalikan oleh klien] untuk menjana kunci penyulitan simetri antara orang tengah dan pelanggan.

• Juga berpura-pura menjadi pelanggan, menyulitkannya dengan kunci awam asimetri pelayan sendiri [mesej yang dikembalikan oleh klien yang mengandungi kunci komunikasi penyulitan simetri] dan menghantarnya ke pelayan untuk mendapatkan kunci penyulitan simetri perkhidmatan yang dihasilkan pada penghujungnya.

• Dengan cara ini, komunikasi yang disulitkan diwujudkan, dan orang tengah memperoleh kunci data komunikasi dan boleh melihat dan mengubah suai mesej komunikasi HTTPS.

• Di sini, pelanggan berkomunikasi dengan orang tengah, dan orang tengah berkomunikasi dengan pelayan, dan sambungan yang disulitkan HTTPS biasanya diwujudkan.

Salah satu langkah yang paling penting ialah pengesahan sijil akar penyemak imbas Adalah mustahil untuk agensi CA hanya mengeluarkan ia kepada perantara. Sijil nama domain yang bukan miliknya tidak wujud dalam sistem pengendalian pelanggan oleh itu hanya boleh mengimport sijil akar orang tengah ke dalam sistem pengendalian pelanggan untuk melengkapkan pengesahan. sijil orang tengah apabila mewujudkan komunikasi yang disulitkan.

1.3 Cara menangkap paket telefon mudah alih pada komputer

Jika anda ingin mendapatkan paket data aplikasi web mudah alih melalui komputer, mengikut apa yang telah anda pelajari sebelum ini, anda memerlukan strategi orang tengah.

Tubuhkan proses orang tengah pelayan di bahagian PC, berpura-pura menjadi pelayan sasaran aplikasi web. Data permintaan yang dihantar oleh aplikasi web mudah alih mula-mula melalui orang tengah, yang memintas dan memprosesnya dan kemudian menghantarnya ke pelayan sasaran. Sebaliknya, paket data yang dihantar oleh pelayan sasaran mula-mula melalui orang tengah, dan kemudian orang tengah bertindak balas kepada klien penyemak imbas.

Apa yang perlu diperhatikan di sini ialah sama ada komputer peribadi atau telefon bimbit, ia perlu disambungkan ke rangkaian Internet dan boleh mencari satu sama lain untuk mewujudkan komunikasi.

Secara umumnya, untuk pembangunan, proses pelayan yang dimulakan secara setempat pada komputer peribadi tidak boleh diakses pada rangkaian awam. Secara amnya, ia adalah LAN wayarles Komputer peribadi dan telefon mudah alih boleh berkomunikasi antara satu sama lain dengan menyambung ke Wi-Fi yang dihantar oleh penghala yang sama.

Langkah khusus:

• Mulakan proses pelayan secara setempat pada PC dan dengarkan port seperti 8899

• Sambung ke LAN yang sama pada telefon mudah alih, konfigurasikan proksi rangkaian, tuding ke alamat IP PC dan port 8899

• Dengan cara ini, semua komunikasi rangkaian pada telefon mudah alih akan disekat Mula-mula majukannya ke port 8899 pada PC, dan kemudian paket data boleh dianalisis dan diproses

Ambil akses ke youtuBe sebagai contoh , sebagai contoh, komputer telah berjaya diakses menggunakan [perisian pelayan]. Pada masa ini, selagi konfigurasi telefon bimbit Proksi menghala ke alamat IP komputer dan port yang ditentukan, dan telefon mudah alih juga boleh mengakses youtube.

2. Wisel alat penangkapan paket

2.1 Apa itu wisel

Wisel ialah penangkapan paket silang platform berdasarkan Alat penyahpepijatan Percuma Node, ciri utamanya:

1 Merentasi platform sepenuhnya: menyokong sistem desktop seperti Mac dan Windows, dan menyokong sistem baris arahan seperti pelayan

2.

• Menyokong bertindak sebagai proksi HTTP, HTTPS, SOCKS dan proksi terbalik

• Menyokong penangkapan paket dan pengubahsuaian HTTP, HTTPS, HTTP2, WebSocket, Permintaan TCP

• Menyokong memainkan semula dan membina permintaan HTTP, HTTPS, HTTP2, WebSocket dan TCP

• Menyokong tetapan proksi huluan, skrip PAC, Hos , kelewatan (terhad Cepat) respons permintaan, dsb.

• Menyokong melihat log konsol dan nod DOM halaman jauh

• Sokongan menggunakan Nod untuk membangunkan fungsi sambungan pemalam, dan juga boleh digunakan sebagai rujukan pakej npm Bebas

3 ubah suai permintaan terus melalui penyemak imbas

• Semua operasi pengubahsuaian boleh dilaksanakan melalui konfigurasi (serupa dengan Hos sistem), dan pengurusan kumpulan sokongan

• Projek boleh membawa peraturan proksi mereka sendiri dan mengkonfigurasinya kepada proksi Whistle setempat dengan satu klik Anda juga boleh memudahkan operasi melalui pemalam tersuai

• Cara menggunakan wisel dengan cepat<.>

Pasang nod dahulu, adalah disyorkan untuk menggunakan pengurusan nvm

• Pasang wisel secara global

• Selepas pemasangan, anda boleh menetapkan proksi global pada komputer anda Port proksi ialah 8899.

Anda boleh mengakses

npm i -g whistle & w2 start

melalui pelayar anda untuk melihat tangkapan paket, mengubah suai permintaan. dll.

w2 proxy // 设置全局代理

w2 proxy off // 关闭全局代理

http://127.0.0.1:8899/Jika anda tidak mahu menggunakan proksi global, anda boleh memasang pemalam

dan tetapkan proksi wisel untuk tapak web tertentu mengikut keperluan.

Pilih Proksi WiselSwitchyOmega

Tetapkan Proksi Wisel

2.2 Perkara yang anda boleh lakukan dengan wisel

Terdapat banyak perkara yang boleh anda lakukan dengan wisel, berikut adalah laman web rasmi gambar:

Beberapa contoh konfigurasi ditunjukkan di bawah:

3

3.1 Apl asli memuatkan pembangunan kod tempatan PC

Pada apl asli, halaman web telah dimuatkan melalui nama domain h5, tetapi apabila membangun secara tempatan, saya tidak tidak mahu melalui baris pemasangan atau pakej tempatan dan memuat naik kod setiap kali.

Anda perlu membuat proksi permintaan apl asli ke pelayan tempatan Prasyaratnya ialah telefon wifi dan komputer boleh mengakses satu sama lain, iaitu komputer menangkap pakej pc yang disebutkan tadi. Oleh kerana pelayan web saya ialah aplikasi https, saya perlu memuat turun sijil akar yang disediakan oleh wisel dan mengimportnya ke telefon saya secara manual.

Klik pada menu HTTPS, kemudian gunakan telefon mudah alih anda untuk mengimbas kod QR, gunakan penyemak imbas mudah alih anda untuk membukanya untuk memuat turun, menyediakan import dan menetapkan kepercayaan pada sijil telefon mudah alih.

此时，再在手机上配置代理指向 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 端本地的开发代码。

3.2 查看移动端的 DOM 样式

Whistle 能够通过内置的 Weinre 去实现查看移动端的 DOM 样式，配置规则如下

# 设置 weinre

https://juejin.cn weinre://test

手机上重新访问 juejin.cn 网站，然后打开 weinre 可以看到如下，绿色表示远程连接成功。

可以点击 Element 查看手机上网页 DOM 结构、样式等信息。

也可以在 console 控制台中，执行代码，比如 alert ，手机应用上会显示弹框。

4. 总结

学会抓包是软件开发人员必须掌握的调试技能，本文先介绍抓包的原理，再介绍抓包工具 whistle 的使用，whistle 非常强大，本文只是粗略的介绍，更多的使用技巧，大家可以查看官方文档whistle 文档。

参考资料

• 扯一扯HTTPS单向认证、双向认证、抓包原理、反抓包策略

• 网络抓包原理及Fiddler的使用

• 前端应该知道的web调试工具——whistle

• 移动端调试痛点？——送你五款前端开发利器

• whistle工具全程入门

• Whistle 配置 https 抓包

• 解决webpack5 invalid host Header问题

• whistle localhost不能代理

• Proxying to localhost no longer works

• 使用线上域名访问本地代码调试——whistle代理

• wiki数据包分析器

原文地址：https://juejin.cn/post/7140040425129115684

（学习视频分享：web前端）