fix missing title attribute on <iframe> tag suggested for embedding (#3901)

* title attribute is missing on <iframe> tag suggested for embedding #3861

* fix #3901

* fix: escapeHTML #3901

* fix: playlist title instead of video title #3901

* fix #3901

* assign title directly #3901

4 files changed, 10 insertions, 24 deletions

diff --git a/server/controllers/services.ts b/server/controllers/services.ts
index d0217c30a..189e1651b 100644
--- a/server/controllers/services.ts
+++ b/server/controllers/services.ts
@@ -3,6 +3,7 @@ import { EMBED_SIZE, PREVIEWS_SIZE, WEBSERVER, THUMBNAILS_SIZE } from '../initia
 import { asyncMiddleware, oembedValidator } from '../middlewares'
 import { accountNameWithHostGetValidator } from '../middlewares/validators'
 import { MChannelSummary } from '@server/types/models'
+import { escapeHTML } from '@shared/core-utils/renderer'
 
 const servicesRouter = express.Router()
 
@@ -79,6 +80,7 @@ function buildOEmbed (options: {
   const embedUrl = webserverUrl + embedPath
   let embedWidth = EMBED_SIZE.width
   let embedHeight = EMBED_SIZE.height
+  const embedTitle = escapeHTML(title)
 
   let thumbnailUrl = previewPath
     ? webserverUrl + previewPath
@@ -96,7 +98,7 @@ function buildOEmbed (options: {
   }
 
   const html = `<iframe width="${embedWidth}" height="${embedHeight}" sandbox="allow-same-origin allow-scripts" ` +
-    `src="${embedUrl}" frameborder="0" allowfullscreen></iframe>`
+    `title="${embedTitle}" src="${embedUrl}" frameborder="0" allowfullscreen></iframe>`
 
   const json: any = {
     type: 'video',
diff --git a/server/helpers/core-utils.ts b/server/helpers/core-utils.ts
index 0bd84ffaa..b93868c12 100644
--- a/server/helpers/core-utils.ts
+++ b/server/helpers/core-utils.ts
@@ -154,24 +154,6 @@ function root () {
   return rootPath
 }
 
-// Thanks: https://stackoverflow.com/a/12034334
-function escapeHTML (stringParam) {
-  if (!stringParam) return ''
-
-  const entityMap = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '"': '&quot;',
-    '\'': '&#39;',
-    '/': '&#x2F;',
-    '`': '&#x60;',
-    '=': '&#x3D;'
-  }
-
-  return String(stringParam).replace(/[&<>"'`=/]/g, s => entityMap[s])
-}
-
 function pageToStartAndCount (page: number, itemsPerPage: number) {
   const start = (page - 1) * itemsPerPage
 
@@ -278,7 +260,6 @@ export {
 
   objectConverter,
   root,
-  escapeHTML,
   pageToStartAndCount,
   sanitizeUrl,
   sanitizeHost,
diff --git a/server/lib/client-html.ts b/server/lib/client-html.ts
index f19ec7df0..fcc11c7b2 100644
--- a/server/lib/client-html.ts
+++ b/server/lib/client-html.ts
@@ -5,7 +5,8 @@ import validator from 'validator'
 import { buildFileLocale, getDefaultLocale, is18nLocale, POSSIBLE_LOCALES } from '../../shared/core-utils/i18n/i18n'
 import { HttpStatusCode } from '../../shared/core-utils/miscs/http-error-codes'
 import { VideoPlaylistPrivacy, VideoPrivacy } from '../../shared/models/videos'
-import { escapeHTML, isTestInstance, sha256 } from '../helpers/core-utils'
+import { isTestInstance, sha256 } from '../helpers/core-utils'
+import { escapeHTML } from '@shared/core-utils/renderer'
 import { logger } from '../helpers/logger'
 import { CONFIG } from '../initializers/config'
 import {
diff --git a/server/tests/api/server/services.ts b/server/tests/api/server/services.ts
index df910c111..6202eb66c 100644
--- a/server/tests/api/server/services.ts
+++ b/server/tests/api/server/services.ts
@@ -20,6 +20,7 @@ const expect = chai.expect
 describe('Test services', function () {
   let server: ServerInfo = null
   let playlistUUID: string
+  let playlistDisplayName: string
   let video: Video
 
   before(async function () {
@@ -52,6 +53,7 @@ describe('Test services', function () {
       })
 
       playlistUUID = res.body.videoPlaylist.uuid
+      playlistDisplayName = 'The Life and Times of Scrooge McDuck'
 
       await addVideoInPlaylist({
         url: server.url,
@@ -69,7 +71,7 @@ describe('Test services', function () {
 
     const res = await getOEmbed(server.url, oembedUrl)
     const expectedHtml = '<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts" ' +
-      `src="http://localhost:${server.port}/videos/embed/${video.uuid}" ` +
+      `title="${video.name}" src="http://localhost:${server.port}/videos/embed/${video.uuid}" ` +
       'frameborder="0" allowfullscreen></iframe>'
     const expectedThumbnailUrl = 'http://localhost:' + server.port + video.previewPath
 
@@ -88,7 +90,7 @@ describe('Test services', function () {
 
     const res = await getOEmbed(server.url, oembedUrl)
     const expectedHtml = '<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts" ' +
-      `src="http://localhost:${server.port}/video-playlists/embed/${playlistUUID}" ` +
+      `title="${playlistDisplayName}" src="http://localhost:${server.port}/video-playlists/embed/${playlistUUID}" ` +
       'frameborder="0" allowfullscreen></iframe>'
 
     expect(res.body.html).to.equal(expectedHtml)
@@ -109,7 +111,7 @@ describe('Test services', function () {
 
     const res = await getOEmbed(server.url, oembedUrl, format, maxHeight, maxWidth)
     const expectedHtml = '<iframe width="50" height="50" sandbox="allow-same-origin allow-scripts" ' +
-      `src="http://localhost:${server.port}/videos/embed/${video.uuid}" ` +
+      `title="${video.name}" src="http://localhost:${server.port}/videos/embed/${video.uuid}" ` +
       'frameborder="0" allowfullscreen></iframe>'
 
     expect(res.body.html).to.equal(expectedHtml)