@hellotext/hellotext 2.5.0 → 2.5.2

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.0",
+  "version": "2.5.2",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
   "main": "lib/index.cjs",
@@ -55,7 +55,7 @@
     "jest-environment-jsdom": "^29.3.1",
     "prettier": "2.8.2",
     "style-loader": "^3.3.1",
-    "webpack": "^5.75.0",
+    "webpack": "^5.107.2",
     "webpack-cli": "^5.0.1",
     "whatwg-fetch": "^3.6.20"
   },
@@ -94,7 +94,11 @@
     "@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"
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610",
+  "resolutions": {
+    "@babel/traverse": "7.23.2"
+  }
 }

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)