render html/markdown for new comment notification email (Chocobozzz#3255

) Co-authored-by: kimsible <[email protected]> Co-authored-by: Rigel Kent <[email protected]>
fflorent · Dec 31, 2020 · a0bb002 · a0bb002
1 parent 5447821
commit a0bb002
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 34 deletions.
diff --git a/client/package.json b/client/package.json
@@ -94,7 +94,7 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "linkifyjs": "^2.1.5",
     "lodash-es": "^4.17.4",
-    "markdown-it": "^11.0.0",
+    "markdown-it": "11.x",
     "node-sass": "^4.9.3",
     "npm-font-source-sans-pro": "^1.0.2",
     "p2p-media-loader-hlsjs": "^0.6.2",

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -7218,10 +7218,10 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-markdown-it@^11.0.0:
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-11.0.0.tgz#dbfc30363e43d756ebc52c38586b91b90046b876"
-  integrity sha512-+CvOnmbSubmQFSA9dKz1BRiaSMV7rhexl3sngKqFyXSagoA3fBdJQ8oZWtRy2knXdpDXaBw44euz37DeJQ9asg==
+markdown-it@11.x:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-11.0.1.tgz#b54f15ec2a2193efa66dda1eb4173baea08993d6"
+  integrity sha512-aU1TzmBKcWNNYvH9pjq6u92BML+Hz3h5S/QpfTFwiQF852pLT+9qHsrhM9JYipkOXZxGn+sGH8oyJE9FD9WezQ==
   dependencies:
     argparse "^1.0.7"
     entities "~2.0.0"

diff --git a/package.json b/package.json
@@ -118,6 +118,7 @@
     "lodash": "^4.17.10",
     "lru-cache": "^6.0.0",
     "magnet-uri": "^5.1.4",
+    "markdown-it": "11.x",
     "memoizee": "^0.4.14",
     "morgan": "^1.5.3",
     "multer": "^1.1.0",
@@ -133,6 +134,7 @@
     "redis": "^3.0.2",
     "reflect-metadata": "^0.1.12",
     "request": "^2.81.0",
+    "sanitize-html": "2.x",
     "scripty": "^2.0.0",
     "sequelize": "5.21.13",
     "sequelize-typescript": "^1.0.0-beta.4",

diff --git a/server/lib/emailer.ts b/server/lib/emailer.ts
@@ -15,6 +15,53 @@ import { MAbuseFull, MAbuseMessage, MAccountDefault, MActorFollowActors, MActorF
 import { MCommentOwnerVideo, MVideo, MVideoAccountLight } from '../types/models/video'
 import { JobQueue } from './job-queue'
 
+const sanitizeHtml = require('sanitize-html')
+const markdownItEmoji = require('markdown-it-emoji/light')
+const MarkdownItClass = require('markdown-it')
+const markdownIt = new MarkdownItClass('default', { linkify: true, breaks: true, html: true })
+
+markdownIt.enable([
+  'linkify',
+  'autolink',
+  'emphasis',
+  'link',
+  'newline',
+  'list'
+])
+
+markdownIt.use(markdownItEmoji)
+
+const toSafeHtml = text => {
+  // Restore line feed
+  const textWithLineFeed = text.replace(/<br.?\/?>/g, '\r\n')
+
+  // Convert possible markdown (emojis, emphasis and lists) to html
+  const html = markdownIt.render(textWithLineFeed)
+
+  // Convert to safe Html
+  return sanitizeHtml(html, {
+    allowedTags: [ 'a', 'p', 'span', 'br', 'strong', 'em', 'ul', 'ol', 'li' ],
+    allowedSchemes: [ 'http', 'https' ],
+    allowedAttributes: {
+      a: [ 'href', 'class', 'target', 'rel' ]
+    },
+    transformTags: {
+      a: (tagName, attribs) => {
+        let rel = 'noopener noreferrer'
+        if (attribs.rel === 'me') rel += ' me'
+
+        return {
+          tagName,
+          attribs: Object.assign(attribs, {
+            target: '_blank',
+            rel
+          })
+        }
+      }
+    }
+  })
+}
+
 const Email = require('email-templates')
 
 class Emailer {
@@ -236,6 +283,7 @@ class Emailer {
     const video = comment.Video
     const videoUrl = WEBSERVER.URL + comment.Video.getWatchStaticPath()
     const commentUrl = WEBSERVER.URL + comment.getCommentStaticPath()
+    const commentHtml = toSafeHtml(comment.text)
 
     const emailPayload: EmailPayload = {
       template: 'video-comment-new',
@@ -245,6 +293,7 @@ class Emailer {
         accountName: comment.Account.getDisplayName(),
         accountUrl: comment.Account.Actor.url,
         comment,
+        commentHtml,
         video,
         videoUrl,
         action: {
@@ -262,13 +311,15 @@ class Emailer {
     const video = comment.Video
     const videoUrl = WEBSERVER.URL + comment.Video.getWatchStaticPath()
     const commentUrl = WEBSERVER.URL + comment.getCommentStaticPath()
+    const commentHtml = toSafeHtml(comment.text)
 
     const emailPayload: EmailPayload = {
       template: 'video-comment-mention',
       to,
       subject: 'Mention on video ' + video.name,
       locals: {
         comment,
+        commentHtml,
         video,
         videoUrl,
         accountName,

diff --git a/server/lib/emails/video-comment-mention/html.pug b/server/lib/emails/video-comment-mention/html.pug
@@ -5,7 +5,7 @@ block title
 
 block content
   p.
-    #[a(href=accountUrl title=handle) #{accountName}] mentioned you in a comment on video 
+    #[a(href=accountUrl title=handle) #{accountName}] mentioned you in a comment on video
     "#[a(href=videoUrl) #{video.name}]":
-  blockquote #{comment.text}
-  br(style="display: none;")
+  blockquote !{commentHtml}
+  br(style="display: none;")
diff --git a/server/lib/emails/video-comment-new/html.pug b/server/lib/emails/video-comment-new/html.pug
@@ -5,7 +5,7 @@ block title
 
 block content
   p.
-    #[a(href=accountUrl title=handle) #{accountName}] added a comment on your video 
+    #[a(href=accountUrl title=handle) #{accountName}] added a comment on your video
     "#[a(href=videoUrl) #{video.name}]":
-  blockquote #{comment.text}
-  br(style="display: none;")
+  blockquote !{commentHtml}
+  br(style="display: none;")