Using a key from the browser safely

Calling the API directly from a web page means the secret is visible to anyone who opens the page. Do this only when a server-side proxy is not an option, and limit the damage a copied key can do.

1. Create a narrow role

In Dashboard → Roles, create a role named Browser with only qrcode.generate.

2. Create a restricted key

Create a key with:

• Role: Browser
• Service restrictions: qrcode
• Referrer restrictions: https://www.example.com/* (add http://localhost:3000/* on a separate development key)

3. Call the API from the page

const res = await fetch("https://webknx.com/api/v1/qrcode", {
  method: "POST",
  headers: { Authorization: "Bearer hx_sk_browser_key", "Content-Type": "application/json" },
  body: JSON.stringify({ data: location.href, size: 256 }),
});
document.querySelector("img").src = URL.createObjectURL(await res.blob());

4. Understand the limits

Referrer restrictions stop other websites from using your key in a browser. They do not stop scripts or servers, which can set any Origin or Referer header. Watch the key's usage, keep the role narrow, and rotate the key if usage spikes unexpectedly.