The Core Components Embed Component allows embedding external content in an AEM content page.
The Core Component Embed Component allows the content author to define selected external content to be embedded within an AEM content page. In addition, there is an option to define free-form HTML to be embedded as well.
Version and Compatibility
The current version of the Embed Component is v1, which was introduced with release 2.7.0 of the Core Components in September 2019, and is described in this document.
The following table details all supported versions of the component, the AEM versions with which the versions of the component is compatible, and links to documentation for previous versions.
AEM as a Cloud Service
For more information about Core Component versions and releases, see the document Core Components Versions .
Sample Component Output
The configure dialog allows the content author to define the external resource to be embedded on the page. First choose which type of resource should be embedded:
For each type of embeddable, you can define ad
ID. This option allows to control the unique identifier of the component in the HTML and in the Data Layer .
- If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
- If an ID is specified, it is the responsibility of the author to make sure that it is unique.
- Changing the ID can have an impact on CSS, JS and Data Layer tracking.
The simplest embed is the URL. Simply paste the URL of the resource you wish to embed in the
URLfield. The component will attempt to access the resource and if it can be rendered by one of the processors, it will display a confirmation message below the
URLfield. If not, the field will be marked in error.
The Embed Component ships with processors for the following types of resources:
Developers can add additional URL processors by following the developer documentation of the Embed Component.
Embeddables allow for more customization of the embedded resource, which can be parameterized and include additional information. An author is able to select from pre-configured trusted embeddables and the component ships with a Youtube embeddable out-of-the-box.
Embeddablefield defines the type of processor you want to use. In the case of the YouTube embeddable you can then define:
- Video ID- The unique video ID from YouTube of the resource you want to embed
- Width- The width of the embedded video
- Height- The height of the embedded video
Other embeddables would offer similar fields and can be defined by a developer by following the developer documentation of the Embed Component.
You can add free-form HTML to your page using the Embed Component.
Any unsafe tags such as scripts will be filtered from the entered HTML and will not be rendered on the resulting page.
The HTML markup that the author can enter is filtered for security purposes to avoid cross-site scripting attacks that could for example allow authors to gain administrative rights.
In general,all script and
styleelements as well as all
styleattributes will be removed from the output.
However the rules are more complicated because the Embed Component follows AEM’s global HTML AntiSamy sanitation framework filtering rule set, which can be found at
/libs/cq/xssprotection/config.xml. This can be overlaid for project-specific configuration by a developer if required.
Additional security information can be found in the AEM developer documentation for on-premise installations as well as AEM as a Cloud Service installations.
Although the AntiSamy sanitation framework rules can be configured by overlaying
/libs/cq/xssprotection/config.xml, these changes affect all HTL and JSP behavior and not just the Embed Core Component.
The design dialog allows the template author to define the options available to the content author who uses the Embed Component and the defaults set when placing the Embed Component.
- Disable URL- Disables theURLoption for the content author when selected
- Disable Embeddables- Disables theEmbeddableoption for the content author when selected, regardless of which embeddable processors are allowed.
- Disable HTML- Disables theHTMLoption for the content author when selected.
- Allowed Embeddables- Multislect that defines which embeddable processors are available to the content author, provided that theEmbeddableoption is active.