Keep API keys out of the browser: adding AI to a website safely

An AI API key works like a credit card number: whoever has it can run up charges on your account. If you put it in your website's JavaScript, every visitor can read it. The safe pattern, recommended by OpenAI, Google and Anthropic alike, is to keep the key on your server and have the browser call your own endpoint, which checks the request before passing it on. Add a monthly spending limit and a separate key for each site, and make a backup before you start. This article explains each step and what to do if a key leaks.

Why a key in your page's code is a spending card on display

When you add a chatbot, a writing helper or a product-description generator to a website, the AI service needs a key to know who to bill. Anthropic compares a key to a credit card number. OpenAI's guidance is blunt: never deploy your key in client-side environments like browsers or mobile apps, because anyone who finds it can make requests on your behalf. Google says the same about its Gemini keys.

Hiding the key does not help. Minified, encoded or split-up text in a web page can still be read by anyone who opens the browser's developer tools.

How keys leak

• Page source. A key in front-end JavaScript is visible to every visitor.
• Public code repositories. Anthropic names keys committed to public GitHub repositories as a common leak. GitHub scans public repositories for known key formats and reports them to the provider; Anthropic says it then deactivates an exposed Claude key automatically and emails you. Do not rely on that as your protection.
• Pasted into other tools. Anthropic warns that giving a key to a third-party tool gives that tool's developer access to your account.
• Backups and exports. A key saved in a website's database travels with every copy of that database.

The safe shape: your server holds the key

The browser never talks to the AI provider. It talks to an endpoint on your own website, and your server, which holds the key, calls the provider.

That endpoint must do more than pass messages along, or it becomes an open door that spends your money. The OWASP Foundation lists "unbounded consumption", including attackers deliberately running up your bill, among the top risks for AI applications. So the endpoint should:

• Check who is calling: a logged-in user, a form token, or a challenge such as Cloudflare Turnstile.
• Limit size and rate: how long a request can be, and how many requests one visitor can make in a minute.
• Fix the instructions on the server. The model and the system prompt are set by your code, not sent from the browser.
• Never send the key or the system prompt back to the browser, even in an error message.
• Give the AI nothing it does not need. If the feature writes product descriptions, it should not be able to read your customer list.

Limit the damage before anything goes wrong

The providers give you controls that turn a leak from a disaster into a nuisance:

• One key per site or feature, in its own project (OpenAI) or workspace (Anthropic), so you can revoke one without breaking the rest.
• A monthly spending limit with hard enforcement. OpenAI notes that spending alerts alone do not stop traffic, and that enforcement may lag slightly, so set the limit with a margin.
• Separate keys for development, testing and the live site.
• Expiry and rotation. OpenAI lets project keys expire; Anthropic suggests rotating, for example every 90 days.
• IP allowlisting, where offered, so the key only works from your server's address.

Keep the key in an environment variable or a configuration file outside the website's public folder, never in code you commit. The OWASP secrets guidance adds a caution: environment variables can end up in logs or error dumps, so do not print them.

If your site runs WordPress

WordPress 7.0, released in May 2026, added an AI Client and a Connectors screen under Settings for Anthropic, Google and OpenAI. AI requests made through it run on the server, so the key never reaches visitors' browsers. Core WordPress ships no AI providers itself; each provider is a separate plugin.

WordPress looks for a connector's key in three places, in this order: an environment variable, a constant in wp-config.php, then the key saved through the Connectors screen. The WordPress developers note that keys saved through the screen are masked in the interface but are not encrypted in the database. Because the database goes into every backup and export, putting the key in an environment variable or in wp-config.php is the better choice where you can.

Building it on Noiz hosting

Premium shared hosting has what you need to start:

• SSH access to your own hosting account, so you can manage files and settings from the command line.
• WP Toolkit, to build and test an AI feature on a copy of the site first.
• A dedicated PHP pool, so your site's work runs in its own workers.

Legacy hosting has no SSH, so a custom endpoint there would be a WordPress plugin rather than a separate app. For a larger AI back end, a Noiz Cloud server gives you full root access on a server of your own.

Back up first, then test on a copy

Before you install an AI plugin or deploy new code:

1. Take a full backup of the site, files and database. Our help article shows how to generate a full backup in Plesk, and the backup overview explains where to keep copies.
2. Build on a staging copy, not the live site.
3. Watch your usage in the provider's dashboard for the first few days.

If a key leaks

1. Revoke it at once in the provider's dashboard. Revoke first; the other steps can follow.
2. Create a new key and put it on the server.
3. Check usage and billing for activity you do not recognise.
4. Remove the old key from code, repository history and logs. Our article on infostealer malware explains why any secret stored on an infected computer should be treated as stolen.

Where Noiz fits

Premium shared hosting gives developers SSH access to their own hosting account, a dedicated PHP pool and WP Toolkit to build AI features the safe way, and every plan includes a weekly backup kept off site. If you would rather not maintain WordPress yourself while you add new features, WordPress Care keeps it updated weekly with a restore point taken first.

Sources

Checked 19 October 2026.

AI providers

• OpenAI, Best practices for API key safety
• Google, Using Gemini API keys
• Anthropic, API key best practices
• Anthropic, Workspaces

Security guidance

• OWASP, Secrets management cheat sheet
• OWASP, Top 10 for LLM applications 2025 and LLM10: Unbounded consumption
• GitHub, About secret scanning

WordPress

• Introducing the Connectors API in WordPress 7.0
• Introducing the AI Client in WordPress 7.0
• WordPress 7.0

Noiz

• Shared hosting
• Cloud servers
• WordPress Care
• Help articles linked in the text, on docs.noiz.ie

Note: while some of this content was produced with the help of AI, the final editing has been done by a real human being.