Elastic
04/09/2025, 1:02 AMVapi Support Bot
04/09/2025, 1:04 AMconst 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:Vapi Support Bot
04/09/2025, 1:04 AMElastic
04/09/2025, 1:21 AMElastic
04/09/2025, 1:22 AMElastic
04/09/2025, 1:23 AMKyle Brunker
04/11/2025, 6:51 AM