Embed
  • Home
  • Embedding Content

<embed-email> Element

As the internet evolves, streaming media and social platforms have transformed how people engage with content, reshaping expectations of what email can deliver. To meet this need, the Open Email Standards introduce the <embed-email> tag, a streamlined solution for embedding third-party content, such as videos, audio tracks, and social media posts. Rather than using multiple tags for each type of media, a single universal tag is introduced with flexible attributes to specify the platform and content embedded.

Embedding a YouTube video
<embed-email rel="youtube" url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" width="560" allow="fullscreen" />
Embedding a Spotify track
<embed-email rel="spotify" url="https://open.spotify.com/track/7GhIk7Il098yCjg4BQjzvb" width="300" height="380" />

Purpose and Benefits

The <embed-email> tag is designed to simplify the embedding of third-party media while maintaining security and consistency across email clients. Following the Web Components naming convention, the tag includes a hyphen (-) to avoid conflicts with standard HTML tags and ensure future compatibility. By standardizing the embedding model through a single tag, the Open Email Standards improve interoperability while reducing the risks commonly associated with traditional tags like <iframe>. Here are the key benefits:

  • Consistency: The <embed-email> tag offers a unified approach to embedding content from various platforms (e.g., YouTube, Instagram, Spotify), ensuring consistent behavior across email clients.
  • Security: This tag ensures that media content is embedded from trusted, verified sources, reducing risks such as cross-site scripting (XSS) and unauthorized data access.

Allowed Tag Attributes

  • rel: Specifies the platform from which the content is embedded. This optional attribute helps the email client identify the embedding mechanism and, if provided, is cross-verified with the url attribute to validate its source.
  • url: Defines the exact URL of the third-party content to be embedded. This attribute ensures that only the specified content is displayed. If the rel attribute is provided, the url is cross-verified to validate its source and enhance security.
  • width, height: Define the dimensions of the embedded content. These attributes are optional, and email clients may override these values to ensure the best user experience across different screen sizes and layouts.
  • allow: Specifies the permissions for the embedded content. This attribute controls which features the embedded content can access. Below are the permissions currently allowed and disallowed for email embedding:
Allowed Permissions
  • fullscreen: Allows the user to view content in fullscreen mode.
  • encrypted-media: Allows encrypted media to be played.
  • camera, microphone: May be permitted by the client if the embedded platform supports real-time communication and the user grants permission.
  • allow="fullscreen; encrypted-media"
Disallowed Permissions (within allow)
  • autoplay: Automatically playing content can be intrusive and disruptive to the user experience.

Disallowed Tag Attributes

  • autoplay: Automatically playing embedded content (e.g., audio or video) can be invasive and disrupt the user experience, so this attribute should not be used in any form.
  • download: Prevents automatic downloads to avoid potential security risks.
  • srcdoc: Enables inline HTML in an <iframe>, which introduces XSS risks.
  • seamless: Although it makes an <iframe> appear as part of the document, it may pose layout and security risks.
  • formaction: This attribute can change the behavior of form submissions, potentially introducing security vulnerabilities or inconsistencies in how the form interacts with its intended action.

Additional Attributes

  • allowfullscreen: Automatically playing embedded content (e.g., audio or video) can be invasive and disrupt the user experience, so this attribute should not be used in any form.
  • referrerpolicy: Prevents automatic downloads to avoid potential security risks.
  • referrerpolicy="no-referrer-when-downgrade"
  • sandbox: Enables inline HTML in an <iframe>, which introduces XSS risks.
  • sandbox="allow-scripts allow-same-origin"

Client-Side Implementation

The functionality of the <embed-email> tag relies entirely on the email client for execution. When an email client encounters this tag, it interprets the rel attribute to determine the correct platform (e.g., YouTube or Spotify) and dynamically replaces the tag with the appropriate embedding code, such as an <iframe> or a necessary JavaScript snippet. This process ensures that only trusted, verified content is displayed while maintaining a seamless user experience, giving the email client control over the process.

Example 1: Replacing a YouTube Video

For a YouTube video, the <embed-email> tag will be replaced by an <iframe>:

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture">
</iframe>

Example 2: Replacing a Tweet from X (formerly Twitter)

The client might replace the <embed-email> tag with the script required by X:

<blockquote class="twitter-tweet">
<a href="https://twitter.com/username/status/1234567890"></a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
</script>

Example 3: Replacing a Spotify Track

The email client might replace the <embed-email> tag with an <iframe>:

<iframe src="https://open.spotify.com/embed/track/7GhIk7Il098yCjg4BQjzvb" 
width="300" height="380" allow="encrypted-media">
</iframe>

Sandbox Configuration Guidelines for Email Clients

Email clients are responsible for applying appropriate sandbox configurations when rendering embedded content. The following guidelines help ensure secure and privacy-respecting behavior across platforms.

Allowed Permissions
  • allow-scripts: Enables JavaScript execution within the embedded content, such as YouTube players or social widgets. Only scripts from the trusted embedded domain are allowed; raw JavaScript in the email itself remains disallowed.
  • allow-forms: Enables forms in the embedded content, consistent with the email standards for interactivity.
  • allow-popups: Popups may be allowed if controlled and opened in a new window (e.g., target="_blank") and are from trusted sources.
Restricted Permissions
  • allow-same-origin: This permission allows the sandboxed content to behave as if it were part of the same origin as the parent document, which introduces security risks and should generally be restricted.
  • allow-top-navigation: This permission allows embedded content to navigate the top-level browsing context, posing a phishing risk, and should be disallowed.
  • allow-modals: This permission is generally discouraged due to its intrusive nature, but may be allowed if the modal is triggered by trusted embedded content (e.g., platform login dialogs) and does not obstruct the entire email interface.

Security Considerations

Embedding third-party content into emails presents significant risks, including data breaches and unauthorized actions. The <embed-email> tag counters these risks by enforcing trusted sources, encrypted transmissions, and attribute-based security measures to ensure safe usage.

  • Trusted Domains: The rel attribute identifies the platform namespace (e.g., YouTube, Spotify) associated with the embedded content. Email clients are responsible for validating both the url and rel attributes to prevent the embedding of unauthorized or malicious third-party content. If there’s a mismatch between the rel and url attributes, the email client should reject the embed to prevent security risks.
  • Secure Transmission: All URLs specified in the url attribute must use HTTPS to ensure encrypted transmission and safeguard against data breaches.
  • Permission Enforcement: The allow attribute must be strictly enforced to prevent unauthorized actions, such as auto-play or accessing restricted features.
  • Privacy and Isolation: Implementing both the referrerpolicy and sandbox attributes is strongly recommended. These attributes ensure embedded content adheres to privacy standards while remaining isolated from potential vulnerabilities. These attributes provide layered protections: sandbox restricts embedded behavior, while referrerpolicy controls what information is shared during user interactions.