integrate dangerouslySetInnerHTML into custom components and sanityze it before rendering

_locales/en/messages.json

@@ -2348,5 +2348,16 @@
   },
   "or": {
     "message": "or"
+  },
+  "ByUsingThiService...": {
+    "message":
+      "By using this service, you agree to our <a>Terms and Conditions</a> and <a>Privacy Statement</a>"
+  },
+  "beginYourSession": {
+    "message": "Begin<br />your<br />Session."
+  },
+  "ensuringPeaceOfMind...": {
+    "message":
+      " Ensuring <span class=\"redacted\">peace of</span> mind, one <span class=\"redacted\">session</span> at a time."
   }
 }

ts/components/conversation/Linkify.tsx

@@ -4,6 +4,7 @@ import LinkifyIt from 'linkify-it';
 
 import { RenderTextCallbackType } from '../../types/Util';
 import { isLinkSneaky } from '../../../js/modules/link_previews';
+import { SessionHtmlRenderer } from '../session/SessionHTMLRenderer';
 
 const linkify = LinkifyIt();
 
@@ -29,17 +30,7 @@ export class Linkify extends React.Component<Props> {
 
     if (isRss && text.indexOf('</') !== -1) {
       results.push(
-        <div
-          key={count++}
-          dangerouslySetInnerHTML={{
-            __html: text
-              .replace(
-                /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
-                ''
-              )
-              .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, ''),
-          }}
-        />
+        <SessionHtmlRenderer key={count++} html={text} tag="div" />
       );
       // should already have links
 

ts/components/session/AccentText.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { LocalizerType } from '../../types/Util';
+import { SessionHtmlRenderer } from './SessionHTMLRenderer';
 
 interface Props {
   i18n: LocalizerType;
@@ -12,26 +13,21 @@ export class AccentText extends React.PureComponent<Props> {
   }
 
   public render() {
-    const { showSubtitle } = this.props;
+    const { showSubtitle, i18n } = this.props;
+
 
-    // FIXME find a better way than dangerouslySetInnerHTML to set those two strings in a localized way
     return (
       <div className="session-content-accent-text">
         <div className="session-content-accent-text title">
-          Begin
-          <br />
-          your
-          <br />
-          Session.
+          <SessionHtmlRenderer html={i18n('beginYourSession')} />
         </div>
         {showSubtitle ? (
           <div className="session-content-accent-text subtitle">
-            Ensuring <span className="redacted">peace of</span> mind, one{' '}
-            <span className="redacted">session</span> at a time.
+            <SessionHtmlRenderer html={i18n('ensuringPeaceOfMind...')} />
           </div>
         ) : (
-          ''
-        )}
+            ''
+          )}
       </div>
     );
   }

ts/components/session/RegistrationTabs.tsx

@@ -5,6 +5,7 @@ import { LocalizerType } from '../../types/Util';
 import { SessionInput } from './SessionInput';
 import { SessionButton, SessionButtonType } from './SessionButton';
 import { trigger } from '../../shims/events';
+import { SessionHtmlRenderer } from './SessionHTMLRenderer';
 
 interface Props {
   i18n: LocalizerType;
@@ -402,13 +403,12 @@ export class RegistrationTabs extends React.Component<Props, State> {
   }
 
   private renderTermsConditionAgreement() {
+    const { i18n } = this.props;
     // FIXME link to our Terms and Conditions and privacy statement
-    // FIXME find a better way than dangerouslySetInnerHTML to set this in a localized way
 
     return (
       <div className="session-terms-conditions-agreement">
-        By using this service, you agree to our <a>Terms and Conditions</a> and{' '}
-        <a>Privacy Statement</a>
+        <SessionHtmlRenderer html={i18n('ByUsingThiService...')} />
       </div>
     );
   }

ts/components/session/SessionHTMLRenderer.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import DOMPurify from 'dompurify';
+
+interface ReceivedProps {
+  html: string;
+  tag?: string;
+  key?: any;
+}
+
+type Props = ReceivedProps;
+
+export const SessionHtmlRenderer: React.SFC<Props> = ({ tag = 'div', key, html }) => {
+  const clean = DOMPurify.sanitize(html, {
+    USE_PROFILES: { html: true },
+    FORBID_ATTR: ['style', 'script'],
+  });
+
+  return React.createElement(tag, {
+    key,
+    dangerouslySetInnerHTML: { __html: clean },
+  });
+};