1. Docs
  2. Content delivery

Keep your API key secure

Manage API access keys in your dashboard. Iframely lets you create multiple keys and disable/pause it at any time. If your key is client-facing, you can restrict it to select referring domains.

Use hash value of API key

When you make API calls from a client facing JavaScript, you’d want to secure your API key.

For this purpose, instead of api_key parameter, use key. It should be the MD5 hash value of your actual API key. You can find it on your keys page:

Find hashed key in your console

If you do not use Content IDs, we also include that key parameter as src attribute of Iframely iFrames.

This way, no end-user will see your actual API key. You can be sure it is used in client context only. It will allow you to control traffic with that key, allowing only certain referring origins.

Configure white-listed origins

We advise against reconfiguring production API keys as it is likely to cause disruptions. Instead, we recommend adding a new restricted API key. This way, you can test before launching and retire the old key when no longer in use.

Configure white-listed origins
  • Select the key from the list to edit it and find “Activate CORS and CSP” checkbox.
  • In the text area below the checkbox, list the domain names of your sites.
  • You can use a wildcard for subdomains such as*.yourdomain.com. Beware though, wildcard will allow only the subdomains. Make sure to include your root domain separately if you need it.
  • www.yourdomain.com and yourdomain.com are two different domains in terms of security. Include www. if required.

Your changes may take up to an hour to propagate through our CDN. Any errors in security headers will stay in cache for that hour. Make sure you know what you’re doing.

Beware of nested browsing context. When our iFrame is in your own iFrame on host A, and you load them both onto your site B, then both A and B domains need to be white-listed.

If “Active CORS and CSP” checkbox is off, all domains are allowed.

Technically speaking: CORS and CSP

This is what happens when you activate your domains allowlist:

  • frame-ancestors HTTP header is added to Iframely hosted iFrames. Internet browsers display such iFrames only on the allowed domains and show an error elsewhere.

  • Iframely API endpoints start checking origin HTTP header. If origin isn’t present or isn’t in your list, API call is rejected with the error 403.

However, Iframely will keep allowing your API calls without an origin when you send your full api_key. We assume it is a server-side API call.

Docs