How to Hide an API Key in Vanilla JavaScript (Without a Backend)

You just finished a beautiful weather dashboard or a crypto tracker.
You're ready to push to GitHub, but there's a problem: your API key is
sitting right there in app.js for the whole world to see.

In the developer world, this is a "Game Over" moment. If you commit that key, bots will scrape it in seconds --- and you'll be the one paying the bill for someone else's usage.

Common advice says:
"Go build a backend proxy server."

Our advice:
*Use the Salting Layer.*

---

🌩️ The Myth: "You need a backend to hide keys"

Traditionally, the only way to hide a key was to build a server
(Node.js, Go, Python) to act as a middleman. This is called the Proxy
Pattern.

It works --- but it's:

• Expensive
• Slow to set up
• Hard to maintain
• Overkill for small projects

SaltingIO replaces that entire backend with a single URL.
We call it the Salting Layer.

---

🔒 Step-by-Step: Securing Your Vanilla JS App

Here's how you hide any API key (OpenAI, WeatherAPI, AlphaVantage, etc.)
using SaltingIO.

1️⃣ Create a Secure Record

Instead of putting your secret key in your code, save the entire API
request URL in your
SaltingIO Dashboard
.

Record Content:

https://api.weatherapi.com/v1/current.json?key=YOUR_SECRET_KEY

Go to
Secrets
Page: Click Add Secret, then set the type to Bridge. .

---

2️⃣ Lock it to Your Domain

Since the link is public, we need to make sure only your app can use it.

In the record settings:

• Click Allowed Domains
• Add your website's URL
  (e.g. https://my-cool-app.netlify.app)

Now, even if a person finds your SaltingIO link, it will refuse to
return any data unless it's called from your specific website.

---

3️⃣ Fetch from the Salting Layer

In your app.js, call the SaltingIO URL instead of the third-party API.

❌ Before (Insecure --- Key Exposed)

const url = "https://api.weatherapi.com/v1/current.json?key=123456&q=London";

✅ After (Secure --- Key Hidden in the Salting Layer)

const saltingUrl = "https://api.salting.io/r/abc-123-xyz&q=London";

async function getWeatherData() {
    const response = await fetch(saltingUrl);
    const data = await response.json();
    console.log("Secure Data:", data);
}

Your API key is no longer in your JavaScript file.
It never reaches the browser.

---

🛠️ The Technical Deep-Dive: How It Works

When your browser calls the SaltingIO link:

1. Origin Check

SaltingIO checks the Origin header.
If it doesn't match your Domain Lock, the request is killed instantly.

2. Secure Injection

SaltingIO securely injects your hidden API key into the request on its
own high-speed servers.

3. Provider Call

The request is sent to the API provider (e.g., WeatherAPI).

4. Clean Response

The response is returned to your JavaScript --- without ever exposing
your secret key.

Your key: - Never leaves the SaltingIO server

• Never appears in the browser
• Never gets committed to GitHub

---

🪄 Pro Tip: Use AI to Build the UI

Don't waste time writing CSS.

Use this prompt with ChatGPT or Claude:

I am building a weather app with Vanilla JS and Tailwind CSS.
I want a modern dark-mode design.
I am using SaltingIO to hide my API key, so my fetch URL is
'https://api.salting.io/r/YOUR_RECORD_ID'.\
Please write the code to fetch data from this URL, append the city
name using '&q=', and display the results in a beautiful UI.

You'll have a polished frontend in minutes --- securely connected.

---

🚀 Conclusion

You don't need to be a Backend Engineer to build secure apps.

By using the Salting Layer, you get:

• The security of an enterprise proxy
• The simplicity of frontend-only development
• Zero backend infrastructure to manage

Stop leaking keys. Start building faster.

---

Secure your first API key for free on SaltingIO →