Merge pull request #585 from kleros/fix/improve-xss-security

fix: improve security

Author: kyrers

src/components/attachment.js

@@ -1,7 +1,7 @@
 import React from "react";
 import t from "prop-types";
 import styled from "styled-components/macro";
-import { Divider, Popover } from "antd";
+import { Divider, Popover, Tooltip } from "antd";
 import isImage from "is-image";
 import isTextPath from "is-text-path";
 import isVideo from "is-video";
@@ -10,6 +10,7 @@ import { ReactComponent as Image } from "../assets/images/image.svg";
 import { ReactComponent as Link } from "../assets/images/link.svg";
 import { ReactComponent as PDF } from "../assets/images/pdf.svg";
 import { ReactComponent as Video } from "../assets/images/video.svg";
+import { isSafeNavigationUrl } from "../utils/urlValidation";
 
 const StyledPopover = styled(({ className, ...rest }) => (
   <Popover className={className} overlayClassName={className} {...rest} />
@@ -29,6 +30,11 @@ const StyledIFrame = styled.iframe`
   margin-top: -8px;
   width: 300px;
 `;
+const DisabledAttachment = styled.span`
+  cursor: not-allowed;
+  display: inline-flex;
+  opacity: 0.5;
+`;
 
 const isPDF = (extension) => extension.toLowerCase() === ".pdf";
 
@@ -44,15 +50,31 @@ const Attachment = ({ URI, description, extension: _extension, previewURI, title
   else if (isVideo(extension)) Component = Video;
   else Component = Link;
   Component = <Component className="primary-purple-fill theme-fill" />;
+
+  const href = URI.replace(/^\/ipfs\//, "https://cdn.kleros.link/ipfs/");
+
+  // Unsafe attachment URL still indicate that a file was attached,
+  // but render it as a disabled, non-clickable icon with an explanation.
+  if (!isSafeNavigationUrl(href)) {
+    return (
+      <Tooltip
+        overlayStyle={{ wordBreak: "break-all" }}
+        title={`This attachment link was flagged as unsafe and has been disabled: "${href}"`}
+      >
+        <DisabledAttachment>{Component}</DisabledAttachment>
+      </Tooltip>
+    );
+  }
+
+  const LinkedComponent = (
+    <a href={href} rel="noopener noreferrer" target="_blank">
+      {Component}
+    </a>
+  );
+
   // No popover
   if (!title && !description) {
-    if (URI)
-      return (
-        <a href={URI.replace(/^\/ipfs\//, "https://cdn.kleros.link/ipfs/")} rel="noopener noreferrer" target="_blank">
-          {Component}
-        </a>
-      );
-    return Component;
+    return LinkedComponent;
   }
 
   return (
@@ -72,13 +94,7 @@ const Attachment = ({ URI, description, extension: _extension, previewURI, title
       }
       title={title}
     >
-      {URI ? (
-        <a href={URI.replace(/^\/ipfs\//, "https://cdn.kleros.link/ipfs/")} rel="noopener noreferrer" target="_blank">
-          {Component}
-        </a>
-      ) : (
-        Component
-      )}
+      {LinkedComponent}
     </StyledPopover>
   );
 };

src/components/case-details-card.jsx

@@ -29,6 +29,7 @@ import { getReadOnlyRpcUrl } from "../bootstrap/web3";
 import useGetDraws from "../hooks/use-get-draws";
 import arbitrableWhitelist from "../temp/arbitrable-whitelist";
 import { getAnswerString, RTA_LABEL } from "../temp/answer-string";
+import { isSafeNavigationUrl } from "../utils/urlValidation";
 
 const { useDrizzle, useDrizzleState } = drizzleReactHooks;
 const { toBN, soliditySha3 } = Web3.utils;
@@ -504,6 +505,7 @@ export default function CaseDetailsCard({ ID }) {
       const { _v = "0" } = metaEvidence;
 
       let url = normalizeIPFSUri(evidenceDisplayInterfaceURI);
+      if (!isSafeNavigationUrl(url)) return null;
 
       const injectedParams = {
         disputeID: ID,
@@ -686,8 +688,10 @@ export default function CaseDetailsCard({ ID }) {
             <Row>
               <Col span={24}>
                 <StyledInnerCard actions={metaEvidenceActions}>
+                  {/* ReactMarkdown 4 escapes HTML by default. Changing this or bumping the major
+                      version without sanitizing the output could expose us to XSS attacks. */}
                   <ReactMarkdown source={metaEvidence.description} />
-                  {metaEvidence.evidenceDisplayInterfaceURI && (
+                  {evidenceDisplayInterfaceURL && (
                     <StyledIframeContainer>
                       <iframe
                         sandbox={
@@ -701,7 +705,7 @@ export default function CaseDetailsCard({ ID }) {
                       />
                     </StyledIframeContainer>
                   )}
-                  {metaEvidence.arbitrableInterfaceURI && (
+                  {metaEvidence.arbitrableInterfaceURI && isSafeNavigationUrl(metaEvidence.arbitrableInterfaceURI) && (
                     <ArbitrableInterfaceDiv>
                       <a href={metaEvidence.arbitrableInterfaceURI} target="_blank" rel="noopener noreferrer">
                         <Icon type="double-right" style={{ marginRight: "5px" }} />

src/utils/urlValidation.js

@@ -0,0 +1,13 @@
+function parseUrl(url) {
+  if (!url || typeof url !== "string") return null;
+  try {
+    return new URL(url.trim());
+  } catch {
+    return null;
+  }
+}
+
+// Only https is allowed, rejects javascript:, data:, vbscript:, file:, etc.
+export function isSafeNavigationUrl(url) {
+  return parseUrl(url)?.protocol === "https:";
+}