Enhance Credential Generation Security Using crypto.getRandomValues()

[scottnzuk]

What features would you like to see added?

Enhance Credential Generation Security Using crypto.getRandomValues()

Description:
Currently, credential generation relies on an external API. To improve security and reduce dependency on external systems, I propose using crypto.getRandomValues() or crypto.subtle.generateKey() for in-browser random key generation.

Proposed Solution:
• Replace Math.random() (if used) with crypto.getRandomValues().
• Consider crypto.subtle.generateKey() for AES-based secure key generation.
• Ensure the output meets entropy requirements for secrets.

Benefits:
✅ Eliminates reliance on an external API.
✅ Improves randomness and security.
✅ Works across all modern browsers.

Im far from developer so mostly this is code review via AI but it said the generator is predictable and its not crypto secure.

More details

If the credential generation happens in the browser and relies on an external API, you have a few alternatives:

⸻

1️⃣ Use crypto.subtle.generateKey (More Secure)

If you want strong random keys without an external API, use crypto.subtle.generateKey().

Example:

async function generateKey() {
const key = await crypto.subtle.generateKey(
{ name: "AES-GCM", length: 256 },
true,
["encrypt", "decrypt"]
);
const exportedKey = await crypto.subtle.exportKey("jwk", key);
return exportedKey.k; // Returns a secure random key
}

📌 Use Case: Generates AES 256-bit keys securely in the browser.

⸻

2️⃣ Use crypto.getRandomValues() (Fast & Simple)

If you just need random strings, you can use crypto.getRandomValues():

function generateSecureRandomString(length = 32) {
const array = new Uint8Array(length);
window.crypto.getRandomValues(array);
return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('').slice(0, length);
}

console.log(generateSecureRandomString(32)); // Example output: "a3f5e2d6c9b847..."

📌 Use Case: Creates random hex strings (good for secrets, API keys, etc.).

⸻

3️⃣ Use WebAssembly (If You Need High Performance)

If you need ultra-fast cryptography, you can use WebAssembly libraries like libsodium:

<script src="https://cdnjs.cloudflare.com/ajax/libs/libsodium-wrappers/0.7.9/libsodium-wrappers.min.js"></script> <script> async function generateSodiumKey() { await sodium.ready; return sodium.to_hex(sodium.randombytes_buf(32)); } generateSodiumKey().then(console.log); </script>

📌 Use Case: More advanced crypto functions (HMAC, Argon2 hashing, etc.).

⸻

4️⃣ Alternative: Use IndexedDB for Secure Storage

If the credentials need storage, avoid localStorage (which is insecure).
Instead, use IndexedDB:

const db = indexedDB.open("secure-store", 1);
db.onupgradeneeded = (event) => {
let store = event.target.result.createObjectStore("keys", { keyPath: "id" });
store.transaction.oncomplete = () => console.log("DB Ready");
};

📌 Use Case: Stores secrets securely in the browser.

⸻

🔹 What’s Best for You?
• For simple randomness → crypto.getRandomValues()
• For AES encryption → crypto.subtle.generateKey()
• For high-performance crypto → WebAssembly (libsodium)
• For secure storage → IndexedDB

The security and randomness of your credentials generator depend heavily on how the generateCredentials function (from useCredentialsGenerator) is implemented. Here are the key factors to consider:

Security & Randomness Concerns
1. Source of Randomness:
• If generateCredentials uses Math.random(), it’s not cryptographically secure and can be predictable.
• Instead, use crypto APIs like:

crypto.getRandomValues(new Uint8Array(16))

Or, for Node.js:

require('crypto').randomBytes(32).toString('hex')

2.	Credential Length & Complexity:
•	Ensure secrets (like JWT_SECRET) are at least 32 characters long.
•	Use a mix of uppercase, lowercase, numbers, and special characters.
3.	Exposing Credentials in UI:
•	Displaying credentials in plain text (even with a “Copy” button) can be a security risk if someone is screen-sharing or has a keylogger.
•	Consider hiding the values by default with a “Show/Hide” button.
4.	Clipboard Risks:
•	Copying credentials to the clipboard makes them vulnerable to clipboard malware.
•	Best practice: Auto-clear clipboard after a delay:

setTimeout(() => navigator.clipboard.writeText(''), 10000) // Clears after 10s

5.	Storage Considerations:
•	If credentials are stored in localStorage, they are vulnerable to XSS attacks.
•	Use secure storage like sessionStorage or an encrypted database.

Recommendations to Improve Security

✅ Use crypto.getRandomValues() for better randomness.
✅ Ensure secrets are at least 32-64 characters.
✅ Hide credentials by default, allow users to reveal them.
✅ Auto-clear clipboard after a short delay.
✅ Avoid storing secrets in localStorage.

Which components are impacted by your request?

Other, General

Pictures

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[danny-avila]

This looks completely unrelated to the project.

Is this spam/auto/AI-generated?

[scottnzuk]

lol sorry no not spam its this sorry i cant beleve i left it off the core part of the ticket..

https://www.librechat.ai/toolkit/creds_generator

[danny-avila]

That generator is for providing "random" values for when people first deploy LibreChat, it's just a utility in our documentation, and not part of our core project.

If you'd like to suggest an alternative that is compatible in the browser, feel free to make a PR:
https://github.com/LibreChat-AI/librechat.ai

[scottnzuk]

I asked it,

how secure is this code generator?

or not so much secure a but more random?

import React, { useState } from 'react'
import useCredentialsGenerator from './credentialsGenerator' // Adjust the path based on your project structure

const CredsGenerator = () => {
const { generateCredentials } = useCredentialsGenerator()

removed rest..

and it said:

Source of Randomness:
• If generateCredentials uses Math.random(), it’s not cryptographically secure and can be predictable.
• Instead, use crypto APIs like:
crypto.getRandomValues(new Uint8Array(16))
or
require('crypto').randomBytes(32).toString('hex')

so i thought if i can help make program alittle more secure id share with you code wizards, if its easy fix or junk, at least ill know.

[scottnzuk]

Ah my worried was i will copy them into production and then they are in effect not as random as should be. but probably over thinking this lol sorry waste your time..

[rubentalstra]

@scottnzuk
will have a look at this. not sure what you mean tho? to much into and a lot of options?

can you explain what the problem is exactly?

[scottnzuk]

I think the issue is 98% null and void (or so low risk its not worth updating the HTML) (as codes are created on public website thats not linked to the user). I somehow stumble upon this when VSC+ Roo-Code was reviewing the LibreChat codebase, and it was using a prompt that also checks for optimisations and security issues / recommendations, the reply to me was that the way the random codes are being generated on the toolkit generator page can be predicted and recommended using different method above Replace Math.random() with crypto.getRandomValues(). to generate the random encryption keys.. https://www.librechat.ai/toolkit/creds_generator

I'm far from a Cryptographer or even a coding dev, but I was just passing on what I had seen, from the example code, it looks like simple swapping of one command with another via html page to bring the Random generation in lines with AES standard.

[scottnzuk]

#6473 🥇