Security Vulnerability: Exposing OpenAI API Key in Browser with NLux Adapter

[TechWithTy]

Security Vulnerability: Exposing OpenAI API Key in Browser with NLux Adapter

Summary

The NLux OpenAI adapter currently facilitates direct connections to the OpenAI API from the client's browser. This approach inherently exposes the OpenAI API key in client-side code, posing a significant security risk. Unauthorized users could potentially retrieve and misuse the API key, leading to unauthorized access and potential financial implications due to the misuse of the OpenAI services.

Steps to Reproduce

1. Install and configure the NLux OpenAI adapter according to the official documentation.
2. Inspect the network requests made from the browser when interacting with the OpenAI API via the NLux adapter.
3. Observe the API key is included in client-side JavaScript files or network requests, which can be accessed by any user.

Expected Behavior

The API key should not be exposed to the client-side. Instead, requests to the OpenAI API should be proxied through a secure server-side environment, where the API key can be safely stored and managed.

Actual Behavior

The OpenAI API key is exposed in the browser, making it accessible to anyone who inspects the client-side code or network traffic.

Potential Solution

Implement a server-side proxy that handles requests to the OpenAI API. This proxy would store the API key securely and forward requests from the client-side application to OpenAI, without exposing sensitive credentials. This approach also allows for additional security measures, such as rate limiting and logging, to prevent abuse.

Environment

• NLux Version:Recent
• Browser Version: Firefox Dev
• Operating System: Windows 11

Possible Impacts

• Unauthorized access to the OpenAI API using the exposed API key.
• Financial charges for the unauthorized use of OpenAI services.
• Potential breach of OpenAI's terms of service, leading to the revocation of API access.

Suggested Labels

• security
• bug
• enhancement

[salmenus]

Thank you for raising this @TechWithTy Much appreciated

The OpenAI adapter should not be used in production environments. We display a message in documentation, and a warning in the console log to explain this.

NLUX is a UI library and the focus is on providing interactive UI components, that's why we didn't offer a proxy. Users can implement their own backend and connect it with NLUX using the customer adapters feature.

For the 2 other standard adapters provided: LangChain and HuggingFace both platforms offer API authentication through authorisation tokens. We support that for HuggingFace and we will be adding auth tokens for LangServe soon.

As per your idea of providing a proxy: It's achievable, but it would be a separate stream of work (Node.js / Deno proxy rather than a frontend library).

I added 2 items in the project backlog to tackle those 2 requests.

[salmenus]

@TechWithTy ― To solve this urgent issue:

Deprecated

• useAdapter from @nlux/openai-react
• createAdapter from @nlux/openai
• Starting from version 0.10.10

Clear names and warnings

• The methods to connect to OpenAI from the browsers are now called useUnsafeAdapter and createUnsafeAdapter
• With this, it is super clear for anyone using them that they are unsafe
• We added detailed warning in the console to explain why they are unsafe and how to build safe custom adapters

Documentation updates

Even though we previously mention in the documentation that the @nlux/openai and @nlux/openai-react adapters are unsafe, we took this further and we now mention that in the menu links, and with further explanations in the pages.

• Updated adapters documentation here

I think this clarifies all the ambiguity around the use of OpenAI adapters from the browser, and ensures that they won't mistakenly be used with API keys in a production environment.

Thank you @TechWithTy for the details provided and for caring to improve NLUX 🙏

[salmenus]

@TechWithTy - As you suggested, I created a proxy server that fit perfectly well with nlux.

• Name: nlbridge
• Project: github.com/nluxai/nlbridge
• NPM: @nlbridge/express

I also added an nlux adapter that can be used with this proxy server:

• @nlux/nlbridge-react

[salmenus]

Published here, a guide on how to use NLUX with Node.js through nlbridge: https://nlux.dev/learn/get-started/nlux-nodejs-nlbridge-chatgpt

[TechWithTy]

Awesome Salmenus! Thanks For Being Open