Secure API key in chat widget HTML

[jhaezaerts]

The HTML script for embedding a chat widget on an external website contains an API key variable.

<script src="https://cdn.jsdelivr.net/gh/logspace-ai/[email protected]/dist/build/static/js/bundle.min.js"></script>

<langflow-chat
window_title="flow title"
flow_id="abc123"
host_url="http://localhost:7860"
api_key="..."

Is there a way to secure the api key value so that it is not publicly visible?

[dosubot[bot]]

Hey there, @jhaezaerts! I'm here to help you out with any bugs, questions, or contributions you have. Let me know how I can assist you!

I found a similar open issue discussing the security of API keys in Langflow. The suggested solution is to ensure that once the keys are entered into Langflow, they should not be displayed or returned from the backend to the frontend. Users should access these keys from the source system if needed ^[1].

For securing API keys in your chat widget, consider using server-side mechanisms to handle API key validation instead of embedding them directly in the HTML. This can involve setting up a backend service that manages API key authentication and communicates securely with the frontend. Additionally, Langflow supports token-based authentication using OAuth2 with JWT tokens, which can be used as an alternative to API keys for frontend applications ^[2].

To continue talking to Dosu, mention @dosu.