Nuxt•2mo ago

How to encrypt on the frontend without exposing the key

I need to encrypt the user's password to send to the backend (and then I will decrypt and encrypt it again with Argon2) because when I send it unencrypted in the browser's network tab, it is exposed. However, whenever I try, I always run into the problem that the key used for encryption/decryption is exposed on the frontend. If I set it as a PRIVATE ENV variable, I can only access it on the Nuxt server, which is also a problem since it will display the text/password that I want to encrypt in the request to the server. How should I do this?

9 Replies

kapa.ai•2mo ago

Hi @Wellington Capoia. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand your concern about securely handling user passwords in a Nuxt application, but I must advise against the approach you're considering. Encrypting passwords on the frontend is not a recommended security practice, and here's why: 1. Any encryption key available on the frontend can be easily compromised, as you've noticed. 2. Encrypting passwords client-side doesn't provide additional security, as the encrypted data can still be intercepted and potentially decrypted. 3. Sending passwords (encrypted or not) directly to your backend for storage is not a secure practice. Instead, here are the recommended best practices for handling user passwords in a Nuxt application: 1. Always use HTTPS to ensure that data transmitted between the client and server is encrypted in transit. 2. Send the password as plain text over HTTPS to your server. While it may appear in the network tab, this is secure as long as you're using HTTPS. 3. On the server-side, immediately hash the password using a strong, slow hashing algorithm designed for passwords, such as Argon2 (which you mentioned), bcrypt, or scrypt. Never store passwords in plain text or encrypted form. 4. Store only the hashed password in your database. If you're concerned about the password being visible in the network tab during development, remember that this is not a security issue in production as long as you're using HTTPS. For handling sensitive data securely in Nuxt, you can use the runtimeConfig feature for server-side operations. However, this should not be used for client-side encryption of passwords. Here's an example of how you might use runtimeConfig for other sensitive data:

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // can be overridden by NUXT_API_SECRET environment variable
    public: {
      apiBase: '', // can be overridden by NUXT_PUBLIC_API_BASE environment variable
    }
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // can be overridden by NUXT_API_SECRET environment variable
    public: {
      apiBase: '', // can be overridden by NUXT_PUBLIC_API_BASE environment variable
    }
  },
})

You can then access these variables server-side using the useRuntimeConfig() composable as described in the Nuxt documentation (https://nuxt.com/docs/guide/going-further/runtime-config#reading). Remember, the key to secure password handling is to hash them server-side and never store or transmit them in plain text or reversibly encrypted form. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@219448935121551370> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Wellington CapoiaOP•2mo ago

@kapa.ai How is displaying the password in plain text in the network tab not a security risk? Anyone with access to the computer could obtain the password.

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The concern you're raising is valid, but it's important to understand the context in which the password is visible in the network tab. The network tab is a feature of browser developer tools, which are typically only accessible to the user of the device and are not visible or accessible to other users on the network, or to the websites themselves. In a typical scenario, if a malicious actor has physical access to a device and is able to inspect network traffic via the browser's developer tools, the security of the password transmission is likely the least of your concerns. They could just as easily install keylogging software, take screenshots, or use other methods to capture sensitive information. That being said, it's always a good practice to ensure that devices used to access sensitive information are secure, and to log out of sessions or lock the device when not in use. In terms of network security, using HTTPS ensures that the data transmitted between the client and server is encrypted and cannot be read by anyone who might intercept the network traffic. This is the standard and recommended practice for securing data in transit. In summary, while the password may be visible in the network tab of the browser's developer tools, this is not typically a security risk. The key is to ensure that data is transmitted securely over the network (using HTTPS), that passwords are hashed server-side, and that devices used to access sensitive information are kept secure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@219448935121551370> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

manniL•2mo ago

@Wellington Capoia simply: don't

manniL•2mo ago

Talked about the whole topic (similar use cases) in https://www.youtube.com/watch?v=fcOao-dBpsI

Alexander Lichter

YouTube

Are Front-end frameworks a security vulnerability by default?

When building modern web applications, more and more people utilize front-end frameworks like Vue or React and their meta framework equivalents, namely Nuxt, Next, Sveltekit, Remix and others. But do these frameworks bring inherent security risks? We will have a look at that in this video! — More info like chapter marks coming later on 👀

manniL•2mo ago

TL;DR - you can't

Wellington CapoiaOP•2mo ago

@manniL / TheAlexLichter thank you!

Gaming

Programming

How to encrypt on the frontend without exposing the key