@hellotext/hellotext 2.5.1 → 2.5.2

package/dist/hellotext.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! @license DOMPurify 3.4.13 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.13/LICENSE */

package/lib/controllers/webchat_controller.cjs

@@ -11,6 +11,7 @@ var _webchat_channel = _interopRequireDefault(require("../channels/webchat_chann
 var _hellotext = _interopRequireDefault(require("../hellotext"));
 var _core = require("../core");
 var _webchat = require("../core/configuration/webchat");
+var _sanitize_html = require("../core/sanitize_html");
 var _usePopover = require("./mixins/usePopover");
 var _useBehaviour = require("./webchat/useBehaviour");
 var _useOpeningSequence = require("./webchat/useOpeningSequence");
@@ -265,8 +266,6 @@ let _default = /*#__PURE__*/function (_Controller) {
           attachments
         } = message;
         const createdAt = message.created_at || message.createdAt;
-        const div = document.createElement('div');
-        div.innerHTML = body;
         const element = this.messageTemplateTarget.cloneNode(true);
         element.classList.add('hellotext--webchat-message');
         element.setAttribute('data-hellotext--webchat-target', 'message');
@@ -275,7 +274,7 @@ let _default = /*#__PURE__*/function (_Controller) {
           element.setAttribute('data-created-at', createdAt);
         }
         element.style.removeProperty('display');
-        element.querySelector('[data-body]').innerHTML = div.innerHTML;
+        (0, _sanitize_html.setSanitizedRichText)(element.querySelector('[data-body]'), body);
         if (message.state === 'received') {
           element.classList.add('received');
         } else {
@@ -412,12 +411,10 @@ let _default = /*#__PURE__*/function (_Controller) {
       if (message.carousel) {
         return this.insertCarouselMessage(message, options);
       }
-      const div = document.createElement('div');
-      div.innerHTML = body;
       const element = this.messageTemplateTarget.cloneNode(true);
       element.classList.add('hellotext--webchat-message');
       element.style.display = 'flex';
-      element.querySelector('[data-body]').innerHTML = div.innerHTML;
+      (0, _sanitize_html.setSanitizedRichText)(element.querySelector('[data-body]'), body);
       element.setAttribute('data-id', id);
       element.setAttribute('data-hellotext--webchat-target', 'message');
       this.setMessageCreatedAt(element, createdAt);
@@ -533,7 +530,7 @@ let _default = /*#__PURE__*/function (_Controller) {
         return;
       }
       this.teaserMessageTargets.forEach(teaserMessage => teaserMessage.classList.add('hidden'));
-      this.inboundMessageTeaserBodyTarget.innerHTML = this.messageTeaserValue;
+      this.inboundMessageTeaserBodyTarget.textContent = this.messageTeaserValue;
       this.inboundMessageTeaserTarget.classList.remove('hidden');
       this.teaserTarget.classList.toggle('invisible', this.openValue);
     }
@@ -543,7 +540,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       var _element$querySelecto;
       const html = message.html;
       const createdAt = message.created_at || message.createdAt;
-      const element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild;
+      const element = (0, _sanitize_html.sanitizedWebchatComponentFragment)(html).firstElementChild;
       element.classList.add('hellotext--webchat-message');
       element.setAttribute('data-id', message.id);
       element.setAttribute('data-hellotext--webchat-target', 'message');

package/lib/controllers/webchat_controller.js

@@ -24,6 +24,7 @@ import WebchatChannel from '../channels/webchat_channel';
 import Hellotext from '../hellotext';
 import { Locale } from '../core';
 import { Webchat as WebchatConfiguration, modes } from '../core/configuration/webchat';
+import { sanitizedWebchatComponentFragment, setSanitizedRichText } from '../core/sanitize_html';
 import { usePopover } from './mixins/usePopover';
 import { useBehaviour } from './webchat/useBehaviour';
 import { useOpeningSequence } from './webchat/useOpeningSequence';
@@ -264,8 +265,6 @@ var _default = /*#__PURE__*/function (_Controller) {
             attachments
           } = message;
           var createdAt = message.created_at || message.createdAt;
-          var div = document.createElement('div');
-          div.innerHTML = body;
           var element = this.messageTemplateTarget.cloneNode(true);
           element.classList.add('hellotext--webchat-message');
           element.setAttribute('data-hellotext--webchat-target', 'message');
@@ -274,7 +273,7 @@ var _default = /*#__PURE__*/function (_Controller) {
             element.setAttribute('data-created-at', createdAt);
           }
           element.style.removeProperty('display');
-          element.querySelector('[data-body]').innerHTML = div.innerHTML;
+          setSanitizedRichText(element.querySelector('[data-body]'), body);
           if (message.state === 'received') {
             element.classList.add('received');
           } else {
@@ -417,12 +416,10 @@ var _default = /*#__PURE__*/function (_Controller) {
       if (message.carousel) {
         return this.insertCarouselMessage(message, options);
       }
-      var div = document.createElement('div');
-      div.innerHTML = body;
       var element = this.messageTemplateTarget.cloneNode(true);
       element.classList.add('hellotext--webchat-message');
       element.style.display = 'flex';
-      element.querySelector('[data-body]').innerHTML = div.innerHTML;
+      setSanitizedRichText(element.querySelector('[data-body]'), body);
       element.setAttribute('data-id', id);
       element.setAttribute('data-hellotext--webchat-target', 'message');
       this.setMessageCreatedAt(element, createdAt);
@@ -543,7 +540,7 @@ var _default = /*#__PURE__*/function (_Controller) {
         return;
       }
       this.teaserMessageTargets.forEach(teaserMessage => teaserMessage.classList.add('hidden'));
-      this.inboundMessageTeaserBodyTarget.innerHTML = this.messageTeaserValue;
+      this.inboundMessageTeaserBodyTarget.textContent = this.messageTeaserValue;
       this.inboundMessageTeaserTarget.classList.remove('hidden');
       this.teaserTarget.classList.toggle('invisible', this.openValue);
     }
@@ -554,7 +551,7 @@ var _default = /*#__PURE__*/function (_Controller) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var html = message.html;
       var createdAt = message.created_at || message.createdAt;
-      var element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild;
+      var element = sanitizedWebchatComponentFragment(html).firstElementChild;
       element.classList.add('hellotext--webchat-message');
       element.setAttribute('data-id', message.id);
       element.setAttribute('data-hellotext--webchat-target', 'message');

package/lib/core/sanitize_html.cjs

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sanitizedRichTextFragment = sanitizedRichTextFragment;
+exports.sanitizedWebchatComponentFragment = sanitizedWebchatComponentFragment;
+exports.setSanitizedRichText = setSanitizedRichText;
+var _dompurify = _interopRequireDefault(require("dompurify"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const RICH_TEXT_SANITIZER_OPTIONS = {
+  ADD_ATTR: ['target'],
+  ALLOW_DATA_ATTR: false,
+  RETURN_DOM_FRAGMENT: true,
+  USE_PROFILES: {
+    html: true
+  }
+};
+const WEBCHAT_COMPONENT_SANITIZER_OPTIONS = {
+  ADD_ATTR: ['target'],
+  ADD_TAGS: ['hellotext-icon'],
+  RETURN_DOM_FRAGMENT: true,
+  USE_PROFILES: {
+    html: true,
+    svg: true
+  }
+};
+function sanitizedFragment(html, options) {
+  const fragment = _dompurify.default.sanitize(html, options);
+  fragment.querySelectorAll('a[target="_blank"]').forEach(link => {
+    const rel = new Set(link.rel.split(/\s+/).filter(Boolean));
+    rel.add('noopener');
+    rel.add('noreferrer');
+    link.rel = Array.from(rel).join(' ');
+  });
+  return fragment;
+}
+function sanitizedRichTextFragment(html) {
+  return sanitizedFragment(html, RICH_TEXT_SANITIZER_OPTIONS);
+}
+function sanitizedWebchatComponentFragment(html) {
+  return sanitizedFragment(html, WEBCHAT_COMPONENT_SANITIZER_OPTIONS);
+}
+function setSanitizedRichText(element, html) {
+  element.replaceChildren(sanitizedRichTextFragment(html));
+}

package/lib/core/sanitize_html.js

@@ -0,0 +1,37 @@
+import DOMPurify from 'dompurify';
+var RICH_TEXT_SANITIZER_OPTIONS = {
+  ADD_ATTR: ['target'],
+  ALLOW_DATA_ATTR: false,
+  RETURN_DOM_FRAGMENT: true,
+  USE_PROFILES: {
+    html: true
+  }
+};
+var WEBCHAT_COMPONENT_SANITIZER_OPTIONS = {
+  ADD_ATTR: ['target'],
+  ADD_TAGS: ['hellotext-icon'],
+  RETURN_DOM_FRAGMENT: true,
+  USE_PROFILES: {
+    html: true,
+    svg: true
+  }
+};
+function sanitizedFragment(html, options) {
+  var fragment = DOMPurify.sanitize(html, options);
+  fragment.querySelectorAll('a[target="_blank"]').forEach(link => {
+    var rel = new Set(link.rel.split(/\s+/).filter(Boolean));
+    rel.add('noopener');
+    rel.add('noreferrer');
+    link.rel = Array.from(rel).join(' ');
+  });
+  return fragment;
+}
+export function sanitizedRichTextFragment(html) {
+  return sanitizedFragment(html, RICH_TEXT_SANITIZER_OPTIONS);
+}
+export function sanitizedWebchatComponentFragment(html) {
+  return sanitizedFragment(html, WEBCHAT_COMPONENT_SANITIZER_OPTIONS);
+}
+export function setSanitizedRichText(element, html) {
+  element.replaceChildren(sanitizedRichTextFragment(html));
+}

package/lib/models/form.cjs

@@ -7,6 +7,7 @@ exports.Form = void 0;
 var _hellotext = _interopRequireDefault(require("../hellotext"));
 var _input_builder = require("../builders/input_builder");
 var _logo_builder = require("../builders/logo_builder");
+var _sanitize_html = require("../core/sanitize_html");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -58,7 +59,7 @@ let Form = /*#__PURE__*/function () {
     key: "buildHeader",
     value: function buildHeader(header) {
       const headerElement = _classPrivateFieldLooseBase(this, _findOrCreateComponent)[_findOrCreateComponent]('[data-form-header]', 'header');
-      headerElement.innerHTML = header.content;
+      (0, _sanitize_html.setSanitizedRichText)(headerElement, header.content);
       if (this.element.querySelector('[data-form-header]')) {
         this.element.querySelector('[data-form-header]').replaceWith(headerElement);
       } else {
@@ -94,7 +95,7 @@ let Form = /*#__PURE__*/function () {
     key: "buildFooter",
     value: function buildFooter(footer) {
       const element = _classPrivateFieldLooseBase(this, _findOrCreateComponent)[_findOrCreateComponent]('[data-form-footer]', 'footer');
-      element.innerHTML = footer.content;
+      (0, _sanitize_html.setSanitizedRichText)(element, footer.content);
       if (this.element.querySelector('[data-form-footer]')) {
         this.element.querySelector('[data-form-footer]').replaceWith(element);
       } else {

package/lib/models/form.js

@@ -14,6 +14,7 @@ function _classPrivateFieldLooseKey(name) { return "__private_" + id++ + "_" + n
 import Hellotext from '../hellotext';
 import { InputBuilder } from '../builders/input_builder';
 import { LogoBuilder } from '../builders/logo_builder';
+import { setSanitizedRichText } from '../core/sanitize_html';
 var _findOrCreateComponent = /*#__PURE__*/_classPrivateFieldLooseKey("findOrCreateComponent");
 var Form = /*#__PURE__*/function () {
   function Form(data) {
@@ -63,7 +64,7 @@ var Form = /*#__PURE__*/function () {
     key: "buildHeader",
     value: function buildHeader(header) {
       var headerElement = _classPrivateFieldLooseBase(this, _findOrCreateComponent)[_findOrCreateComponent]('[data-form-header]', 'header');
-      headerElement.innerHTML = header.content;
+      setSanitizedRichText(headerElement, header.content);
       if (this.element.querySelector('[data-form-header]')) {
         this.element.querySelector('[data-form-header]').replaceWith(headerElement);
       } else {
@@ -99,7 +100,7 @@ var Form = /*#__PURE__*/function () {
     key: "buildFooter",
     value: function buildFooter(footer) {
       var element = _classPrivateFieldLooseBase(this, _findOrCreateComponent)[_findOrCreateComponent]('[data-form-footer]', 'footer');
-      element.innerHTML = footer.content;
+      setSanitizedRichText(element, footer.content);
       if (this.element.querySelector('[data-form-footer]')) {
         this.element.querySelector('[data-form-footer]').replaceWith(element);
       } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
   "main": "lib/index.cjs",
@@ -94,6 +94,7 @@
     "@emoji-mart/data": "^1.2.1",
     "@floating-ui/dom": "^1.7.3",
     "@hotwired/stimulus": "^3.0.0",
+    "dompurify": "^3.4.13",
     "emoji-mart": "^5.6.0"
   },
   "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610",

package/src/controllers/webchat_controller.js

@@ -7,6 +7,10 @@ import Hellotext from '../hellotext'
 
 import { Locale } from '../core'
 import { Webchat as WebchatConfiguration, modes } from '../core/configuration/webchat'
+import {
+  sanitizedWebchatComponentFragment,
+  setSanitizedRichText,
+} from '../core/sanitize_html'
 
 import { usePopover } from './mixins/usePopover'
 import { useBehaviour } from './webchat/useBehaviour'
@@ -333,9 +337,6 @@ export default class extends Controller {
       const { body, attachments } = message
       const createdAt = message.created_at || message.createdAt
 
-      const div = document.createElement('div')
-      div.innerHTML = body
-
       const element = this.messageTemplateTarget.cloneNode(true)
 
       element.classList.add('hellotext--webchat-message')
@@ -348,7 +349,7 @@ export default class extends Controller {
 
       element.style.removeProperty('display')
 
-      element.querySelector('[data-body]').innerHTML = div.innerHTML
+      setSanitizedRichText(element.querySelector('[data-body]'), body)
 
       if (message.state === 'received') {
         element.classList.add('received')
@@ -497,14 +498,11 @@ export default class extends Controller {
       return this.insertCarouselMessage(message, options)
     }
 
-    const div = document.createElement('div')
-    div.innerHTML = body
-
     const element = this.messageTemplateTarget.cloneNode(true)
     element.classList.add('hellotext--webchat-message')
     element.style.display = 'flex'
 
-    element.querySelector('[data-body]').innerHTML = div.innerHTML
+    setSanitizedRichText(element.querySelector('[data-body]'), body)
 
     element.setAttribute('data-id', id)
     element.setAttribute('data-hellotext--webchat-target', 'message')
@@ -633,7 +631,7 @@ export default class extends Controller {
     }
 
     this.teaserMessageTargets.forEach(teaserMessage => teaserMessage.classList.add('hidden'))
-    this.inboundMessageTeaserBodyTarget.innerHTML = this.messageTeaserValue
+    this.inboundMessageTeaserBodyTarget.textContent = this.messageTeaserValue
     this.inboundMessageTeaserTarget.classList.remove('hidden')
 
     this.teaserTarget.classList.toggle('invisible', this.openValue)
@@ -642,7 +640,7 @@ export default class extends Controller {
   insertCarouselMessage(message, options = {}) {
     const html = message.html
     const createdAt = message.created_at || message.createdAt
-    const element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild
+    const element = sanitizedWebchatComponentFragment(html).firstElementChild
 
     element.classList.add('hellotext--webchat-message')
     element.setAttribute('data-id', message.id)

package/src/core/sanitize_html.js

@@ -0,0 +1,40 @@
+import DOMPurify from 'dompurify'
+
+const RICH_TEXT_SANITIZER_OPTIONS = {
+  ADD_ATTR: ['target'],
+  ALLOW_DATA_ATTR: false,
+  RETURN_DOM_FRAGMENT: true,
+  USE_PROFILES: { html: true },
+}
+
+const WEBCHAT_COMPONENT_SANITIZER_OPTIONS = {
+  ADD_ATTR: ['target'],
+  ADD_TAGS: ['hellotext-icon'],
+  RETURN_DOM_FRAGMENT: true,
+  USE_PROFILES: { html: true, svg: true },
+}
+
+function sanitizedFragment(html, options) {
+  const fragment = DOMPurify.sanitize(html, options)
+
+  fragment.querySelectorAll('a[target="_blank"]').forEach(link => {
+    const rel = new Set(link.rel.split(/\s+/).filter(Boolean))
+    rel.add('noopener')
+    rel.add('noreferrer')
+    link.rel = Array.from(rel).join(' ')
+  })
+
+  return fragment
+}
+
+export function sanitizedRichTextFragment(html) {
+  return sanitizedFragment(html, RICH_TEXT_SANITIZER_OPTIONS)
+}
+
+export function sanitizedWebchatComponentFragment(html) {
+  return sanitizedFragment(html, WEBCHAT_COMPONENT_SANITIZER_OPTIONS)
+}
+
+export function setSanitizedRichText(element, html) {
+  element.replaceChildren(sanitizedRichTextFragment(html))
+}

package/src/models/form.js

@@ -2,6 +2,7 @@ import Hellotext from '../hellotext'
 
 import { InputBuilder } from '../builders/input_builder'
 import { LogoBuilder } from '../builders/logo_builder'
+import { setSanitizedRichText } from '../core/sanitize_html'
 
 class Form {
   constructor(data, element = null) {
@@ -44,7 +45,7 @@ class Form {
 
   buildHeader(header) {
     const headerElement = this.#findOrCreateComponent('[data-form-header]', 'header')
-    headerElement.innerHTML = header.content
+    setSanitizedRichText(headerElement, header.content)
 
     if (this.element.querySelector('[data-form-header]')) {
       this.element.querySelector('[data-form-header]').replaceWith(headerElement)
@@ -86,7 +87,7 @@ class Form {
 
   buildFooter(footer) {
     const element = this.#findOrCreateComponent('[data-form-footer]', 'footer')
-    element.innerHTML = footer.content
+    setSanitizedRichText(element, footer.content)
 
     if (this.element.querySelector('[data-form-footer]')) {
       this.element.querySelector('[data-form-footer]').replaceWith(element)