Published on

Say ByeBye👋 to the ETA feature in my WeChat miniprogram

Authors
  • avatar
    Name
    Adam Liu
    Twitter

Background

Last year, I have released a WeChat miniprogram which is an alternative to the KMB 1933 APP.

Why I still spent my time making this mini-program? I have below pain points when using the KMB APP, the points were based on the KMB 1933 app version released around min-2019.

  1. The full-screen ads keep popping up on my iPhone.
  2. The app was so slow to open and crash occasionally.
  3. I just care about some buss routes and stops, don't give me too much info I don't need.

My solution

My miniprogram have these three key features to solve the pain points:

  1. Home screen: Show ETA of the bookmarked bus stops(Swipe left to delete the bookmark).
  2. Second screen: Show nearby stops ETA (Swipe left the row to bookmark the stop).
  3. Third screen: Search bus routes(Bus announces, schedules, and map views of the routes)
null

miniprogram screenshots

Welcome to have a trial, just scan this QRCode by WeChat:

null

The miniprogram QR Code

The ETA features

EAT(Estimated Arrival Time) is the key info of the app. There're two ways we can try to get the ETA info:

  1. KMB official Web site: https://search.kmb.hk/KMBWebSite/index.aspx?lang=tc
  2. KMB 1933 APP

My miniprogram is using the KMB official Website as the data source.

null

KMB official website site ETA feature screenshoot.

KMB official Website ETA feature is a pure front-end function without any authentication. You can easily find out the JS source code to inspect the logic of how it integrated with the API. I can tell you there's no fanny encryption stuff.

However, the KMB official website has tried many ways to protect the API endpoint from abuse. The recent key improvement is KMB introduced Google reCAPTCHA to protect the API.

null

The new captcha key for invoking the ETA API.

The captcha key will be generated when the user open the KMB website and bound with the KMB domain (I guess it will bind with the user IP as well). So I the captcha key one-off and can't be reused.

I created a codesandbox demo to try the captcha.

https://codesandbox.io/embed/friendly-cartwright-dtp23?fontsize=14&hidenavigation=1&theme=dark

The sandbox site is using my own Google reCAPTCHA. If you replace with KMB key 6LdiOd8ZAAAAACukKcCRmmf_Ll2hgSIVya22YR99, you will get the error of "ERROR for site owner: Invalid domain for site key".

Possible solutions

Since the KMB website is a pure front-end app, one possible solution is we can simulate the browser in node.js runtime to get the google captcha token then invoke the ETA API. The headerless browser can be done by puppeteer or PhantomJS.

To run a browser will be a huge overhead or it may require some daemon service to accelerate performance, so some serverless env such lambda or cloud function maybe not suitable to host this kind of service. (My miniprogram API is hosted by WeChat Cloud Function).

Another solution is to hack the KMB 1933 APP. For example, using some proxy apps such as Charles to monitor the APP traffic with backend API, hopefully, you can get the dedicated or more well-organized API of how the APP gets the ETA data.

Usually, the APP will use HTTPS protocol to secure communication. The good news is that Charles can use man-in-the-middle HTTPS proxy so that you're able to view in plain text the communication between web browser and SSL web server. The bad news is that if the APP enables the HTTP Public Key Pinning (HPKP) the Charles will be useless for the proxy.

Thank you for reading.