InitData doesn't return correct values after page Refresh

[deptyped]

InitData doesn't return correct values after page Refresh

[IAMSDR]

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 :)

[IAMSDR]

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 :(

[Raxort]

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.

[Raxort]

Ok, got you. I will be digging into the issue when I have time. Thanks for assistance!

[deptyped]

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.

[deptyped]

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?

[Raxort]

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:

https://imgur.com/uX9s5iM

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.

[Raxort]

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...

[Raxort]

Forgot to mention the Telegram versions:

Latest version of TG on Windows (4.15).
Latest on iPhone.

[deptyped]

Can't reproduce on Windows either 🤔
I'm trying with this code: https://codesandbox.io/p/devbox/vue-tg-18-rmhmhz

[Raxort]

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.

[NikitaVelixJob]

Hello, any news on that?

[Raxort]

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.

[NikitaVelixJob]

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;

[NikitaVelixJob]

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 💚

[NikitaVelixJob]

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?