Comments (16)
Hai, i am able to solve this by changing some lines in telegram-web-app.js
// from line 88 to 102
function urlParseQueryString(queryString) {
var params = {};
if (!queryString.length) {
return params;
}
var queryStringParams = []
if (queryString.indexOf('&tg') < 0) {
queryStringParams = queryString.split('&');
}
else {
queryStringParams = queryString.split(/&(?=tg)/);
}
var i, param, paramName, paramValue;
for (i = 0; i < queryStringParams.length; i++) {
param = queryStringParams[i].split(/=(.*)/s);
paramName = urlSafeDecode(param[0]);
paramValue = param[1] == null ? null : urlSafeDecode(param[1]);
params[paramName] = paramValue;
}
return params;
}
check above function, i used regex to split the string correctly and it worked.
i know it's not a good practice but a Temporary solution
:)
After editing, u can place this telegram-web-app.js
in public folder and change the head script tag to
script: [
{
src: "/telegram-web-app.js",
defer: true,
},
],
that's it :)
from vue-telegram.
Yes, it's okay to self-host the telegram-web-app.js
, and I didn't receive any warnings or errors, so it seems it's not checking the code.
No, it didn't lead to any security issues, but it would be better to validate the webAppData as the documentation suggests.
However, it's not a complete solution :(
from vue-telegram.
That's a much more complicated problem than I thought. Thanks for digging. I will think about how to fix. If I find a fix, I will comment.
from vue-telegram.
Ok, got you. I will be digging into the issue when I have time. Thanks for assistance!
from vue-telegram.
Now I was able to reproduce the problem. I found out that something modifies the hash when the page loads. On the initial load, the hash contains the following:
#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
Later, something (most likely Nuxt or vue-router, I'm not sure, maybe some sanitizer) changes the hash to:
#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}
After reloading the page, the modified hash remains, which breaks the parsing of hash in telegram-web-app.js
and leads to this problem.
from vue-telegram.
Hi. Works correctly for me on Telegram Android. Can you reproduce it using window.Telegram.WebApp.initData
directly?
Also, please provide more information. What Telegram client and version? Can you reproduce it on other clients? Which way do you launch the web app, from a keyboard button, from an inline button, from the bot menu button, via inline mode, from a direct link?
from vue-telegram.
Hi. Works correctly for me on Telegram Android. Can you reproduce it using window.Telegram.WebApp.initData directly?
Just tried with this code in Nuxt 3:
onMounted(() => nextTick(()=>{
console.log('-- InitData --')
console.log(window.Telegram.WebApp.initData)
console.log('---')
}))
Also tried with
import { useWebApp } from 'vue-tg'
Both show the same initData result after refreshing. You can see it on screenshot below:
FYI: Setting WebApp header color and background color works fine. But initData doesn't work.
I am starting the app with Inline Button and it works fine on the first launch. The problem occurs only when I refresh the app from the "Refresh" button in the header.
from vue-telegram.
I temporarily resolved the issue by writing initData value into cookie on first launch and using this cookie after relaunch. But I believe it's not the best solution...
from vue-telegram.
Forgot to mention the Telegram versions:
Latest version of TG on Windows (4.15).
Latest on iPhone.
from vue-telegram.
Can't reproduce on Windows either 🤔
I'm trying with this code: https://codesandbox.io/p/devbox/vue-tg-18-rmhmhz
from vue-telegram.
Can't reproduce on Windows either 🤔 I'm trying with this code: https://codesandbox.io/p/devbox/vue-tg-18-rmhmhz
I was able to reproduce. Nuxt uses "pages" directory for creating routes.
Add "pages" directory into the project folder and add for example an empty index.vue page into "pages"
<template>
<div>
</div>
</template>
<script setup>
</script>
<style scoped>
</style>
Without pages directory everything works fine. But when I add this directory the Refresh stops working. I don't know why. Maybe you can find a problem.
BTW, Nuxt uses vue-router under the hood, so you don't need to install it with Nuxt3.
from vue-telegram.
Hello, any news on that?
from vue-telegram.
Hello, any news on that?
I asked VueRouter team to disable hash encoding
vuejs/router#2155
They said they are not planning to do this.
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
So we have what we have.
from vue-telegram.
Hello, any news on that?
I asked VueRouter team to disable hash encoding vuejs/router#2155
They said they are not planning to do this.
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
So we have what we have.
Eh... Thanks Raxort, appreciate. I am using this way. Could you share with me how you use it in your application?
const initDataUnsafe = useLocalStorage('initDataUnsafe', {
auth_date: null,
hash: null,
can_send_after: null,
chat: null,
chat_instance: null,
chat_type: null,
query_id: null,
receiver: null,
start_param: null,
user: null,
});
if (useWebApp().initDataUnsafe.query_id)
initDataUnsafe.value = useWebApp().initDataUnsafe;
from vue-telegram.
That's a much more complicated problem than I thought. Thanks for digging. I will think about how to fix. If I find a fix, I will comment.
Hello, any news on that 💚
from vue-telegram.
WOW!
Thank you so much!
Is it actually okay to use mine twa.js script in order to build telegram web app. Doesn't it check if used code the same? Can it lead to any security issues?
from vue-telegram.
Related Issues (20)
- Open mini app with Expanded Viewport HOT 4
- Is it possible to disable app close when swipe down? HOT 20
- Add `<PopupButton>` component
- Add ability to create refs for Cloud Storage
- Interactive playground for components
- Method showPopup is not supported in version 6.0 HOT 2
- Improve `<BiometricManager>` component
- canSendData not working HOT 10
- Web Site with Documentation seems doesn't work HOT 2
- Documentation is unavailable HOT 1
- [Event] closing a mini app? HOT 1
- Bot API 7.7 HOT 2
- Is there a monitoring event for this
- is Telegram Bot Api 7.7 supported? HOT 1
- [Telegram.WebApp] Changing swipes behavior is not supported in version 7.6 HOT 1
- How to update useWebAppTheme params to make them work in Nuxt3? HOT 4
- Add `<ClosingConfirmation/>` component
- Add `<ExpandedViewport/>` component
- Integrate with nuxt 3 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-telegram.