uiwjs / react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-md-editor
MIT License
2.04k stars 149 forks source link

Img and P tags are not working in preview of MdEditor: #560

Open arvi9 opened 11 months ago

arvi9 commented 11 months ago
<p align="center">
  <img width="600" height="200" src="https://www.python.org/python-.png">
</p>

Img and P tags are not working in preview of MdEditor:

 <div data-color-mode="dark">
        <MDEditor
        value={value}
        onChange={(value)=>{setValue(value)}}
        preview="edit"
        commands={[...commands.getCommands(), uploadImage, help]}
        previewOptions={{
            linkTarget: '_blank',
            rehypePlugins: [
              [
                rehypeSanitize,
                {
                  ...defaultSchema,
                  attributes: {
                    ...defaultSchema.attributes,
                    span: [
                      // @ts-ignore
                      ...(defaultSchema.attributes.span || []),
                      // List of all allowed tokens:
                      ['className', 'math', 'math-inline'],
                    ],
                    code: [['className']],
                    img: [...(defaultSchema.attributes.img || []), ["width",
                    "height",
                    "src",
                    "alt",
                    "style"]],

                  },
                },
              ],
            ],

          }}

        height={400}

        highlightEnable={true}
        enableScroll={true}
        textareaProps={{
          placeholder: 'Please enter Markdown text',
        }}
        />
    </div>
jaywcjlove commented 11 months ago

@arvi9 You can remove the rehypeSanitize plugin.

arvi9 commented 11 months ago

It works if I remove the rehypeSanitize plugin. But my app is vulnerable to XSS attack Xss attack. I only have to allow some important tag which is must requered i.e. Imag and P tag for image and paragraph alignment. Kindly provide the solution .

arvi9 commented 10 months ago

It works if I remove the rehypeSanitize plugin. But my app is vulnerable to XSS attack Xss attack. I only have to allow some important tag which is must requered i.e. Imag and P tag for image and paragraph alignment. Kindly provide the solution .

Please provide the solution. I am awaiting for your reply.