Disable URL hash encoding or whitelist some symbols to make VueRouter work fine with Telegram WebApps
Raxort opened this issue · comments
What problem is this solving
I am building a Telegram WebApp with Nuxt and I am faced with an issue. When you open the app in Telegram, telegram adds special params to the URL so the app can communicate with TG. These params are added as website hash and the URL of the webapp looks like this
https://yourapp.com/#tgWebAppData=query_id%3DAAGZbY...
But after I refresh the WebApp in Telegram the URL becomes like this:
https://yourapp.com/#tgWebAppData=query_id=AAGZbY...
The hash param in the URL gets encoded and this completely breaks the connection between the app and TG because now Telegram WebApp JS file https://telegram.org/js/telegram-web-app.js can’t read the params correctly.
How can I disable URL encoding for symbols like %3D and some others to make the WebApp work correctly? It’s a serious issue because Telegram WebApps are becoming more popular. It would be great if we could whitelist some symbols we want. Flexibility is always great.
Proposed solution
Disable URL hash encoding completely
Or add the ability/option to whitelist some symbols so they are not encoded.
Or allow developers to change encoding rules for URLs.
This will make VueRouter work fine with Telegram WebApps.
Describe alternatives you've considered
No response
It's interesting they parse the URL like this. I would consider this a Telegram bug because you are not supposed to encode the = character on the hash part of the URL.
From Vue Router perspective, this normalization is really useful to keep consistent behavior. You can however already get out of this behavior by using the Memory history (createMemoryHistory()). It seems like the appropriate history for a Telegram app. If you want to have a URL, you can always create a custom history that matches your need
Sorry, I didn't provide full request. They are not encoding all the = characters. Only for some parts of the URL. Here is full hash:
Before:
#tgWebAppData=query_id%3DAAEK1wFcAAAAAArXAVwVu0Dq%26user%3D%257B%2522id%2522%253A1543624458%252C%2522first_name%2522%253A%2522Deptyped%2522%252C%2522last_name%2522%253A%2522%2522%252C%2522username%2522%253A%2522deptyped%2522%252C%2522language_code%2522%253A%2522en%2522%252C%2522allows_write_to_pm%2522%253Atrue%257D%26auth_date%3D1709286347%26hash%3D94acc4d7e17a1d33a47ec5624aef8ebec1d6664e2b37107ddcc4a3fb840f62a9&tgWebAppVersion=7.0&tgWebAppPlatform=weba&tgWebAppThemeParams=%7B%22bg_color%22%3A%22%23212121%22%2C%22text_color%22%3A%22%23ffffff%22%2C%22hint_color%22%3A%22%23aaaaaa%22%2C%22link_color%22%3A%22%238774e1%22%2C%22button_color%22%3A%22%238774e1%22%2C%22button_text_color%22%3A%22%23ffffff%22%2C%22secondary_bg_color%22%3A%22%230f0f0f%22%2C%22header_bg_color%22%3A%22%23212121%22%2C%22accent_text_color%22%3A%22%238774e1%22%2C%22section_bg_color%22%3A%22%23212121%22%2C%22section_header_text_color%22%3A%22%23aaaaaa%22%2C%22subtitle_text_color%22%3A%22%23aaaaaa%22%2C%22destructive_text_color%22%3A%22%23e53935%22%7D
After VueRouter's encoding
#tgWebAppData=query_id=AAEK1wFcAAAAAArXAVwVu0Dq&user={%22id%22:1543624458,%22first_name%22:%22Deptyped%22,%22last_name%22:%22%22,%22username%22:%22deptyped%22,%22language_code%22:%22en%22,%22allows_write_to_pm%22:true}&auth_date=1709286347&hash=94acc4d7e17a1d33a47ec5624aef8ebec1d6664e2b37107ddcc4a3fb840f62a9&tgWebAppVersion=7.0&tgWebAppPlatform=weba&tgWebAppThemeParams={%22bg_color%22:%22#212121%22,%22text_color%22:%22#ffffff%22,%22hint_color%22:%22#aaaaaa%22,%22link_color%22:%22#8774e1%22,%22button_color%22:%22#8774e1%22,%22button_text_color%22:%22#ffffff%22,%22secondary_bg_color%22:%22#0f0f0f%22,%22header_bg_color%22:%22#212121%22,%22accent_text_color%22:%22#8774e1%22,%22section_bg_color%22:%22#212121%22,%22section_header_text_color%22:%22#aaaaaa%22,%22subtitle_text_color%22:%22#aaaaaa%22,%22destructive_text_color%22:%22#e53935%22}
So you have a better understanding what TG does.