diff --git a/client/app/bundles/comments/rescript/CommentList/Comment/Comment.res b/client/app/bundles/comments/rescript/CommentList/Comment/Comment.res
index 817fe6b16..c1f3aa06f 100644
--- a/client/app/bundles/comments/rescript/CommentList/Comment/Comment.res
+++ b/client/app/bundles/comments/rescript/CommentList/Comment/Comment.res
@@ -1,7 +1,8 @@
@react.component
let make = (~comment: Actions.Fetch.t, ~cssTransitionGroupClassNames) => {
let rawMarkup = Marked.marked(comment.text, {gfm: true})
- let innerHTML = {"__html": rawMarkup}
+ let sanitizedRawMarkup = SanitizeHtml.sanitize(rawMarkup)
+ let innerHTML = {"__html": sanitizedRawMarkup}
let nodeRef = React.useRef(Js.Nullable.null)
// The 500 must correspond to the 0.5s in:
diff --git a/client/app/bundles/comments/rescript/bindings/SanitizeHtml.res b/client/app/bundles/comments/rescript/bindings/SanitizeHtml.res
new file mode 100644
index 000000000..1be73df1d
--- /dev/null
+++ b/client/app/bundles/comments/rescript/bindings/SanitizeHtml.res
@@ -0,0 +1 @@
+@module("sanitize-html") external sanitize: string => string = "default"
diff --git a/spec/rescript/rescript_spec.rb b/spec/rescript/rescript_spec.rb
index 2d01444d4..fbde6caf7 100644
--- a/spec/rescript/rescript_spec.rb
+++ b/spec/rescript/rescript_spec.rb
@@ -29,6 +29,22 @@
end
end
+ describe "comment markdown rendering" do
+ before do
+ Comment.create!(
+ author: "Author",
+ text: '**bold**
'
+ )
+ visit "/rescript"
+ end
+
+ it "keeps markdown formatting and removes unsafe HTML" do
+ expect(page).to have_css(".js-comment-text strong", text: "bold")
+ expect(page).to have_no_css(".js-comment-text img", visible: :all)
+ expect(page).to have_no_css(".js-comment-text script", visible: :all)
+ end
+ end
+
describe "form submission functions" do
let(:comment) { Comment.new(author: "Author", text: "This is a comment") }
let(:author_field) { "comment_author" }