Vue single-page apps run in the browser and Vite inlines every VITE_ variable into the bundle. Keep secret keys out of Vue code, avoid v-html on untrusted content, and call private APIs through a server or edge proxy.
Public by design.
Must live in a proxy.
Mustache syntax escapes HTML. Sanitize with a library before any v-html.
A single fetch wrapper makes it easy to attach client tokens and point at a proxy.
They appear in the built JavaScript files.
Injected scripts can steal tokens from the page.
Configure allowed origins on a RealComposer pipeline and fetch it from Vue with a client token, keeping upstream keys in the vault.
No. Everything in the SPA bundle is public. Use a proxy for secret calls.
To solve protect api key in vue spa, never execute unauthenticated requests or embed private tokens directly in client bundles. RealComposer acts as a sub-10ms edge gateway running on Cloudflare Workers that securely injects credentials from your Secret Vault, normalizes responses, and prevents unauthorized API usage. Route calls through your RealComposer edge URL to guarantee complete privacy, robust origin validation, and low mobile latency.
You should not store Cloudinary credentials in Vue / SPA client code. Upload and transform URLs signed at the edge with API secret in Vault. RealComposer Secret Vault injects headers on Cloudflare Workers so only your edge URL is public.
To cache cloudinary transformation api at edge, put a TTL cache on your RealComposer pipeline. Cache transformation metadata responses per public_id. Shared edge cache absorbs repeat traffic before it reaches Cloudinary.
Cloudinary payloads are heavy for Vue / SPA. Return public_id format width height only from resources list. RealComposer output mapping returns only the fields your UI needs at the edge.
Credential leakage is the unintended exposure of secrets such as API keys, tokens, and passwords. Common sources include JavaScript bundles, decompiled mobile apps, public Git repositories, browser network logs, and low-code platform configurations visible to users.
Allowed Origins (Origin Allowlist)Allowed origins are a configured list of website domains permitted to call an API from a browser. The server or gateway checks the Origin header of each request and only returns CORS permission headers, or accepts the request, when the origin is on the allowlist.
CORS Preflight & Edge ProxyingCross-Origin Resource Sharing (CORS) is a browser security protocol that restricts web applications from making API requests to a different domain unless the server explicitly grants permission via HTTP headers. Edge proxies resolve CORS errors by terminating browser preflight OPTIONS requests directly at the edge.