How The Embed Block Works - Atavist/developer GitHub Wiki

Since launching the Embed Block, we often get questions about which services are supported, and why. This doc contains an explanation of how the block works, the reasoning behind it, and a guide to understanding which services are currently supported.

Generally speaking there are two kinds of embeds out there: iframes and script tags.

Iframe Embeds

Iframes are essentially self-contained web pages in a rectangle within the page. Because they're self-contained, there's little risk that something within the iframe could adversely affect the page as a whole, so the embed block accepts these as-is, no questions asked. If the service's embed code begins with <iframe and ends with </iframe>, its good to go. Timeline.js is one example. A Timeline.js embed looks like this:

<iframe src='https://cdn.knightlab.com/libs/timeline/latest/embed/index.html?source=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&font=Bevan-PotanoSans&maptype=toner&lang=en&height=650' width='100%' height='650' frameborder='0'></iframe>

There is one exception to the all-iframes-are-ok rule. Most of our projects are served securely via SSL — https:// vs http:// (CNAME'd organizations are the one exception). Generally speaking, a secure page cannot load an insecure resource from another site, so if the service does not support secure embeds, it won't work. You can generally figure this out by seeing if the src attribute of the iframe begins with https://or not. Sometimes the given embed code will have an http:// URL, but can be changed to an https:// one to make it work. Occasionally the service simply doesn't support SSL, and in these cases the embed isn't going to work.

Script Embeds

Script embeds are trickier because they are not contained in the same way, and have the ability to interact with our scripts and page content, which can cause Javascript errors or worse. If we allowed any script embeds to work without assessment, we'd be risking performance problems that are out of our control to improve. There's also a small but real possibility that a script embed could do something actively malicious. Because of this, we only accept script embeds from services that we have explicitly approved. Part of what the embed block does is assess the source of the embed code and determine if it is acceptable.

Its generally easy to add new services to this list, although we are cautious about what we add — they should be useful services that work well. Here's a list of the non-iframe embeds we support at present:

Performance

Embeds can have an unexpected impact on the performance of a project. Some are lean, others are performance hogs, and by their nature we have no control over these factors. Because of this if use of embeds seems to be causing a project to behave poorly — jerky scrolling, crashes, etc — our best suggestion will be to remove it, or to reduce the number of other embeds in the project.