How to stop preventing OTP Bypass through Response Manipulation

Kalpesh Dharpure — Wed, 22 Jan 2025 12:33:00 +0000

Welcome to another blog! Today, I’ll explain how you can effectively prevent OTP bypass attacks in your application. While I’ll focus on Node.js and React.js, the same concepts can be applied in other languages and frameworks too.

Let’s dive into the techniques and best practices to secure your OTP implementation and ensure your application stays safe from such vulnerabilities.

What is OTP Bypass?

OTP (One-Time Password) bypass refers to exploiting vulnerabilities in an application to log in or gain unauthorized access without providing a valid OTP. Attackers may use invalid OTPs, expired OTPs, or manipulate API responses to bypass the OTP verification mechanism.

One of the most commonly used tools for such attacks is Burp Suite. With this tool, attackers can intercept and modify API requests and responses. For example:

A valid response can be captured from a legitimate user.
This response is then copied and used to replace the invalid response of another user by intercepting the request.
This manipulation allows attackers to bypass OTP verification, even if the OTP is incorrect or expired.

For more details on securing your application click here to know more

how to stop preventing OTP Bypass through Response Manipulation

To fix this, you should implement encryption and decryption because users or hackers can read the response and payload if they are in plain text. It is better to secure the application with encryption (you can use AES or RSA)

What if the user gets the encryption keys? Can they still bypass it?

Yes, they can still bypass the encryption. The response is the same for all users. For example, if the frontend is set to allow login when it receives a 200 status code and the message 'OTP verified successfully,' it will still be vulnerable, as the response will be the same for another user. So, what can we do?

To address this, we need to keep a record for each user, so each response is unique and valid only for that specific user. For other users, the response would be invalid.

How can we achieve this without using a database?

Let's start by coding on the client side:

First, we will encrypt the payload
Then, we will generate a 7-character UID (you can use a string of any length).
After generating the UID, we will send it in the headers with the name 'rsid.'
Call the API.
Validate the response.
The main part: Check if the 'rsid' sent to the backend matches the one sent from the client. If they match, the login is successful; otherwise, it fails

const OnSubmit = async () => {
    //encryption function to encrypt data
    let data = await AesEncrypt(form);
    let verifyobj = {
      "encdata":data
    }
    // calling makeid function
    let getid = await makeid(7);
    //sending rsid to in headers
    let config = {
      headers: {
        "rsid": getid,
      }
    }
    //calling api 
    let ApiCallverify = await axios.post("http://localhost:4000/api/verifyotp",verifyobj,config);
  //decrypting data from an api
    let decryptedData = await Aesdecrypt(ApiCallverify.data.dataenc);
    //verifying data 
    if(ApiCallverify && ApiCallverify.data.dataenc && ApiCallverify.status === 200)
    {
       //checking the rsid matching with frontend and backend
      if(decryptedData.rsid === getid)
      {
        //success 
        alert(decryptedData.message)
      }
      else{
        //fail
        alert("Invaild User")
      }
    }
    else{
      //fail
       alert(decryptedData.message)  
    }
  }

Now, let's dive into the backend.
First, we validate the request body and check if it is encrypted and if it contains the rsid in the headers. If it matches all the requirements, we move on to the next steps; otherwise, we will send a response to the client indicating invalid data.

If everything matches, we decrypt the data and check if the received payload contains all the required fields after decryption. If it does, we validate whether the OTP and the user are valid or not (I used a static example here for illustration).

If everything matches, we send the encrypted response along with the rsid that we received from the client.

// POST /verify route
app.post("/api/verifyotp", async (req, res) => {
//checking if data is proper or not 
    if(req.body && req.body.encdata && req.headers['rsid'])
    {
      //valid payload 
      //decrypting payload
     let decryptjson = await decryptData(req.body.encdata)
     req.body = decryptjson;



     const { phonenumber, otp } = req.body;
   
     // Validate input
     if (!phonenumber || !otp) {
       return res.status(400).json({ error: "Phone and OTP are required" });
     }
      //verifying otp  ( i used static creds  to show example you can use db )
       if(otp == 1234 && phonenumber == "12334567890")
       {
            //sending rsid that we recevied from client through headers and then encrypting data 
        let data= await AesEncrypt({ message: "Verification successful",rsid:req.headers['rsid']})
         //sending response to client
           return res.status(200).json({dataenc:data});
       }
       else{
                //sending rsid that we recevied from client through headers and then encrypting data 
        let data= await AesEncrypt({ message: "Verification failed",rsid:req.headers['rsid']})
          //sending response to client
        return res.status(200).json({dataenc:data});
       }
    }
    else{
      //if we didn't recevied vaild data  from client
        return res.status(400).json({ error: "invaild data" });
    }
});

Now, let's see the final output in the browser:

Valid user

the headers

success

Now, we will test for a failed or invalid user who copies the response of another user. Using Burp Suite, we will intercept the response. In this case, I'll just add a static rsid in the backend.

Finally, we have stopped OTP bypass through response manipulation.

I hope you liked my blog. Please leave a like!

Things you should handle while making a web application as a Developer

Kalpesh Dharpure — Sat, 27 Aug 2022 16:52:37 +0000

As a developer while creating apps, you don't know what will happen in the future if anything goes wrong in Application.
After getting some industry experience as a full stack developer, I noticed some issues after the deployment of web apps.
that I should know before making or deploying web apps in frontend and backend both
Let's see some of the points that I discovered or learned from some of my senior developers.

Error Handling

While creating apps, error handling is one thing that you should handle and must know Especially in server side or backend
You never know what will happen in the future in application , so you should always use the try to catch block in all of APIs or in frontend application where you call your Api's .

how to use try catch

try { //your api or anything } catch(err) { //it will throw an error console.log("error",err) }

logger in server application

Sometimes your application will get an error or the server will go down. your server should creates logs if any errors occur That will show when the error occurs, on what day and at what time, and which error it is.

example :
error occurs in your server
server will throw an error
logger will catch the error and create file of that day

for node js you can use npm packages

validation

In the front-end application, you must validate inputs or required fields.

For example, a user needs to add a mobile number in the input box, but he adds abcdef instead of 12245555.

Also, the number length must be at least ten numbers .

If he doesn't fit in the above conditions, you should show an alert message or red message that please add a valid mobile number.
You can apply this type of validation to other inputs, such as email.
Some tips
You can use a regex validator script or any package like formik or others.

but but ...

note you must also validate data in server side also

default image

For example, you are using a web application and displaying images from an API.

and the user's internet goes down, or a network problem occurs, or the API is unavailable.

The user will get something like this view in the front-end application.

How to fix this

Normally, we create an img tag like this to display an image.

<img src="your image.jpg" alt="Italian Trulli">

by using javascript or onerror
<img id="currentPhoto" src="SomeImage.jpg" onerror="this.onerror=null; this.src='Default.jpg'" alt="" width="100" height="120">

That's it. There are a lot of things to do Thanks for reading my post It's my first post, and I hope you enjoyed it.

DEV Community: Kalpesh Dharpure