调试微信公众号网页

(This blog is written in Chinese as it’s about WeChat and its intended readers are mostly Chinese. Please feel free to use Google Translate if you don’t understand Chinese.) 有时我们会想要调试一个微信公众号网页项目(例如,用户在微信中打开了某网页,授权登入完成后,能以已登入状态看到一些信息;我们想打开DevTools来调试这个登入后的网页)。 官方给出的调试方法是:微信开发者工具。这个工具其实不错,可以在电脑端模拟微信浏览器的环境,微信授权登入接口也有自己的实现。唯一的问题是,如果你想调试一个别人开发的网页,这个工具会报错: 无法获取用户身份 登录的微信号未绑定为公众号 (…) 的网页开发者,无法使用 Oauth 授权登录获取用户身 份,请查看文档并完成绑定 文档写道: 出于以下两点原因,我们要求调试微信网页授权,必须开发者微信号与公众号建立绑定关系: … 避免被有心人士利用开发者工具作为自动化工具对任意的公众号网页 “薅羊毛” 那我们真的没有办法了吗?实际上不是的。本文介绍一种调试微信网页的方法:手机设置代理服务器到电脑 → 使用CharlesProxy做中间人攻击 → 注入Vorlon.JS。 安装CharlesProxy CharlesProxy 是一款老牌"Web Debugging Proxy"。 它是收费的,但我推荐使用它,如果不想付费,也有不少其它不用付费的方案。 我们用CharlesProxy的目的是为了做"中间人攻击",修改网页内容,来让我们注入调试相关代码变得可能。 CharlesProxy可以简单地给手机安装CA证书,然后解密、篡改SSL保护的网页内容。 CharlesProxy有Rewrite功能,可以自动做内容篡改。 总结:CharlesProxy很方便可靠,这是我推荐CharlesProxy的原因。 手机设置代理服务器到电脑 在手机上设置代理服务器到电脑,这样手机上的所有流量都会经过电脑。 设置方法不再赘述,不同操作系统手机设置方式不一样。 把代理设置到电脑IP的8888端口(CharlesProxy的默认端口)。 手机安装CA证书 现在要调试的网页大多是https的,有SSL保护,Charles无法直接解密/篡改其内容,所以我们需要安装CharlesProxy的CA证书到手机上。 信任了CA证书之后,就可以完成对SSL的解密和篡改,俗称中间人攻击了。 在CharlesProxy中,Enable SSL Proxying CharlesProxy并不是对所有SSL网页都默认开启中间人攻击,默认是关闭的,意味着CharlesProxy会走CONNECT请求,让客户端和对面SSL服务器建立透明的TCP连接。 我们在CharlesProxy的请求列表里,找到要调试的网站域名,右键,选择"Enable SSL Proxying"。在手机端刷新网页,就能够看见,CharlesProxy可以解密网页内容了。...

April 12, 2023 · Ke Wang

A good way to show modals in React

Is it only me who think that the Modal APIs provided by popular frameworks such as antd (https://ant.design/components/modal/) are awkward and cumbersome to use? It’s just not intuitive (like confirm() or prompt('input a number')), and how do you show multiple instances of a same type of modal? I have a trick to display modals in an imperative way. import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import { Button, Modal } from 'antd'; /* class Modal extends React....

October 2, 2021 · Ke Wang

Visualizing hierarchical data

At work, my team managed 10,000+ machines, distributed across regions, AZs, clusters. We wanted to visualize what version a certain software is running across all the machines we manage. I implemented a visualization using foamtree, however, it is a paid component, and it’s not cheap. So, when I got some free time, I decided to implement a new treebox visualization component, from scratch. https://github.com/KevinWang15/treebox (to be continued)

May 24, 2021 · Ke Wang