catch-potential-xss-react.md

Enforce the use of dompurify when using dangerouslySetInnerHtml

Fail

    const Example = () => {
      let dangerousHtml = "<img src=x onerror='javascript:alert(1)'>";
      return (
        <div
          dangerouslySetInnerHTML={{ __html: dangerousHtml }}
        />
      );
    };

    const Example = () => {
      const unsafeObject = { __html: "<img src=x onerror='javascript:alert(2)'>" };
      return (
        <div dangerouslySetInnerHTML={unsafeObject} />
      );
    };

    const Example = () => {
      return (
        <div dangerouslySetInnerHTML={{}} />
      );
    };

    const Example = () => {
      let futureUnsanitizedHtml = "";
      futureUnsanitizedHtml = "<img src=x onerror='javascript:alert(2)'>"
      return (
        <div
          dangerouslySetInnerHTML={{ __html: futureUnsanitizedHtml }}
        />
      );
    };

Pass

  const Example = () => {
    const dangerousHtml = "<img src=x onerror='javascript:alert(1)'>";
    let futureSanitizedObject = "";
    futureSanitizedObject = { __html: DOMPurify.sanitize(dangerousHtml)};
    return (
      <div
        dangerouslySetInnerHTML={futureSanitizedObject}
      />
    );
  };

  const Example = () => {
    const dangerousHtml = "<img src=x onerror='javascript:alert(1)'>";
    let futureSanitizedHtml = "";
    futureSanitizedHtml = DOMPurify.sanitize(dangerousHtml);
    return (
      <div
        dangerouslySetInnerHTML={{__html: futureSanitizedHtml}}
      />
    );
  };

  const Example = () => {
    const dangerousHtml = "<img src=x onerror='javascript:alert(1)'>";
    const sanitizedHtml = DOMPurify.sanitize(dangerousHtml);
    const sanitizedObject = { __html: sanitizedHtml };
    return (
      <div
        dangerouslySetInnerHTML={sanitizedObject}
      />
    );
  };

  const Example = () => {
    let dangerousHtml = "<img src=x onerror='javascript:alert(1)'>";
    const sanitizedObject = { __html: DOMPurify.sanitize(dangerousHtml) };
    return (
      <div
        dangerouslySetInnerHTML={sanitizedObject}
      />
    );
  };

  const Example = () => {
    let dangerousHtml = "<img src=x onerror='javascript:alert(1)'>";
    const sanitizedObject = { __html: DOMPurify.sanitize(dangerousHtml) };
    return (
      <div
        dangerouslySetInnerHTML={sanitizedObject}
      />
    );
  };

  const Example = () => {
    const dangerousHtml = "<img src=x onerror='javascript:alert(1)'>";
    const sanitizedHtml = DOMPurify.sanitize(dangerousHtml);
    const sanitizedObject = { __html: sanitizedHtml };
    return (
      <div
        dangerouslySetInnerHTML={sanitizedObject}
      />
    );
  };

  const Example = () => {
    const dangerousHtml = "<img src=x onerror='javascript:alert(1)'>";
    let futureSanitizedHtml = "";
    futureSanitizedHtml = DOMPurify.sanitize(dangerousHtml);
    return (
      <div
        dangerouslySetInnerHTML={{__html: futureSanitizedHtml}}
      />
    );
  };