CATcher-org / CATcher

CATcher is a software application used for peer-testing of software projects.
https://catcher-org.github.io/CATcher/
MIT License
71 stars 66 forks source link

Fix markdown blockquote preview difference #1245

Closed nknguyenhc closed 4 months ago

nknguyenhc commented 4 months ago

Summary:

Fixes #1214

Changes Made:

To elaborate on the issue, the preview blockquote does not render if there is any HTML element in the source string. This is because in that case, all closing bracket > are changed to >.

To fix this, I remove the sanitation by DOMPurify. As mentioned in #1214, ngx-markdown sanitises content by default, hence there is no need to sanitise again using DOMPurify. Furthermore, DOMPurify does not consider markdown syntaxes in sanitation.

I have checked out the examples given by DOMPurify, malicious content are also removed with the sanitation from ngx-markdown. The following content:

> quote stops working in preview???

> quote with &lt;br/&gt; <br/> 
> new quote

> another quote like `this`

<div>For example</div>

<script>console.log("hello")</script>

Hello, test <code>D<sub>SA</sub></code>

<p>abc<iframe src="https://www.youtube.com/embed/sUtJHqzU9dc" allowfullscreen="" title="Youtube intro video"></iframe></p>

<TABLE><tr><td>HELLO</tr></TABL>

<UL><li><A HREF=//google.com>click</UL>

is rendered as

image

Notice that the script and the iframe tags are removed from the rendered HTML, and the broken tags are properly rendered.

This closely matches the rendering on Github:

image

The only difference is that the sanitised strings are rendered as literal strings on Github, while removed in CATcher. However, given the purpose of CATcher, I believe there is no need for rendering malicious HTML elements as literal strings.

Proposed Commit Message:

Fix markdown blockquote preview difference

Due to DOMPurify, the content used for preview is different.
However, given that ngx-markdown already has sufficient sanitation
by default, we remove sanitation by DOMPurify.
nknguyenhc commented 4 months ago

I have checked, DOMPurify is no longer used. I have removed it from package.json.