Merge remote-tracking branch 'origin/CHI-3741-html_in_webchat_labels' into CHI-3741-html_in_webchat_labels

# Conflicts:
#	aselo-webchat-react-app/src/localization/LocalizedTemplate.tsx

Author: stephenhand

aselo-webchat-react-app/package-lock.json

@@ -12,7 +12,9 @@
     "@twilio-paste/icons": "^13.1.0",
     "@twilio-paste/theme": "^12.0.1",
     "@twilio/conversations": "2.1.0-rc.0",
+    "@types/dompurify": "^3.0.5",
     "@types/file-saver": "2.0.5",
+    "dompurify": "^3.3.3",
     "file-saver": "2.0.5",
     "google-auth-library": "8.5.1",
     "googleapis": "107.0.0",

aselo-webchat-react-app/package.json

@@ -13,11 +13,23 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
+import DOMPurify from 'dompurify';
 import { useSelector } from 'react-redux';
 
 import { localizeKey } from './localizeKey';
 import { selectCurrentTranslations } from '../store/config.reducer';
 
+/**
+ * Sanitization config that only allows links and text decoration tags.
+ * Blocks scripts, event handlers, javascript: URLs and all other unsafe content.
+ */
+const SANITIZE_CONFIG: DOMPurify.Config = {
+  ALLOWED_TAGS: ['a', 'b', 'i', 'em', 'strong', 'u', 's', 'span', 'br'],
+  ALLOWED_ATTR: ['href', 'rel'],
+};
+
+const sanitizeHtml = (html: string): string => DOMPurify.sanitize(html, SANITIZE_CONFIG) as string;
+
 const LocalizedTemplate: React.FC<{ code: string; renderAsHtml?: string } & Record<string, string>> = ({
   code,
   renderAsHtml,
@@ -26,8 +38,9 @@ const LocalizedTemplate: React.FC<{ code: string; renderAsHtml?: string } & Reco
   const translations = useSelector(selectCurrentTranslations);
   const translateForCurrentLocale = localizeKey(translations);
   if (renderAsHtml?.toLowerCase() === 'true') {
+    const safeHtml = sanitizeHtml(translateForCurrentLocale(code, parameters));
     // eslint-disable-next-line react/no-danger
-    return <span dangerouslySetInnerHTML={{ __html: translateForCurrentLocale(code, parameters) }} />;
+    return <span dangerouslySetInnerHTML={{ __html: safeHtml }} />;
   }
   return <>{translateForCurrentLocale(code, parameters)}</>;
 };