Merge pull request from GHSA-jr3j-whm4-9wwm

* Convert svg strings to elements * Sanitizing usage of dangerouslySetInnerHTML Co-authored-by: David <[email protected]>
auth0 · Jun 4, 2021 · d139cf0 · d139cf0
1 parent ac50559
commit d139cf0
Show file tree

Hide file tree

Showing 33 changed files with 1,191 additions and 205 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -9,6 +9,7 @@
     "react/display-name": 0,
     "react/prop-types": 1,
     "react/no-find-dom-node": 1,
-    "react/no-string-refs": 1
+    "react/no-string-refs": 1,
+    "react/no-danger": 2
   }
 }
diff --git a/README.md b/README.md
@@ -586,7 +586,8 @@ var options = {
     name: "newsletter",
     prefill: "true",
     placeholder: "I hereby agree that I want to receive marketing emails from your company",
-    // placeholderHTML - is an optional field  and overrides the value of placeholder
+    // placeholderHTML - is an optional field and overrides the value of placeholder
+    // do not use user inputted data for HTML fields as they are vulnerable to XSS
     placeholderHTML: "<b>I hereby agree that I want to receive marketing emails from your company</b>",
     // ariaLabel - is an optional field
     ariaLabel: "Activate Newsletter"

diff --git a/package.json b/package.json
@@ -106,6 +106,7 @@
     "auth0-js": "^9.16.2",
     "auth0-password-policies": "^1.0.2",
     "blueimp-md5": "2.3.1",
+    "dompurify": "^2.2.8",
     "immutable": "^3.7.3",
     "jsonp": "^0.2.1",
     "password-sheriff": "^1.1.0",

diff --git a/src/__tests__/connection/database/__snapshots__/password_reset_confirmation.test.jsx.snap b/src/__tests__/connection/database/__snapshots__/password_reset_confirmation.test.jsx.snap
@@ -7,13 +7,34 @@ exports[`PasswordResetConfirmation renders correctly 1`] = `
   <div
     className="auth0-lock-confirmation-content"
   >
-    <span
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<svg focusable=\\"false\\" width=\\"56px\\" height=\\"56px\\" viewBox=\\"0 0 52 52\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" class=\\"checkmark\\"> <circle cx=\\"26\\" cy=\\"26\\" r=\\"25\\" fill=\\"none\\" class=\\"checkmark__circle\\"></circle> <path fill=\\"none\\" d=\\"M14.1 27.2l7.1 7.2 16.7-16.8\\" class=\\"checkmark__check\\"></path> </svg>",
-        }
-      }
-    />
+    <span>
+      <svg
+        className="checkmark"
+        focusable="false"
+        height="56px"
+        version="1.1"
+        viewBox="0 0 52 52"
+        width="56px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+         
+        <circle
+          className="checkmark__circle"
+          cx="26"
+          cy="26"
+          fill="none"
+          r="25"
+        />
+         
+        <path
+          className="checkmark__check"
+          d="M14.1 27.2l7.1 7.2 16.7-16.8"
+          fill="none"
+        />
+         
+      </svg>
+    </span>
     <p />
   </div>
 </div>

diff --git a/src/__tests__/connection/database/__snapshots__/signed_up_confirmation.test.jsx.snap b/src/__tests__/connection/database/__snapshots__/signed_up_confirmation.test.jsx.snap
@@ -7,13 +7,34 @@ exports[`SignedUpConfirmation renders correctly 1`] = `
   <div
     className="auth0-lock-confirmation-content"
   >
-    <span
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<svg focusable=\\"false\\" width=\\"56px\\" height=\\"56px\\" viewBox=\\"0 0 52 52\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" class=\\"checkmark\\"> <circle cx=\\"26\\" cy=\\"26\\" r=\\"25\\" fill=\\"none\\" class=\\"checkmark__circle\\"></circle> <path fill=\\"none\\" d=\\"M14.1 27.2l7.1 7.2 16.7-16.8\\" class=\\"checkmark__check\\"></path> </svg>",
-        }
-      }
-    />
+    <span>
+      <svg
+        className="checkmark"
+        focusable="false"
+        height="56px"
+        version="1.1"
+        viewBox="0 0 52 52"
+        width="56px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+         
+        <circle
+          className="checkmark__circle"
+          cx="26"
+          cy="26"
+          fill="none"
+          r="25"
+        />
+         
+        <path
+          className="checkmark__check"
+          d="M14.1 27.2l7.1 7.2 16.7-16.8"
+          fill="none"
+        />
+         
+      </svg>
+    </span>
     <p />
   </div>
 </div>

diff --git a/src/__tests__/connection/enterprise/actions.test.js b/src/__tests__/connection/enterprise/actions.test.js
@@ -37,7 +37,7 @@ describe('Login with connection scopes', () => {
   });
 
   describe('for an SSO connection', () => {
-    it.only('passes connectionScopes to the connection', () => {
+    it('passes connectionScopes to the connection', () => {
       lock = l.setup('__lock__', 'client', 'domain', {
         auth: {
           connectionScopes: {
@@ -67,7 +67,7 @@ describe('Login with connection scopes', () => {
   });
 
   describe('for a non-SSO connection', () => {
-    it.only('passes connectionScopes to the connection', () => {
+    it('passes connectionScopes to the connection', () => {
       lock = l.setup('__lock__', 'client', 'domain', {
         auth: {
           connectionScopes: {

diff --git a/src/__tests__/connection/passwordless/__snapshots__/email_sent_confirmation.test.jsx.snap b/src/__tests__/connection/passwordless/__snapshots__/email_sent_confirmation.test.jsx.snap
@@ -7,41 +7,102 @@ exports[`EmailSentConfirmation renders correctly 1`] = `
   <span
     aria-label="close"
     className="auth0-lock-close-button"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "<svg aria-hidden=\\"true\\" focusable=\\"false\\" enable-background=\\"new 0 0 128 128\\" version=\\"1.1\\" viewBox=\\"0 0 128 128\\" xml:space=\\"preserve\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\"><g><polygon fill=\\"#373737\\" points=\\"123.5429688,11.59375 116.4765625,4.5185547 64.0019531,56.9306641 11.5595703,4.4882813     4.4882813,11.5595703 56.9272461,63.9970703 4.4570313,116.4052734 11.5244141,123.4814453 63.9985352,71.0683594     116.4423828,123.5117188 123.5126953,116.4414063 71.0732422,64.0019531   \\"></polygon></g></svg>",
-      }
-    }
     id="__lock-id__-close-button"
     onClick={[Function]}
     onKeyPress={[Function]}
     role="button"
     tabIndex={0}
-  />
+  >
+    <svg
+      aria-hidden="true"
+      enableBackground="new 0 0 128 128"
+      focusable="false"
+      version="1.1"
+      viewBox="0 0 128 128"
+      xmlSpace="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g>
+        <polygon
+          fill="#373737"
+          points="123.5429688,11.59375 116.4765625,4.5185547 64.0019531,56.9306641 11.5595703,4.4882813     4.4882813,11.5595703 56.9272461,63.9970703 4.4570313,116.4052734 11.5244141,123.4814453 63.9985352,71.0683594     116.4423828,123.5117188 123.5126953,116.4414063 71.0732422,64.0019531   "
+        />
+      </g>
+    </svg>
+  </span>
   <span
     aria-label="back"
     className="auth0-lock-back-button"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "<svg aria-hidden=\\"true\\" focusable=\\"false\\" enable-background=\\"new 0 0 24 24\\" version=\\"1.0\\" viewBox=\\"0 0 24 24\\" xml:space=\\"preserve\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\"> <polyline fill=\\"none\\" points=\\"12.5,21 3.5,12 12.5,3 \\" stroke=\\"#000000\\" stroke-miterlimit=\\"10\\" stroke-width=\\"2\\"></polyline> <line fill=\\"none\\" stroke=\\"#000000\\" stroke-miterlimit=\\"10\\" stroke-width=\\"2\\" x1=\\"22\\" x2=\\"3.5\\" y1=\\"12\\" y2=\\"12\\"></line> </svg>",
-      }
-    }
     id="__lock-id__-back-button"
     onClick={[Function]}
     onKeyPress={[Function]}
     role="button"
     tabIndex={0}
-  />
+  >
+    <svg
+      aria-hidden="true"
+      enableBackground="new 0 0 24 24"
+      focusable="false"
+      version="1.0"
+      viewBox="0 0 24 24"
+      xmlSpace="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+       
+      <polyline
+        fill="none"
+        points="12.5,21 3.5,12 12.5,3 "
+        stroke="#000000"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      />
+       
+      <line
+        fill="none"
+        stroke="#000000"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+        x1="22"
+        x2="3.5"
+        y1="12"
+        y2="12"
+      />
+       
+    </svg>
+  </span>
   <div
     className="auth0-lock-confirmation-content"
   >
-    <span
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<svg focusable=\\"false\\" width=\\"56px\\" height=\\"56px\\" viewBox=\\"0 0 52 52\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" class=\\"checkmark\\"> <circle cx=\\"26\\" cy=\\"26\\" r=\\"25\\" fill=\\"none\\" class=\\"checkmark__circle\\"></circle> <path fill=\\"none\\" d=\\"M14.1 27.2l7.1 7.2 16.7-16.8\\" class=\\"checkmark__check\\"></path> </svg>",
-        }
-      }
-    />
+    <span>
+      <svg
+        className="checkmark"
+        focusable="false"
+        height="56px"
+        version="1.1"
+        viewBox="0 0 52 52"
+        width="56px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+         
+        <circle
+          className="checkmark__circle"
+          cx="26"
+          cy="26"
+          fill="none"
+          r="25"
+        />
+         
+        <path
+          className="checkmark__check"
+          d="M14.1 27.2l7.1 7.2 16.7-16.8"
+          fill="none"
+        />
+         
+      </svg>
+    </span>
     <p>
       <span
         dangerouslySetInnerHTML={
@@ -59,13 +120,31 @@ exports[`EmailSentConfirmation renders correctly 1`] = `
       >
         
          
-        <span
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<svg focusable=\\"false\\" height=\\"32px\\" style=\\"enable-background:new 0 0 32 32;\\" version=\\"1.1\\" viewBox=\\"0 0 32 32\\" width=\\"32px\\" xml:space=\\"preserve\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\"> <path d=\\"M27.877,19.662c0.385-1.23,0.607-2.531,0.607-3.884c0-7.222-5.83-13.101-13.029-13.194v4.238    c4.863,0.093,8.793,4.071,8.793,8.956c0,0.678-0.088,1.332-0.232,1.966l-3.963-1.966l2.76,8.199l8.197-2.762L27.877,19.662z\\"></path> <path d=\\"M7.752,16.222c0-0.678,0.088-1.332,0.232-1.967l3.963,1.967l-2.76-8.199L0.99,10.785l3.133,1.553    c-0.384,1.23-0.607,2.531-0.607,3.885c0,7.223,5.83,13.1,13.03,13.194v-4.238C11.682,25.086,7.752,21.107,7.752,16.222z\\"></path> </svg>",
+        <span>
+          <svg
+            focusable="false"
+            height="32px"
+            style={
+              Object {
+                "enableBackground": "new 0 0 32 32",
+              }
             }
-          }
-        />
+            version="1.1"
+            viewBox="0 0 32 32"
+            width="32px"
+            xmlSpace="preserve"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+          >
+             
+            <path
+              d="M27.877,19.662c0.385-1.23,0.607-2.531,0.607-3.884c0-7.222-5.83-13.101-13.029-13.194v4.238    c4.863,0.093,8.793,4.071,8.793,8.956c0,0.678-0.088,1.332-0.232,1.966l-3.963-1.966l2.76,8.199l8.197-2.762L27.877,19.662z"
+            />
+            <path
+              d="M7.752,16.222c0-0.678,0.088-1.332,0.232-1.967l3.963,1.967l-2.76-8.199L0.99,10.785l3.133,1.553    c-0.384,1.23-0.607,2.531-0.607,3.885c0,7.223,5.83,13.1,13.03,13.194v-4.238C11.682,25.086,7.752,21.107,7.752,16.222z"
+            />
+          </svg>
+        </span>
       </a>
     </span>
   </div>

diff --git a/src/__tests__/core/__snapshots__/signed_in_confirmation.test.jsx.snap b/src/__tests__/core/__snapshots__/signed_in_confirmation.test.jsx.snap
@@ -7,13 +7,34 @@ exports[`SignedInConfirmation renders correctly 1`] = `
   <div
     className="auth0-lock-confirmation-content"
   >
-    <span
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<svg focusable=\\"false\\" width=\\"56px\\" height=\\"56px\\" viewBox=\\"0 0 52 52\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" class=\\"checkmark\\"> <circle cx=\\"26\\" cy=\\"26\\" r=\\"25\\" fill=\\"none\\" class=\\"checkmark__circle\\"></circle> <path fill=\\"none\\" d=\\"M14.1 27.2l7.1 7.2 16.7-16.8\\" class=\\"checkmark__check\\"></path> </svg>",
-        }
-      }
-    />
+    <span>
+      <svg
+        className="checkmark"
+        focusable="false"
+        height="56px"
+        version="1.1"
+        viewBox="0 0 52 52"
+        width="56px"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+         
+        <circle
+          className="checkmark__circle"
+          cx="26"
+          cy="26"
+          fill="none"
+          r="25"
+        />
+         
+        <path
+          className="checkmark__check"
+          d="M14.1 27.2l7.1 7.2 16.7-16.8"
+          fill="none"
+        />
+         
+      </svg>
+    </span>
     <p />
   </div>
 </div>