From 1869a6136b7785660b89ed8602fa62045f568abd Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 18 Mar 2024 10:51:07 +0100
Subject: [PATCH 1/4] fix(internet-header): Incomplete multi-character
 sanitization Code Scanning alert on hours field of internet-header footer

---
 .../internet-header/cypress/e2e/footer.cy.ts  | 18 +++++++++++++++++
 .../internet-header/test-configuration.json   | 20 +++++++++++++++++++
 .../post-footer-block-contact.component.tsx   | 18 ++++++++---------
 3 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/packages/internet-header/cypress/e2e/footer.cy.ts b/packages/internet-header/cypress/e2e/footer.cy.ts
index 618159dc41..83afed2159 100644
--- a/packages/internet-header/cypress/e2e/footer.cy.ts
+++ b/packages/internet-header/cypress/e2e/footer.cy.ts
@@ -54,5 +54,23 @@ describe('footer', () => {
         });
       });
     });
+
+    describe('block-contact', () => {
+      it('should display pure (without HTML) hours content as it is', () => {
+        prepare(FOOTER, 'Default');
+        cy.get('.block-contact .content-row .text')
+          .contains('Saturday')
+          .siblings('.hours')
+          .should('contain.text', '8am to 12 noon');
+      });
+
+      it('should remove wrapping HTML in hours content when value contains HTML', () => {
+        prepare(FOOTER, 'Default');
+        cy.get('.block-contact .content-row .text')
+          .contains('Bank holidays')
+          .siblings('.hours')
+          .should('contain.text', '8—12');
+      });
+    });
   });
 });
diff --git a/packages/internet-header/cypress/fixtures/internet-header/test-configuration.json b/packages/internet-header/cypress/fixtures/internet-header/test-configuration.json
index 65e5f7a3f2..01cd2f6f70 100644
--- a/packages/internet-header/cypress/fixtures/internet-header/test-configuration.json
+++ b/packages/internet-header/cypress/fixtures/internet-header/test-configuration.json
@@ -1237,6 +1237,16 @@
               "text": "Samstag",
               "title": null
             },
+            {
+              "address": null,
+              "describe": null,
+              "hours": "<p>8&emdash;12</p>",
+              "links": null,
+              "name": "days",
+              "number": null,
+              "text": "Bank holidays",
+              "title": null
+            },
             {
               "address": null,
               "describe": null,
@@ -3046,6 +3056,16 @@
               "text": "Saturday",
               "title": null
             },
+            {
+              "address": null,
+              "describe": null,
+              "hours": "<p>8&mdash;12</p>",
+              "links": null,
+              "name": "days",
+              "number": null,
+              "text": "Bank holidays",
+              "title": null
+            },
             {
               "address": null,
               "describe": null,
diff --git a/packages/internet-header/src/components/post-internet-footer/components/post-footer-block-contact.component.tsx b/packages/internet-header/src/components/post-internet-footer/components/post-footer-block-contact.component.tsx
index 1dbe1e50eb..baf16b5ccc 100644
--- a/packages/internet-header/src/components/post-internet-footer/components/post-footer-block-contact.component.tsx
+++ b/packages/internet-header/src/components/post-internet-footer/components/post-footer-block-contact.component.tsx
@@ -1,8 +1,10 @@
 import { h } from '@stencil/core';
 import { BlockEntity } from '../../../models/footer.model';
 
-const getContentHours = (hours: string) => hours.replace(/<[^>]*>?/gm, '');
-
+function stripHtml(html: string): string {
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  return doc.body.textContent || '';
+}
 const callUnblu = () => {
   if (typeof window['unbluLSLoad'] === 'function') {
     window['unbluLSLoad']();
@@ -14,13 +16,9 @@ const callUnblu = () => {
 };
 
 const LiveSupport = (props: { hours: string }) => (
-  <button
-    class="hours btn btn-link"
-    id="liveSupport"
-    type="button"
-    onClick={callUnblu}
-    innerHTML={getContentHours(props.hours)}
-  ></button>
+  <button class="hours btn btn-link" id="liveSupport" type="button" onClick={callUnblu}>
+    {stripHtml(props.hours)}
+  </button>
 );
 
 export const PostFooterBlockContact = (props: {
@@ -45,7 +43,7 @@ export const PostFooterBlockContact = (props: {
               {content.hours && isLiveSupport && <LiveSupport hours={content.hours} />}
               {content.hours && !isLiveSupport && (
                 // Some values arrive in the form of <p>8&emdash;12</p> and without replace and innerHTML, tags get rendered as text (project="klp" language="en" environment="int02")
-                <p class="hours" innerHTML={getContentHours(content.hours)}></p>
+                <p class="hours">{stripHtml(content.hours)}</p>
               )}
               {content.describe ? <p class="describe">{content.describe}</p> : null}
             </div>

From ead1c61706e95a59f246ac80835e1d480b87c692 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 18 Mar 2024 10:51:19 +0100
Subject: [PATCH 2/4] Add changeset

---
 .changeset/famous-cameras-kiss.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/famous-cameras-kiss.md

diff --git a/.changeset/famous-cameras-kiss.md b/.changeset/famous-cameras-kiss.md
new file mode 100644
index 0000000000..eb48b02f2a
--- /dev/null
+++ b/.changeset/famous-cameras-kiss.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/internet-header': patch
+---
+
+Sanitized hours fields in footer against XSS "Incomplete multi-character sanitization" issue.

From 5110fed136ec523d103f8b0d97b753b8ac825ce7 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 18 Mar 2024 10:52:15 +0100
Subject: [PATCH 3/4] Fix configuration

---
 .../fixtures/internet-header/test-configuration.json   | 10 ----------
 .../components/post-footer-block-contact.component.tsx |  2 +-
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/internet-header/cypress/fixtures/internet-header/test-configuration.json b/packages/internet-header/cypress/fixtures/internet-header/test-configuration.json
index 01cd2f6f70..ab95befce8 100644
--- a/packages/internet-header/cypress/fixtures/internet-header/test-configuration.json
+++ b/packages/internet-header/cypress/fixtures/internet-header/test-configuration.json
@@ -1237,16 +1237,6 @@
               "text": "Samstag",
               "title": null
             },
-            {
-              "address": null,
-              "describe": null,
-              "hours": "<p>8&emdash;12</p>",
-              "links": null,
-              "name": "days",
-              "number": null,
-              "text": "Bank holidays",
-              "title": null
-            },
             {
               "address": null,
               "describe": null,
diff --git a/packages/internet-header/src/components/post-internet-footer/components/post-footer-block-contact.component.tsx b/packages/internet-header/src/components/post-internet-footer/components/post-footer-block-contact.component.tsx
index baf16b5ccc..de47f01215 100644
--- a/packages/internet-header/src/components/post-internet-footer/components/post-footer-block-contact.component.tsx
+++ b/packages/internet-header/src/components/post-internet-footer/components/post-footer-block-contact.component.tsx
@@ -42,7 +42,7 @@ export const PostFooterBlockContact = (props: {
               {content.text ? <p class="text">{content.text}</p> : null}
               {content.hours && isLiveSupport && <LiveSupport hours={content.hours} />}
               {content.hours && !isLiveSupport && (
-                // Some values arrive in the form of <p>8&emdash;12</p> and without replace and innerHTML, tags get rendered as text (project="klp" language="en" environment="int02")
+                // Some values arrive in the form of <p>8&mdash;12</p> and without replace and innerHTML, tags get rendered as text (project="klp" language="en" environment="int02")
                 <p class="hours">{stripHtml(content.hours)}</p>
               )}
               {content.describe ? <p class="describe">{content.describe}</p> : null}

From 39c278d266ffb8a6f6b13bc80e7827a718c4c60a Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 18 Mar 2024 10:58:21 +0100
Subject: [PATCH 4/4] Revert change on innerhtml

---
 .../post-footer-block-contact.component.tsx          | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/internet-header/src/components/post-internet-footer/components/post-footer-block-contact.component.tsx b/packages/internet-header/src/components/post-internet-footer/components/post-footer-block-contact.component.tsx
index de47f01215..988394ec37 100644
--- a/packages/internet-header/src/components/post-internet-footer/components/post-footer-block-contact.component.tsx
+++ b/packages/internet-header/src/components/post-internet-footer/components/post-footer-block-contact.component.tsx
@@ -16,9 +16,13 @@ const callUnblu = () => {
 };
 
 const LiveSupport = (props: { hours: string }) => (
-  <button class="hours btn btn-link" id="liveSupport" type="button" onClick={callUnblu}>
-    {stripHtml(props.hours)}
-  </button>
+  <button
+    class="hours btn btn-link"
+    id="liveSupport"
+    type="button"
+    onClick={callUnblu}
+    innerHTML={stripHtml(props.hours)}
+  ></button>
 );
 
 export const PostFooterBlockContact = (props: {
@@ -43,7 +47,7 @@ export const PostFooterBlockContact = (props: {
               {content.hours && isLiveSupport && <LiveSupport hours={content.hours} />}
               {content.hours && !isLiveSupport && (
                 // Some values arrive in the form of <p>8&mdash;12</p> and without replace and innerHTML, tags get rendered as text (project="klp" language="en" environment="int02")
-                <p class="hours">{stripHtml(content.hours)}</p>
+                <p class="hours" innerHTML={stripHtml(content.hours)}></p>
               )}
               {content.describe ? <p class="describe">{content.describe}</p> : null}
             </div>