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
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:
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.
- 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.
yourdomain.comare two different domains in terms of security. Include
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-ancestorsHTTP 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
originHTTP header. If
originisn’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.