Security Risk?
# support
e
Isn't having the suggested Vapi code snippet embeded in the HTML a security risk? Code snippet from Vapi for website voice widgets : https://docs.vapi.ai/examples/voice-widget var vapiInstance = null; const assistant = "1234567890"; // Substitute with your assistant ID const apiKey = "1234567890"; // Substitute with your Public key from Vapi Dashboard. const buttonConfig = {}; // Modify this as required (function (d, t) { var g = document.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = "https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js"; g.defer = true; g.async = true; s.parentNode.insertBefore(g, s); g.onload = function () { vapiInstance = window.vapiSDK.run({ apiKey: apiKey, // mandatory assistant: assistant, // mandatory config: buttonConfig, // optional }); }; })(document, "script");
v
Hi there! 👋 I've looked into your question about the security risks of embedding the Vapi code snippet in HTML, and I can definitely help with this concern. Based on the information I've found, there are indeed some security considerations to be aware of when embedding this code: ### API Key Exposure Risk The most significant security concern is the exposure of your API key in client-side code. The snippet includes
const apiKey = "1234567890"; // Substitute with your Public key from Vapi Dashboard.
which, when implemented, would place your API key directly in the HTML where anyone viewing your page source could see it. According to the [security analysis](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1336696033366773800), while this is meant to be your public key rather than your private key, unauthorized usage could still occur if it's exposed this way. ### Best Practices for API Key Security For better security, consider these approaches: - Never expose private keys in client-side code or public repositories - Use environment variables to store API keys instead of embedding them directly in the code - Implement JWT authentication as a more secure alternative to direct API key usage - Ensure you're using the correct type of key (public vs. private) for the intended purpose ### Additional Security Considerations - **Third-party CDN risks**: The snippet loads JavaScript from jsdelivr CDN, which could potentially introduce vulnerabilities if the CDN is compromised or if you're using outdated library versions - **Potential script conflicts**: The embedded code might conflict with other scripts on your website, potentially leading to unexpected behavior - **Unauthorized property injection**: Without proper validation, there's a risk of unauthorized properties being passed to functions Would you like me to provide more specific recommendations on how to implement this widget more securely? Sources:
e
Yes
@User Yes
Why wouldn't this be a standard practice to have a code snippet that is more secure? Not everyone here is a developer.
k
@Elastic what help do you require related to security for this?