T09 · Insecure Skill Coding Practices
Error
- Location
SKILL.md:25- Finding
Client-Side API Key Exposure in React Configuration
- Content
View full analysis
``` ```bash REACT_APP_AINATIVE_API_KEY=ak_your_key # CRA VITE_AINATIVE_API_KEY=ak_your_key # Vite ``` ```tsx ``` ### Technical Analysis The Skill recommends supplying an API key directly to a React component, including through Create React App and Vite environment variables. These environment-variable mechanisms perform build-time substitution and do not provide secret storage. Values used by browser-side code are included in the generated JavaScript bundle or exposed through runtime network requests. Consequently, any user who can load the application can inspect its JavaScript, application state, or outbound requests and recover the key. The placeholder itself is not a real credential, but the documented pattern instructs developers to replace it with one and therefore creates an insecure production configuration. The chat service necessarily requires network communication to implement the declared functionality. However, exposing a reusable provider credential to every browser exceeds the minimum privilege necessary if requests can instead be authorized by a trusted backend or short-lived, narrowly scoped client token. ### Attack Path 1. A developer follows the Skill and stores a real API key in `REACT_APP_AINATIVE_API_KEY`, `VITE_AINATIVE_API_KEY`, or directly in the provider configuration. 2. The React application is built and deployed. 3. The build system embeds the key in browser-accessible JavaScript, or the application sends it in observable API requests. 4. An attacker opens the application and inspects the bundle, runtime state, or browser network traffic. 5. The attacker extracts the key and submits indepen ...[truncated 645 chars]- Remediation
View remediation