How I protect Discord webhook URLs from being exposed in frontend code

#discord #webdev #security #api

The Problem

If you've ever used Discord webhooks in a frontend app, you've probably done something like this:

const webhookUrl = "https://discord.com/api/webhooks/123456/abc..."
fetch(webhookUrl, { method: "POST", body: JSON.stringify(message) })

The problem: that URL is now visible to anyone who opens DevTools.
They can use it to spam your Discord server, send fake alerts,
or simply abuse it until Discord revokes it.

The Solution: Never expose the real URL

The pattern that actually works:

Register your webhook URL once through a secure backend
Get back a safe ID (like whk_abc123)
Use only that ID in your frontend — the real URL never leaves the server

How it works in practice

Register once (server-side or one-time setup):

POST /v1/webhooks
{ "discord_webhook_url": "https://discord.com/api/webhooks/..." }

Response: { "webhook_id": "whk_abc123" }

Send messages using only the ID:

POST /v1/send
{
  "webhook_id": "whk_abc123",
  "content": "New sale: $49.99",
  "title": "Payment received",
  "mode": "auto"
}

The server decrypts the real URL, formats the message into a
clean Discord embed, strips any @everyone/@here spam, and delivers it.
Your frontend never sees the real webhook URL again.