rehype pluguns doesn't affected (XSS Vulnerable)

[fuaditrockz]

I try to implement this into my next js project using app next js version.

And I wanna try to test the security using this inside the string markdown;

<IFRAME SRC="javascript:javascript:alert(window.origin);"></IFRAME>

And this is my code.

import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import { useState } from "react";
import MDEditor from "@uiw/react-md-editor";
import rehypeSanitize from "rehype-sanitize";

const PostEditor = () => {
  const [value, setValue] = useState<string | undefined>(
    '**Hello world!!!** <IFRAME SRC="javascript:javascript:alert(window.origin);"></IFRAME>'
  );

  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
        previewOptions={{
          rehypePlugins: [rehypeSanitize],
          transformLinkUri: null,
          skipHtml: true,
        }}
      />
      <MDEditor.Markdown source={value} style={{ whiteSpace: "pre-wrap" }} />
    </div>
  );
};

export default PostEditor;

And then javascript dialog still up there.

How to avoid that dialog appear to our website, especially during production.

[isimmons]

Those are two different components. The separate viewer needs it's own rehypeSanitize. This should work.

<MDEditor.Markdown
        source={value}
        rehypePlugins={[rehypeSanitize]}
      />