Securely embed content on your site

Jack J
Jack J
Alexandra White
Alexandra White

Embedded content is the best way to keep users on your site, while sharing content from other pages or sites. This could be as small as an embedded Tweet, which displays in Twitter's style and format. It could be as large as an entirely separate site embedded onto your own, such as an embedded Shopify shop where visitors can make a purchase without leaving your site.

Now more than ever, it's important that our sites remain secure when we embed content.

There are several ways developers can embed content on a website. The most common technique is to use an <iframe>, which allows you to embed any content onto your site with just a URL. It's already possible to add the sandbox attribute to make an iframe more secure.

Alternatively, you could use a proposed HTML element:

  • <fencedframe> is proposed as a privacy-preserving way to embed third party content.
  • <portal> is proposed for more seamless page transitions.

Read on to learn how to improve the security of your embedded content.

Embed with iframes

Iframes can be used for all sorts of use cases, such as adding maps or forms to a contact page, and displaying ads.

<iframe src="https://example.com/maps"></iframe>

Each iframe has its own browsing context, with its own session history and document. The context that embeds the iframe is referred to as the parent browsing context.

Third-party content displayed in an iframe can interact with the parent site through postMessage(). This allows developers to send arbitrary values between browsing contexts. The message receiver can use the event listener onmessage to receive the values.

// inside iframe
window.parent.postMessage("ping", "https://example.com");

// window
window.addEventListener("message", (event) => {
  console.log(event.data);
})

Added security with the sandbox attribute

If malicious content is deployed in an iframe, it's possible that unintended actions (such as a JavaScript execution or form submission) could be executed. To avoid this, the sandbox attribute restricts the executable APIs in the iframe and disables potentially harmful features.

<iframe src="https://example.com" sandbox></iframe>

Sandbox may make certain APIs unavailable that are important to your embedded content. To allow a disabled API, you can explicitly add an argument to the sandbox attribute.

<iframe sandbox="allow-forms" src="https://example.com"></iframe>

There are a number of possible values for the sandbox specification, including allow-forms, allow-same-origin, allow-popups, and more.

Permissions Policy

As increasingly powerful features have been developed for the web, permissions policies were created to manage permissions for all of them. A permissions policy can be applied to a parent site and to iframe content. The permissions granted to a parent site can also be granted to the iframe, using the allow attribute.

<iframe src="https://example.com" allow="fullscreen"></iframe>

Embed with fenced frames

A fenced frame (<fencedframe>) is a proposed HTML element for embedded content, similar to an iframe. Unlike an iframe, a fenced frame restricts communication with its embedding context to allow the frame access to cross-site data without sharing it with the embedding context. Similarly, first-party data on the parent's page cannot be shared with the fenced frame.

<fencedframe src="https://3rd.party.example"></fencedframe>

Fenced Frames is a Privacy Sandbox proposal which suggests top-level sites should partition data. Many of the Privacy Sandbox proposals aim to satisfy cross-site use cases, without third-party cookies or other tracking mechanisms. Certain Privacy Sandbox APIs may require select documents to render within a fenced frame.

For example, a fenced frame will be created for the winner of the FLEDGE API ad auction. The FLEDGE API will provide an opaque source, a location-independent URN scheme, which can render within a fenced frame. Opaque sources allow sites to display content on their sites without revealing the ad source URL to the site owner.

<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>

Ultimately, fenced frames won't replace iframes. You won't have to use them. Fenced frames are proposed for a more private frame for usage when data from different top-level partitions needs to be displayed on the same page.

Embed with portals

Portal (<portal>) is a proposed HTML element with an independent browsing context, which could improve the page transition experience. Portals embed content like iframe, but the user cannot access the portal's code. A portal is view-only and cannot be interacted with by users.

Portals offer the low complexity of a multi-page application with the seamless transitions of a single-page application. These transitions can be animated, quickly replacing the content in the browser window.

<portal src="https://example.com/"></portal>

The portal specification is still in the early stages of development.

Other HTML elements used for embeds

Throughout web history, there have been a number of HTML elements proposed and APIs created to embed content. For a while, it was common to create sites with multiple <frame> and a <frameset> elements. Sites with several <frameset> elements displayed the URL of the parent page in the address bar, regardless of the source of the many individual frames. This made it difficult to share links to content within the site. These APIs have since been deprecated.

There was also a time when plugin technologies, such as the Java <applet> element, were used to cover other use cases. This was later replaced by the <object> element. Both of these elements were commonly used to display Flash plugins, but were also used to display other HTML elements (similar to iframes). Other elements, such as <canvas>, <audio>, <video>, and <svg>, have rendered both the <object> and <applet> elements obsolete.

Although <object> and <embed> are not officially deprecated yet, it's best to avoid them, especially since they have some strange behaviors. <applet> was removed from the HTML specification in 2017.

Conclusion

You can securely embed content onto any website, using the existing iframe specification. More HTML elements, including <fencedframe> and <portal> have been proposed for security and style improvements. We'll continue to share the progress on the Fenced Frames proposal as it progresses.

Hero image by Jackson So.