Is it safe to put an AI API key in a static HTML page?
Can I put my OpenAI or Anthropic API key in client-side JavaScript?
Short answer: no. A key in HTML or JavaScript is visible to everyone who opens the page or views the source, including bots that scan GitHub and the web for exactly this. The key gets copied, used for someone else's traffic, and you pay. OpenAI and Anthropic keys have no per-key spending cap that a thief cannot exhaust before you notice.
About 67,000 HTML files on GitHub call an AI API directly with the key in the page, as of 2026. Most are small projects whose authors did not have a server to hide the key behind. This page explains the options.
What a leaked key costs
A thief does not need your page; they need the key. With it they can send any prompt, at any volume, until the provider's monthly limit or your card limit. Providers refund abuse sometimes, never reliably. Rotating the key stops it, but only after you notice.
The usual fixes
- A proxy you host. A serverless function (Cloudflare Workers, Netlify, Vercel) holds the key and forwards requests. It works, and now you own a service: rate limiting, abuse detection, a bill that is not capped, and a deploy step your static site did not have.
- A proxy service. Several products host the proxy for you. Most still hand you a secret to hide, which puts you back where you started on a static site.
- Ask visitors for their own key. Fine for developer tools, hostile for everyone else.
- A public key with a budget. The key is meant to be in the page. It can only spend a fixed token budget and cannot do anything else on your account. If it is abused, you lose some of a budget you set, not money.
How OneTag AI does it
A OneTag AI key is public. It has a token budget (1,000,000 free, 100,000,000 a month on Pro), a rate limit (60 requests a minute per key, 20 per IP), and one capability: onetag.ask. It cannot change the account, read other keys or see billing. On Pro it can be locked to your domain, so requests from other sites are refused. If it leaks, you replace it from the dashboard and the old key dies instantly.
What is still your responsibility
- Do not put a secret key of any provider in the page. The OneTag AI key is the only key that belongs there.
- Pass the model only what it needs. The input you pass is sent to the model; do not pass a form with a password field (the SDK strips password inputs, but be deliberate).
- Tell visitors AI is involved where it matters. OneTag AI keeps no prompts, but your privacy policy should say what you send.
Questions
Can I restrict an OpenAI key to my domain instead?
No. OpenAI and Anthropic keys are not domain-restricted; a key copied from your page works from anywhere. Google's Maps-style HTTP-referrer restrictions do not exist for these APIs.
Is a public key with a budget really safe?
It is safe in the way that matters: the worst case is bounded. Someone can use part of your free tokens; they cannot run up a bill or touch your account. On Pro, the domain lock closes even that.
What if I already published a secret key?
Revoke it in the provider's dashboard now, then check the usage page for charges. Then replace the call with a budgeted public key or a proxy.
Does a serverless proxy make the problem go away?
It hides the key, but the endpoint itself is public: anyone can call it and spend your money unless you add rate limits and abuse detection. Hosting a proxy is running a service.
Related guides
- Ways to add AI to a static site, compared
- Add AI to a single HTML file
- Add AI to a GitHub Pages site
- Add 'ask the docs' AI search to a documentation site
Get a free key by email, paste one tag, call onetag.ask. 1,000,000 tokens, no card.
Updated 2026-11-09. Something wrong or missing? Email support@odysseyx.app.