uiwjs
Img and P tags are not working in preview of MdEditor:
<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>
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 .
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.
@arvi9 You can customize rehype-sanitize Schema to define which nodes and props are considered safe, it will then allow them to be displayed in the preview.
