@justeattakeaway/pie-cookie-banner 1.8.2 → 1.9.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-cookie-banner",
   "description": "PIE Design System Cookie Banner built using Web Components",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -50,18 +50,19 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.1.2",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.4",
+    "@justeattakeaway/pie-css": "1.2.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.5",
     "@justeattakeaway/pie-wrapper-react": "0.14.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "1.14.2",
-    "@justeattakeaway/pie-divider": "1.5.24",
-    "@justeattakeaway/pie-icon-button": "2.7.17",
-    "@justeattakeaway/pie-link": "1.3.33",
-    "@justeattakeaway/pie-modal": "1.26.9",
-    "@justeattakeaway/pie-switch": "2.4.1",
-    "@justeattakeaway/pie-webc-core": "14.0.2"
+    "@justeattakeaway/pie-button": "1.14.4",
+    "@justeattakeaway/pie-divider": "1.5.25",
+    "@justeattakeaway/pie-icon-button": "2.7.19",
+    "@justeattakeaway/pie-link": "1.3.35",
+    "@justeattakeaway/pie-modal": "1.26.11",
+    "@justeattakeaway/pie-switch": "2.4.2",
+    "@justeattakeaway/pie-webc-core": "15.0.0",
+    "dompurify": "3.4.8"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [

package/src/index.ts

@@ -9,6 +9,7 @@ import {
     property, state, queryAll,
 } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 import '@justeattakeaway/pie-button';
 import '@justeattakeaway/pie-divider';
@@ -39,7 +40,7 @@ import {
     type LanguageCode,
 } from './defs';
 
-import { localiseText, localiseRichText } from './localisation-utils';
+import { localiseText, localiseRichText, sanitiseDescriptionHtml } from './localisation-utils';
 
 // Valid values available to consumers
 export * from './defs';
@@ -262,7 +263,7 @@ export class PieCookieBanner extends PieElement implements CookieBannerProps {
             <div class="c-cookieBanner-preference">
                 <div>
                     <h3 class="c-cookieBanner-subheading">${title}</h3>
-                     ${description ? html`<p class="c-cookieBanner-description">${description}</p>` : nothing}
+                     ${description ? html`<p class="c-cookieBanner-description">${unsafeHTML(sanitiseDescriptionHtml(description, this._linkTargetAttribute))}</p>` : nothing}
                  </div>
                 <pie-switch
                     id="${id}"

package/src/localisation-utils.ts

@@ -1,4 +1,5 @@
 import { type TemplateResult } from 'lit';
+import DOMPurify from 'dompurify';
 
 import { type CookieBannerLocale, type CustomTagEnhancers } from './defs';
 
@@ -134,6 +135,61 @@ function enhanceCustomTags (richText:string, customTagEnhancers:CustomTagEnhance
         });
 }
 
+/**
+ * Sanitises an HTML string to allow only safe <a> tags, and normalises anchor
+ * attributes to respect the component's link-target behaviour.
+ *
+ * Uses DOMPurify for the core sanitisation:
+ * - Strips all non-<a> elements (keeping their text content).
+ * - Removes unsafe href protocols (javascript:, data:, vbscript:).
+ * - Removes non-allowlisted attributes (only href, rel, target survive).
+ *
+ * A post-sanitisation hook then enforces target/rel:
+ * - Sets target to linkTarget (overrides any existing target).
+ * - Ensures rel contains "noopener noreferrer" when target="_blank"
+ *   (prevents reverse-tabnabbing).
+ *
+ * In SSR / non-browser environments (no `window`), all HTML is stripped and
+ * only the text content is returned — the client will re-render with the full
+ * sanitisation pass after hydration.
+ */
+export function sanitiseDescriptionHtml (input: string, linkTarget = '_blank'): string {
+    if (typeof window === 'undefined') {
+        return input.replace(/<[^>]*>/g, '');
+    }
+
+    const normalisedLinkTarget = linkTarget === '_self' ? '_self' : '_blank';
+
+    const enforceAnchorAttributes = (node: Element) => {
+        if (node.tagName !== 'A') return;
+
+        node.setAttribute('target', normalisedLinkTarget);
+
+        if (normalisedLinkTarget !== '_blank') {
+            node.removeAttribute('rel');
+            return;
+        }
+
+        const relTokens = new Set((node.getAttribute('rel') ?? '')
+            .split(/\s+/)
+            .filter(Boolean));
+        relTokens.add('noopener');
+        relTokens.add('noreferrer');
+        node.setAttribute('rel', Array.from(relTokens).join(' '));
+    };
+
+    try {
+        DOMPurify.addHook('afterSanitizeAttributes', enforceAnchorAttributes);
+
+        return DOMPurify.sanitize(input, {
+            ALLOWED_TAGS: ['a'],
+            ALLOWED_ATTR: ['href', 'rel', 'target'],
+        }) as string;
+    } finally {
+        DOMPurify.removeHook('afterSanitizeAttributes');
+    }
+}
+
 /**
  * Localises a rich text string by replacing custom tags with their respective enhancer functions content
  * If the key is not found, it will be used as fallback