Application Launcher

Source CMS

HTML snippets

Source CMS

HTML snippets

Acquia Source CMS provides HTML snippets to insert custom Hypertext Markup Language (HTML), JavaScript, and tracking code into site <head> and <body> sections without theme file modification or code deployment. Third-party integrations require script tags or meta tags on a site. The HTML snippets configuration form provides a secure method to perform these additions in Content Security Policy (CSP) constraints.

Configuration details

Path: /admin/config/search/html-snippets
Permission required: Administer HTML snippet

Adding HTML snippets

To add HTML snippet:

Log in to Acquia Source CMS to open the Sites Dashboard.
On the Sites tab, locate the site to which you want to add a domain.
Click Edit Site.
On the left navigation menu, click Configuration.
The system displays the Configuration menu.
Click Search and metadata.
In the Drop-down menu, select HTML Snippet.
Paste the code into the designated field based on the script requirements:

Configuration details

Path: /admin/config/search/html-snippets
Permission required: Administer HTML snippet

Adding HTML snippets

To add HTML snippet:

Log in to Acquia Source CMS to open the Sites Dashboard.
On the Sites tab, locate the site to which you want to add a domain.
Click Edit Site.
On the left navigation menu, click Configuration.
The system displays the Configuration menu.
Click Search and metadata.
In the Drop-down menu, select HTML Snippet.
Paste the code into the designated field based on the script requirements:

Configuration details

Path: /admin/config/search/html-snippets
Permission required: Administer HTML snippet

Adding HTML snippets

To add HTML snippet:

Log in to Acquia Source CMS to open the Sites Dashboard.
On the Sites tab, locate the site to which you want to add a domain.
Click Edit Site.
On the left navigation menu, click Configuration.
The system displays the Configuration menu.
Click Search and metadata.
In the Drop-down menu, select HTML Snippet.
Paste the code into the designated field based on the script requirements:
- Start of <head>: Use this field for scripts that must load early such as consent managers, Search Engine Optimization (SEO) verification tags, or analytics base scripts.
  Allowed tags include script, style, meta, link, title, and noscript.
- End of <body>: Use this field for scripts that render User Interface (UI) elements such as chat widgets, feedback tools, or accessibility overlays.
  Allowed tags include script, div, span, noscript, iframe, and img.
Toggle Load HTML snippets in Drupal Canvas Preview if snippets must open during content edits in Drupal Canvas.

Note

HTML snippets do not load in Drupal Canvas page builder preview by default. You must select the Load HTML snippets in Drupal Canvas Preview checkbox if a snippet is a requirement to edit content, such as a consent banner that affects layout.

Click Save configuration.

Note

Changes take effect immediately on the published site. snippets do not load on the editorial domain by default.

Security and script execution

Acquia Source CMS enforces a strict CSP to protect sites from Cross-Site Request Forgery (CSRF) and Cross-Site Scripting (XSS) attacks. When you add <script> tags through HTML snippets, the system assigns a cryptographic nonce to each script tag. This nonce enables script execution without a reduction in site security.

Scripts that inject dynamically at runtime such as those through Google Tag Manager (GTM) Custom HTML tag types do not receive a nonce. CSP blocks these scripts to maintain site security.

Adding tracking and integration scripts

Insert code for third-party tools such as chat widgets, accessibility tools, or consent banners, directly through HTML Snippets.

If you use external tools such as GTM to inject these scripts, you must configure your tags to pass the CSP nonce. Otherwise, the browser's Content Security Policy (CSP) will block the script injection to protect the site from Cross-Site Scripting (XSS) attacks. Standard market analysis tags and analytics in GTM work without additional configuration.

Integration script locations

Script type determines the selection between GTM and HTML snippets.

HTML snippets: Use HTML snippets for third-party tools, such as chat widgets, accessibility tools, or consent banners to easily avoid CSP blocks.
Google Tag Manager: Standard analytics and market analysis tags work by default. If your implementation requires the Custom HTML tag type for inline scripts, you must use the nonce passthrough method detailed below to prevent browser CSP blocks.

Using GTM Custom HTML tags with CSP nonces

When configuring Google Tag Manager on Acquia Source CMS, you must choose how to handle custom inline scripts so they comply with the platform's Content Security Policy (CSP).

Choose the approach that best fits your implementation:

Few inline scripts: If your GTM container relies on a few inline scripts, remove them from GTM and add them directly into HTML snippets. For more information, refer to Adding HTML snippets.
Many inline scripts: If you have a complex GTM container with numerous Custom HTML tags, use the nonce passthrough method. For more information, refer to Nonce passthrough configuration process.

The nonce passthrough method captures the platform-generated CSP nonce at runtime. This method makes the nonce available to all Custom HTML tags in GTM container to execute them securely.

CSP nonce passthrough mechanism

The nonce passthrough method captures the platform-generated CSP nonce at runtime and makes it available to all Custom HTML tags in the GTM container to execute them securely.

Acquia Source CMS applies a CSP nonce to the GTM snippet when you add it through HTML snippets. The document.currentScript.nonce property captures this nonce at execution time before the browser removes it from the Document Object Model (DOM). GTM templates the nonce value into every Custom HTML tag that references the {{csp-nonce}} variable. This method ensures all Custom HTML tags remain in the GTM container with intact page-specific triggers and sequences.

Important

Do not hardcode nonce values copied from the page source into GTM tags. Acquia Source CMS regenerates nonces after you save the HTML snippets configuration. Hardcoded values become invalid immediately after a configuration change.

GTM Custom JavaScript Variable limitations

GTM Custom JavaScript variables do not work on Acquia Source CMS sites. GTM executes these variables with eval() and new Function(), which the platform's CSP policy blocks because it does not allow unsafe-eval.

Instead, Acquia recommends using Custom Variable Templates. Because these templates run in a sandboxed JavaScript environment, they bypass the need for eval() and function securely without requiring any CSP changes.

To create a template:

In the GTM workspace, navigate to Templates > Variable Templates > New.

Note

Standard JavaScript functions such as Date are not available in the sandboxed environment. However, GTM provides built-in API alternatives to achieve most common use cases.

Nonce passthrough configuration process

The nonce passthrough configuration workflow consists of the following tasks:

S.No.	Task	Description
1.	Update the GTM snippet	Replace the standard GTM snippet in HTML snippets to capture the platform-generated nonce.
2.	Create a Data Layer Variable	Create a specific variable in the GTM workspace to store the captured nonce.
3.	Update Custom HTML tags	Add the nonce attribute to each Custom HTML tag that contains inline scripts.

Update the GTM snippet in HTML snippets

To update the GTM snippet in HTML snippets:

Replace the standard GTM snippet in the HTML snippets form at /admin/config/search/html-snippets with the following version. This snippet captures the platform-generated nonce and pushes it to the dataLayer:

Note

Replace GTM-XXXXXX with your GTM container ID.

<script>
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  var currentNonce = d.currentScript ? d.currentScript.nonce : '';
  w[l].push({'csp_nonce': currentNonce});
  w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
</script>

Create a Data Layer Variable in GTM

To create a Data Layer Variable in GTM:

In the GTM workspace, create a new Data Layer Variable.
Enter csp_nonce as the Data Layer Variable Name.
Select Version 2 for the Data Layer Version.
Enter csp-nonce to name the variable.

Updating Custom HTML tags

To update Custom HTML tags:

In each Custom HTML tag that contains inline scripts, add the nonce attribute with the variable created previously in task: Create a Data Layer Variable in GTM:
```
<script nonce="{{csp-nonce}}">
// your existing inline JavaScript here
</script>
```
Under the tag's Advanced Settings, select Support document.write.

Start of <head>: Use this field for scripts that must load early such as consent managers, Search Engine Optimization (SEO) verification tags, or analytics base scripts.
Allowed tags include script, style, meta, link, title, and noscript.
End of <body>: Use this field for scripts that render User Interface (UI) elements such as chat widgets, feedback tools, or accessibility overlays.
Allowed tags include script, div, span, noscript, iframe, and img.

Toggle Load HTML snippets in Drupal Canvas Preview if snippets must open during content edits in Drupal Canvas.

Note

Click Save configuration.

Note

Changes take effect immediately on the published site. snippets do not load on the editorial domain by default.

Security and script execution

Scripts that inject dynamically at runtime such as those through Google Tag Manager (GTM) Custom HTML tag types do not receive a nonce. CSP blocks these scripts to maintain site security.

Adding tracking and integration scripts

Insert code for third-party tools such as chat widgets, accessibility tools, or consent banners, directly through HTML Snippets.

Integration script locations

Script type determines the selection between GTM and HTML snippets.

HTML snippets: Use HTML snippets for third-party tools, such as chat widgets, accessibility tools, or consent banners to easily avoid CSP blocks.
Google Tag Manager: Standard analytics and market analysis tags work by default. If your implementation requires the Custom HTML tag type for inline scripts, you must use the nonce passthrough method detailed below to prevent browser CSP blocks.

Using GTM Custom HTML tags with CSP nonces

When configuring Google Tag Manager on Acquia Source CMS, you must choose how to handle custom inline scripts so they comply with the platform's Content Security Policy (CSP).

Choose the approach that best fits your implementation:

Few inline scripts: If your GTM container relies on a few inline scripts, remove them from GTM and add them directly into HTML snippets. For more information, refer to Adding HTML snippets.
Many inline scripts: If you have a complex GTM container with numerous Custom HTML tags, use the nonce passthrough method. For more information, refer to Nonce passthrough configuration process.

The nonce passthrough method captures the platform-generated CSP nonce at runtime. This method makes the nonce available to all Custom HTML tags in GTM container to execute them securely.

CSP nonce passthrough mechanism

The nonce passthrough method captures the platform-generated CSP nonce at runtime and makes it available to all Custom HTML tags in the GTM container to execute them securely.

Important

GTM Custom JavaScript Variable limitations

To create a template:

In the GTM workspace, navigate to Templates > Variable Templates > New.

Note

Standard JavaScript functions such as Date are not available in the sandboxed environment. However, GTM provides built-in API alternatives to achieve most common use cases.

The nonce passthrough configuration workflow consists of the following tasks:

S.No.	Task	Description
1.	Update the GTM snippet	Replace the standard GTM snippet in HTML snippets to capture the platform-generated nonce.
2.	Create a Data Layer Variable	Create a specific variable in the GTM workspace to store the captured nonce.
3.	Update Custom HTML tags	Add the nonce attribute to each Custom HTML tag that contains inline scripts.

To update the GTM snippet in HTML snippets:

Note

Replace GTM-XXXXXX with your GTM container ID.

<script>
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  var currentNonce = d.currentScript ? d.currentScript.nonce : '';
  w[l].push({'csp_nonce': currentNonce});
  w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
</script>

To create a Data Layer Variable in GTM:

In the GTM workspace, create a new Data Layer Variable.
Enter csp_nonce as the Data Layer Variable Name.
Select Version 2 for the Data Layer Version.
Enter csp-nonce to name the variable.

To update Custom HTML tags:

In each Custom HTML tag that contains inline scripts, add the nonce attribute with the variable created previously in task: Create a Data Layer Variable in GTM:
```
<script nonce="{{csp-nonce}}">
// your existing inline JavaScript here
</script>
```
Under the tag's Advanced Settings, select Support document.write.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.