chore: Add a HTMLRender component to render server side in HTML

Author: matiasperrone-exo

package.json

@@ -81,6 +81,7 @@
     "bootstrap-tagsinput": "^0.7.1",
     "chosen-js": "^1.8.7",
     "crypto-js": "^3.1.9-1",
+    "dompurify": "^3.4.11",
     "easymde": "^2.18.0",
     "font-awesome": "^4.7.0",
     "formik": "^2.2.9",
@@ -95,6 +96,7 @@
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.21",
     "popper.js": "^1.14.3",
+    "prop-types": "^15.8.1",
     "pure": "^2.85.0",
     "pwstrength-bootstrap": "^3.0.10",
     "react-otp-input": "^3.1.1",

resources/js/login/components/email_input_form.js

@@ -3,6 +3,7 @@ import Paper from "@material-ui/core/Paper";
 import TextField from "@material-ui/core/TextField";
 import Button from "@material-ui/core/Button";
 import styles from "../login.module.scss";
+import HTMLRender from "../../shared/HTMLRender";
 
 const EmailInputForm = ({
   value,
@@ -49,10 +50,9 @@ const EmailInputForm = ({
         )}
       </Paper>
       {emailError != "" && (
-        <p
-          className={styles.error_label}
-          dangerouslySetInnerHTML={{ __html: emailError }}
-        ></p>
+        <HTMLRender component="p" className={styles.error_label}>
+          {emailError}
+        </HTMLRender>
       )}
     </>
   );

resources/js/login/components/otp_input_form.js

@@ -4,6 +4,7 @@ import Button from "@material-ui/core/Button";
 import Link from "@material-ui/core/Link";
 import OtpInput from "react-otp-input";
 import styles from "../login.module.scss";
+import HTMLRender from "../../shared/HTMLRender";
 
 const OTPInputForm = ({
   disableInput,
@@ -52,10 +53,9 @@ const OTPInputForm = ({
           />
         </div>
         {otpError && (
-          <p
-            className={styles.error_label}
-            dangerouslySetInnerHTML={{ __html: otpError }}
-          ></p>
+          <HTMLRender component="p" className={styles.error_label}>
+            {otpError}
+          </HTMLRender>
         )}
         <div>
           <Button

resources/js/login/components/password_input_form.js

@@ -11,6 +11,7 @@ import InputAdornment from "@material-ui/core/InputAdornment";
 import IconButton from "@material-ui/core/IconButton";
 import ExistingAccountActions from "./existing_account_actions";
 import styles from "../login.module.scss";
+import HTMLRender from "../../shared/HTMLRender";
 
 const PasswordInputForm = ({
   formAction,
@@ -82,10 +83,9 @@ const PasswordInputForm = ({
     }
 
     return (
-      <p
-        className={styles.error_label}
-        dangerouslySetInnerHTML={{ __html: passwordError }}
-      />
+      <HTMLRender component="p" className={styles.error_label}>
+        {passwordError}
+      </HTMLRender>
     );
   };
 

resources/js/login/components/recovery_code_form.js

@@ -3,6 +3,7 @@ import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import Link from '@material-ui/core/Link';
 import styles from '../login.module.scss';
+import HTMLRender from '../../shared/HTMLRender';
 
 const RecoveryCodeForm = ({
                               recoveryCode,
@@ -50,9 +51,11 @@ const RecoveryCodeForm = ({
                 onChange={onRecoveryCodeChange}
                 error={!!recoveryError}
             />
-            {recoveryError &&
-                <p className={styles.error_label} dangerouslySetInnerHTML={{__html: recoveryError}}></p>
-            }
+            {recoveryError && (
+                <HTMLRender component="p" className={styles.error_label}>
+                {recoveryError}
+                </HTMLRender>
+            )}
             <div>
                 <Button variant="contained"
                         disabled={disableInput || recoveryCode === ''}

resources/js/login/components/two_factor_form.js

@@ -6,6 +6,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import OtpInput from 'react-otp-input';
 import {formatTime} from '../../utils';
 import styles from '../login.module.scss';
+import HTMLRender from '../../shared/HTMLRender';
 
 // Cooldown applied to the resend action to avoid hammering the resend endpoint
 // (the backend also rate-limits server-side).
@@ -89,7 +90,9 @@ const TwoFactorForm = ({
                 />
             </div>
             {otpError &&
-                <p className={styles.error_label} dangerouslySetInnerHTML={{__html: otpError}}></p>
+                <HTMLRender component="p" className={styles.error_label}>
+                    {otpError}
+                </HTMLRender>
             }
             <p className={styles.countdown}>
                 {expired

resources/js/shared/HTMLRender.jsx

@@ -0,0 +1,27 @@
+/* eslint-disable react/no-danger */
+import PropTypes from "prop-types";
+import DOMPurify from "dompurify";
+
+const HTMLRender = ({ children, className, style, component = "div" }) => {
+  const html = DOMPurify.sanitize(children || "");
+  const Component = component;
+
+  return (
+    <Component
+      style={style}
+      className={className}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};
+
+HTMLRender.propTypes = {
+  children: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.shape({
+    [PropTypes.string]: PropTypes.string
+  }),
+  component: PropTypes.elementType
+};
+
+export default HTMLRender;

yarn.lock

@@ -2047,6 +2047,11 @@
   dependencies:
     "@types/estree" "*"
 
+"@types/trusted-types@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
 "@types/ws@^8.5.5":
   version "8.18.1"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.18.1.tgz#48464e4bf2ddfd17db13d845467f6070ffea4aa9"
@@ -3645,6 +3650,13 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
+dompurify@^3.4.11:
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.4.11.tgz#29c8ba496475f279ef4015784068452fb14a0680"
+  integrity sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==
+  optionalDependencies:
+    "@types/trusted-types" "^2.0.7"
+
 dotenv-defaults@^1.0.2:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz#032c024f4b5906d9990eb06d722dc74cc60ec1bd"
@@ -6558,7 +6570,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==