Steps to reproduce

For POC purposes, I tested this on the editor from the latest version npm package.

I created a simple website with the Editor as a React component.

import React, { useState } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState } from 'draft-js';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './App.css';

function App() {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );

  return (
    <div className="App">
      <h2>react-draft-wysiwyg Editor Demo</h2>
      <div className="editor-container">
        <Editor
          editorState={editorState}
          onEditorStateChange={setEditorState}
          wrapperClassName="wrapper-class"
          editorClassName="editor-class"
          toolbarClassName="toolbar-class"
        />
      </div>
    </div>
  );
}

export default App;

Build the React web page with npm start, it should be at http://localhost:3000 Next click on the Embedded button, and input the following XSS payload into the Enter link: javascript:alert('XSS') and click Add.

You can see the javascript is executed under the context of localhost:3000 and a message box appeared in a new blank tab.

The payload is now saved in the <iframe> tag

Expected behavior

If the link starts starts with javascript: or any other outside of http: or https:, filter or don't open it.

Environment

• react-draft-wysiwyg version: latest
• Browser (with version): Microsoft Edge, Firefox and Chrome
• OS/Platform (with version): Windows 11