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.
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.
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.
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.
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.
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.
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.
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
Pasang nod dahulu, adalah disyorkan untuk menggunakan pengurusan nvm
Selepas pemasangan, anda boleh menetapkan proksi global pada komputer anda Port proksi ialah 8899.
npm i -g whistle & w2 startmelalui 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
Pilih Proksi WiselSwitchyOmega
Tetapkan Proksi Wisel
Beberapa contoh konfigurasi ditunjukkan di bawah:
3 3.1 Apl asli memuatkan pembangunan kod tempatan PCKlik 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 端本地的开发代码。
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前端)