How to encrypt/decrypt API data with express and nuxtjs to prevent scraping?

Question

I want to encrypt my API data so that the user can't see it in the network tab or as plaintext in something like the window.__nuxt__ object.

The way I'm doing this now:

1. encrypt data in back-end with a secret string (like a password)
2. send encrypted data to front-end
3. decrypt it on client-side (using the same password as in the back-end)

Here is the problem: The function that decrypts my data can be found by looking through the bundled JavaScript files in the Browser.

Although the function is obfuscated, it is possible the reverse engineer it. And since the password is stored within the function (it has to be, right? Since I don't have the process.env variables on the client-side) everyone can(theoretically) scrape my data.

What is the best way to prevent this?

I know that the data is visible eventually in the browser. I just don't want it the be visible in plaintext.

I'm using express in the back-end and NuxtJS in the front-end by the way.

Answer 1

There's no way to prevent this. All you can do is make it more difficult.

Ultimately, if the data is visible to the user in the browser, you can just get it from the DOM in memory. All the code to transform the encrypted data into the original information must be supplied if you need the user to see the data.

You can obfuscate the code, but your attacker doesn't even need to reverse engineer it to get the data, they just need to run it.