Keep your API key secure

Iframely lets you limit access to API and iFrames with your hashed key to only those eferrering domains that you white-list. If you use client-facing JavaScript, it secures your API key.

MD5 hash of API key

If you call Iframely APIs via client-side JavaScript, please use key parameter instead of api_key you see in your profile.

key should be equal to MD5 hash of the value of your actual API key. If you're not sure, you can see it in the src attribute of any of our hosted iFrames (by the way: people using your iFrames never actually see your API key).

If you do use hashed key, you will then be able to require that such API calls come only from JavaScript and only from the domains in your whitelist.

Configure white-listed origins

  • In your API settings find "Active CORS and CSP. Allow only following domain origins" checkbox.
  • In the text area below the checkbox, enter the domain names of the sites you want to whitelist.
  • You can use wildcards for subdomains such as *.yourdomain.com.
  • For iFrames, wildcard will allow only subdomains. So make sure you also add yourdomain.com if you use root without any subdomains.
  • www.yourdomain.com and yourdomain.com are two different domains in terms of security. Include www. if required.

Please beware, as the changes you make may take up to an hour to propogate as iFrames (without any or with erroneous security headers) will be cached inside our CDN. Make sure you know what you're doing.

Also beware of nested browsing context: if our hosted iFrames are used inside your own iFrames on host A before they are loaded onto your site B, then both A and B domains should be white-listed.

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

What it does: adding CORS and CSP headers

Here's what changes are applied when you activate your domains whitelist:

  • iFrames will come with frame-ancestors HTTP header. Internet browsers will load such iFrames only on the allowed domains and will reject embedding otherwise. It's CSP Level 2 spec, most browsers (except perhaps IE and Edge) will respect it.

  • Iframely will start requiring origin HTTP header on all API calls that are made with key parameter as substituation of your api_key. Those are presumably the requests that come via client-side JavaScript from your site.

  • If origin isn't present or the origin isn't in your whitelist, request will be rejected with 403 HTTP error.

  • API calls with your api_key parameter will be rejected if origin is not in the whitelist, but requests with empty origin (presumably, server-side API calls) will still be allowed to any server.

This way, your users may see key in the source code of your page, but will not be able to hijack and use it on their own domains.

Previous article: Omit scripts
Next article: Bring your own CDN