Secure encryption key in javascript

Question

I have searched all over the internet for the last days and not found a single example without it saying it's not safe and the same thing everywhere.

But also couldn't find cases like my use case so I had to ask it for myself.

The scenario: I have a backend which on only some of the data it sends I need some sort of extra security so other people won't be using my api publicly, I have successfully used Laravel's Crypto for encryption on backend and CryptoJs for decryption on the frontend.

So my only problem is where to store my larave's key which is used for AES encryption and decryption on frontend.

What I have already tried (or thought of):

• .env files, they get included in the bundle anyways so what's the point.
• Any obfuscation sound to be pointless.

I probably should use WebCrypto ( https://stackoverflow.com/a/24677597/10268067 ) but couldn't get anywhere with it. (I just heard of it).

I need some suggestions, even if there was a secure way of storing my encryption key, I don't think there is a way to do it directly so I have to request my api for this encryption key at some point but where? If I have a route specifically for this purpose I don't think the hackers are too stupid to find that, heck I can even find that with interception of the requests and responses!

So I basically have two problems:

1. How to request the server somehow randomly or in anyways that hackers can hardly ever find my encryption key in the requests.
2. How to save in on js side of browser securely, for instance I decided to use Secure Store for my mobile app's version of this exact problem, but on the web I'm so lost!

Answer 1

I have a backend which on only some of the data it sends I need some sort of extra security so other people won't be using my api publicly

Cryptography is not the solution for this. Big companies use API tokens and refresh tokens in order to accomplish this.

The solution you are looking for is called refresh tokens used along with the API tokens.