skip to Main Content

I try to rewrite validation code to JS + cryptoJS:

var secret_key = CryptoJS.HmacSHA256(bot.token, "WebAppData");
var key = CryptoJS.HmacSHA256(initData, secret_key)
// initData it is - Telegram.WebApp.initData
if(key==hash){
    // validated
}
    
// I have also tried converting 'key' to hex:
key = key.toString(CryptoJS.enc.Hex);
key == hash // always false too

But my validation is always false.

What fixes are needed?

3

Answers


  1. Solution

    This is a ported version of the Python solution found in Aiogram

    import HmacSHA256 from "crypto-js/hmac-sha256";
    import Hex from "crypto-js/enc-hex";
    
    function checkWebAppSignature(token, initData) {
      // It is not clear from the documentation weather is URL
      // escaped or not, maybe you will need to uncomment this
      // initData = decodeURIComponent(initData)
      // Parse URL Query
      const q = new URLSearchParams(initData);
      // Extract the hash
      const hash = q.get("hash");
    
      // Re encode in accordance to the documentation. Remember
      // to remove hash before.
      q.delete("hash");
      const v = Array.from(q.entries());
      v.sort(([aN, aV], [bN, bV]) => aN.localeCompare(bN));
      const data_chack_string = v.map(([n, v]) => `${n}=${v}`).join("n");
    
      // Perform the algorithm provided with the documentation
      var secret_key = HmacSHA256(token, "WebAppData").toString(Hex);
      var key = HmacSHA256(data_chack_string, secret_key).toString(Hex);
    
      return key === hash;
    }
    

    Here is a Sandbox

    Clarifying the documentation

    Honestly, the documentation is quite twisted and can be improved. But there are some hints to what may be going on.

    1) Format

    To validate data received via the Web App, one should send the data from the Telegram.WebApp.initData field to the bot’s backend. The data is a query string, which is composed of a series of field-value pairs.

    Data-check-string is a chain of all received fields, sorted alphabetically, in the format key= with a line feed character (‘n’, 0x0A) used as separator …

    So initData is a URL Query name=One&surname=Two where the expected data_check_string should be new line separated name=Onensurname=Two

    2) Hash is included

    This is not explicated in the documentation, but initData includes the hash in the form name=One&surname=Two&...&hash=.... Being almost impossible to include the hash of the document in the document itself hints at the fact that the string initData is not the one being hashed. In Aiogram you find a confirmation of this.

    Login or Signup to reply.
  2. You need to exclude hash parameter from initData before computing hash for comparison and order other parameters in alphabetical order. Also you do need to convert key(computed hash to hex), cause hash present in initData from telegram is in hex format.

    Login or Signup to reply.
  3. Maybe this is not exactly what you need, but you can still check initData in PHP. Here I found a great solution TgWebValid

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search