server/lib/client-html.ts

   1 import * as express from 'express'
   2 import { readFile } from 'fs-extra'
   3 import { join } from 'path'
   4 import validator from 'validator'
   5 import { buildFileLocale, getDefaultLocale, is18nLocale, POSSIBLE_LOCALES } from '../../shared/core-utils/i18n/i18n'
   6 import { HttpStatusCode } from '../../shared/core-utils/miscs/http-error-codes'
   7 import { VideoPlaylistPrivacy, VideoPrivacy } from '../../shared/models/videos'
   8 import { isTestInstance, sha256 } from '../helpers/core-utils'
   9 import { escapeHTML } from '@shared/core-utils/renderer'
  10 import { logger } from '../helpers/logger'
  11 import { CONFIG } from '../initializers/config'
  12 import {
  13   ACCEPT_HEADERS,
  14   ACTOR_IMAGES_SIZE,
  15   CUSTOM_HTML_TAG_COMMENTS,
  16   EMBED_SIZE,
  17   FILES_CONTENT_HASH,
  18   PLUGIN_GLOBAL_CSS_PATH,
  19   WEBSERVER
  20 } from '../initializers/constants'
  21 import { AccountModel } from '../models/account/account'
  22 import { VideoModel } from '../models/video/video'
  23 import { VideoChannelModel } from '../models/video/video-channel'
  24 import { getActivityStreamDuration } from '../models/video/video-format-utils'
  25 import { VideoPlaylistModel } from '../models/video/video-playlist'
  26 import { MAccountActor, MChannelActor } from '../types/models'
  27 import { toSafeHtml } from '../helpers/markdown'
  28
  29 type Tags = {
  30   ogType: string
  31   twitterCard: 'player' | 'summary' | 'summary_large_image'
  32   schemaType: string
  33
  34   list?: {
  35     numberOfItems: number
  36   }
  37
  38   siteName: string
  39   title: string
  40   url: string
  41   originUrl: string
  42   description: string
  43
  44   embed?: {
  45     url: string
  46     createdAt: string
  47     duration?: string
  48     views?: number
  49   }
  50
  51   image: {
  52     url: string
  53     width?: number
  54     height?: number
  55   }
  56 }
  57
  58 const toPlainText = (content: string) => {
  59   return toSafeHtml(content).replace(/<[^>]+>/g, '')
  60 }
  61
  62 class ClientHtml {
  63
  64   private static htmlCache: { [path: string]: string } = {}
  65
  66   static invalidCache () {
  67     logger.info('Cleaning HTML cache.')
  68
  69     ClientHtml.htmlCache = {}
  70   }
  71
  72   static async getDefaultHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
  73     const html = paramLang
  74       ? await ClientHtml.getIndexHTML(req, res, paramLang)
  75       : await ClientHtml.getIndexHTML(req, res)
  76
  77     let customHtml = ClientHtml.addTitleTag(html)
  78     customHtml = ClientHtml.addDescriptionTag(customHtml)
  79
  80     return customHtml
  81   }
  82
  83   static async getWatchHTMLPage (videoId: string, req: express.Request, res: express.Response) {
  84     // Let Angular application handle errors
  85     if (!validator.isInt(videoId) && !validator.isUUID(videoId, 4)) {
  86       res.status(HttpStatusCode.NOT_FOUND_404)
  87       return ClientHtml.getIndexHTML(req, res)
  88     }
  89
  90     const [ html, video ] = await Promise.all([
  91       ClientHtml.getIndexHTML(req, res),
  92       VideoModel.loadWithBlacklist(videoId)
  93     ])
  94
  95     // Let Angular application handle errors
  96     if (!video || video.privacy === VideoPrivacy.PRIVATE || video.privacy === VideoPrivacy.INTERNAL || video.VideoBlacklist) {
  97       res.status(HttpStatusCode.NOT_FOUND_404)
  98       return html
  99     }
 100
 101     let customHtml = ClientHtml.addTitleTag(html, escapeHTML(video.name))
 102     customHtml = ClientHtml.addDescriptionTag(customHtml, toPlainText(video.description))
 103
 104     const url = WEBSERVER.URL + video.getWatchStaticPath()
 105     const originUrl = video.url
 106     const title = escapeHTML(video.name)
 107     const siteName = escapeHTML(CONFIG.INSTANCE.NAME)
 108     const description = toPlainText(video.description)
 109
 110     const image = {
 111       url: WEBSERVER.URL + video.getPreviewStaticPath()
 112     }
 113
 114     const embed = {
 115       url: WEBSERVER.URL + video.getEmbedStaticPath(),
 116       createdAt: video.createdAt.toISOString(),
 117       duration: getActivityStreamDuration(video.duration),
 118       views: video.views
 119     }
 120
 121     const ogType = 'video'
 122     const twitterCard = CONFIG.SERVICES.TWITTER.WHITELISTED ? 'player' : 'summary_large_image'
 123     const schemaType = 'VideoObject'
 124
 125     customHtml = ClientHtml.addTags(customHtml, {
 126       url,
 127       originUrl,
 128       siteName,
 129       title,
 130       description,
 131       image,
 132       embed,
 133       ogType,
 134       twitterCard,
 135       schemaType
 136     })
 137
 138     return customHtml
 139   }
 140
 141   static async getWatchPlaylistHTMLPage (videoPlaylistId: string, req: express.Request, res: express.Response) {
 142     // Let Angular application handle errors
 143     if (!validator.isInt(videoPlaylistId) && !validator.isUUID(videoPlaylistId, 4)) {
 144       res.status(HttpStatusCode.NOT_FOUND_404)
 145       return ClientHtml.getIndexHTML(req, res)
 146     }
 147
 148     const [ html, videoPlaylist ] = await Promise.all([
 149       ClientHtml.getIndexHTML(req, res),
 150       VideoPlaylistModel.loadWithAccountAndChannel(videoPlaylistId, null)
 151     ])
 152
 153     // Let Angular application handle errors
 154     if (!videoPlaylist || videoPlaylist.privacy === VideoPlaylistPrivacy.PRIVATE) {
 155       res.status(HttpStatusCode.NOT_FOUND_404)
 156       return html
 157     }
 158
 159     let customHtml = ClientHtml.addTitleTag(html, escapeHTML(videoPlaylist.name))
 160     customHtml = ClientHtml.addDescriptionTag(customHtml, toPlainText(videoPlaylist.description))
 161
 162     const url = videoPlaylist.getWatchUrl()
 163     const originUrl = videoPlaylist.url
 164     const title = escapeHTML(videoPlaylist.name)
 165     const siteName = escapeHTML(CONFIG.INSTANCE.NAME)
 166     const description = toPlainText(videoPlaylist.description)
 167
 168     const image = {
 169       url: videoPlaylist.getThumbnailUrl()
 170     }
 171
 172     const embed = {
 173       url: WEBSERVER.URL + videoPlaylist.getEmbedStaticPath(),
 174       createdAt: videoPlaylist.createdAt.toISOString()
 175     }
 176
 177     const list = {
 178       numberOfItems: videoPlaylist.get('videosLength') as number
 179     }
 180
 181     const ogType = 'video'
 182     const twitterCard = CONFIG.SERVICES.TWITTER.WHITELISTED ? 'player' : 'summary'
 183     const schemaType = 'ItemList'
 184
 185     customHtml = ClientHtml.addTags(customHtml, {
 186       url,
 187       originUrl,
 188       siteName,
 189       embed,
 190       title,
 191       description,
 192       image,
 193       list,
 194       ogType,
 195       twitterCard,
 196       schemaType
 197     })
 198
 199     return customHtml
 200   }
 201
 202   static async getAccountHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
 203     return this.getAccountOrChannelHTMLPage(() => AccountModel.loadByNameWithHost(nameWithHost), req, res)
 204   }
 205
 206   static async getVideoChannelHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
 207     return this.getAccountOrChannelHTMLPage(() => VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost), req, res)
 208   }
 209
 210   static async getEmbedHTML () {
 211     const path = ClientHtml.getEmbedPath()
 212
 213     if (!isTestInstance() && ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
 214
 215     const buffer = await readFile(path)
 216
 217     let html = buffer.toString()
 218     html = await ClientHtml.addAsyncPluginCSS(html)
 219     html = ClientHtml.addCustomCSS(html)
 220     html = ClientHtml.addTitleTag(html)
 221
 222     ClientHtml.htmlCache[path] = html
 223
 224     return html
 225   }
 226
 227   private static async getAccountOrChannelHTMLPage (
 228     loader: () => Promise<MAccountActor | MChannelActor>,
 229     req: express.Request,
 230     res: express.Response
 231   ) {
 232     const [ html, entity ] = await Promise.all([
 233       ClientHtml.getIndexHTML(req, res),
 234       loader()
 235     ])
 236
 237     // Let Angular application handle errors
 238     if (!entity) {
 239       res.status(HttpStatusCode.NOT_FOUND_404)
 240       return ClientHtml.getIndexHTML(req, res)
 241     }
 242
 243     let customHtml = ClientHtml.addTitleTag(html, escapeHTML(entity.getDisplayName()))
 244     customHtml = ClientHtml.addDescriptionTag(customHtml, toPlainText(entity.description))
 245
 246     const url = entity.getLocalUrl()
 247     const originUrl = entity.Actor.url
 248     const siteName = escapeHTML(CONFIG.INSTANCE.NAME)
 249     const title = escapeHTML(entity.getDisplayName())
 250     const description = toPlainText(entity.description)
 251
 252     const image = {
 253       url: entity.Actor.getAvatarUrl(),
 254       width: ACTOR_IMAGES_SIZE.AVATARS.width,
 255       height: ACTOR_IMAGES_SIZE.AVATARS.height
 256     }
 257
 258     const ogType = 'website'
 259     const twitterCard = 'summary'
 260     const schemaType = 'ProfilePage'
 261
 262     customHtml = ClientHtml.addTags(customHtml, {
 263       url,
 264       originUrl,
 265       title,
 266       siteName,
 267       description,
 268       image,
 269       ogType,
 270       twitterCard,
 271       schemaType
 272     })
 273
 274     return customHtml
 275   }
 276
 277   private static async getIndexHTML (req: express.Request, res: express.Response, paramLang?: string) {
 278     const path = ClientHtml.getIndexPath(req, res, paramLang)
 279     if (!isTestInstance() && ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
 280
 281     const buffer = await readFile(path)
 282
 283     let html = buffer.toString()
 284
 285     if (paramLang) html = ClientHtml.addHtmlLang(html, paramLang)
 286     html = ClientHtml.addManifestContentHash(html)
 287     html = ClientHtml.addFaviconContentHash(html)
 288     html = ClientHtml.addLogoContentHash(html)
 289     html = ClientHtml.addCustomCSS(html)
 290     html = await ClientHtml.addAsyncPluginCSS(html)
 291
 292     ClientHtml.htmlCache[path] = html
 293
 294     return html
 295   }
 296
 297   private static getIndexPath (req: express.Request, res: express.Response, paramLang: string) {
 298     let lang: string
 299
 300     // Check param lang validity
 301     if (paramLang && is18nLocale(paramLang)) {
 302       lang = paramLang
 303
 304       // Save locale in cookies
 305       res.cookie('clientLanguage', lang, {
 306         secure: WEBSERVER.SCHEME === 'https',
 307         sameSite: 'none',
 308         maxAge: 1000 * 3600 * 24 * 90 // 3 months
 309       })
 310
 311     } else if (req.cookies.clientLanguage && is18nLocale(req.cookies.clientLanguage)) {
 312       lang = req.cookies.clientLanguage
 313     } else {
 314       lang = req.acceptsLanguages(POSSIBLE_LOCALES) || getDefaultLocale()
 315     }
 316
 317     return join(__dirname, '../../../client/dist/' + buildFileLocale(lang) + '/index.html')
 318   }
 319
 320   private static getEmbedPath () {
 321     return join(__dirname, '../../../client/dist/standalone/videos/embed.html')
 322   }
 323
 324   private static addHtmlLang (htmlStringPage: string, paramLang: string) {
 325     return htmlStringPage.replace('<html>', `<html lang="${paramLang}">`)
 326   }
 327
 328   private static addManifestContentHash (htmlStringPage: string) {
 329     return htmlStringPage.replace('[manifestContentHash]', FILES_CONTENT_HASH.MANIFEST)
 330   }
 331
 332   private static addFaviconContentHash (htmlStringPage: string) {
 333     return htmlStringPage.replace('[faviconContentHash]', FILES_CONTENT_HASH.FAVICON)
 334   }
 335
 336   private static addLogoContentHash (htmlStringPage: string) {
 337     return htmlStringPage.replace('[logoContentHash]', FILES_CONTENT_HASH.LOGO)
 338   }
 339
 340   private static addTitleTag (htmlStringPage: string, title?: string) {
 341     let text = title || CONFIG.INSTANCE.NAME
 342     if (title) text += ` - ${CONFIG.INSTANCE.NAME}`
 343
 344     const titleTag = `<title>${text}</title>`
 345
 346     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.TITLE, titleTag)
 347   }
 348
 349   private static addDescriptionTag (htmlStringPage: string, description?: string) {
 350     const content = description || CONFIG.INSTANCE.SHORT_DESCRIPTION
 351     const descriptionTag = `<meta name="description" content="${content}" />`
 352
 353     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.DESCRIPTION, descriptionTag)
 354   }
 355
 356   private static addCustomCSS (htmlStringPage: string) {
 357     const styleTag = `<style class="custom-css-style">${CONFIG.INSTANCE.CUSTOMIZATIONS.CSS}</style>`
 358
 359     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.CUSTOM_CSS, styleTag)
 360   }
 361
 362   private static async addAsyncPluginCSS (htmlStringPage: string) {
 363     const globalCSSContent = await readFile(PLUGIN_GLOBAL_CSS_PATH)
 364     if (globalCSSContent.byteLength === 0) return htmlStringPage
 365
 366     const fileHash = sha256(globalCSSContent)
 367     const linkTag = `<link rel="stylesheet" href="/plugins/global.css?hash=${fileHash}" />`
 368
 369     return htmlStringPage.replace('</head>', linkTag + '</head>')
 370   }
 371
 372   private static generateOpenGraphMetaTags (tags: Tags) {
 373     const metaTags = {
 374       'og:type': tags.ogType,
 375       'og:site_name': tags.siteName,
 376       'og:title': tags.title,
 377       'og:image': tags.image.url
 378     }
 379
 380     if (tags.image.width && tags.image.height) {
 381       metaTags['og:image:width'] = tags.image.width
 382       metaTags['og:image:height'] = tags.image.height
 383     }
 384
 385     metaTags['og:url'] = tags.url
 386     metaTags['og:description'] = tags.description
 387
 388     if (tags.embed) {
 389       metaTags['og:video:url'] = tags.embed.url
 390       metaTags['og:video:secure_url'] = tags.embed.url
 391       metaTags['og:video:type'] = 'text/html'
 392       metaTags['og:video:width'] = EMBED_SIZE.width
 393       metaTags['og:video:height'] = EMBED_SIZE.height
 394     }
 395
 396     return metaTags
 397   }
 398
 399   private static generateStandardMetaTags (tags: Tags) {
 400     return {
 401       name: tags.title,
 402       description: tags.description,
 403       image: tags.image.url
 404     }
 405   }
 406
 407   private static generateTwitterCardMetaTags (tags: Tags) {
 408     const metaTags = {
 409       'twitter:card': tags.twitterCard,
 410       'twitter:site': CONFIG.SERVICES.TWITTER.USERNAME,
 411       'twitter:title': tags.title,
 412       'twitter:description': tags.description,
 413       'twitter:image': tags.image.url
 414     }
 415
 416     if (tags.image.width && tags.image.height) {
 417       metaTags['twitter:image:width'] = tags.image.width
 418       metaTags['twitter:image:height'] = tags.image.height
 419     }
 420
 421     if (tags.twitterCard === 'player') {
 422       metaTags['twitter:player'] = tags.embed.url
 423       metaTags['twitter:player:width'] = EMBED_SIZE.width
 424       metaTags['twitter:player:height'] = EMBED_SIZE.height
 425     }
 426
 427     return metaTags
 428   }
 429
 430   private static generateSchemaTags (tags: Tags) {
 431     const schema = {
 432       '@context': 'http://schema.org',
 433       '@type': tags.schemaType,
 434       'name': tags.title,
 435       'description': tags.description,
 436       'image': tags.image.url,
 437       'url': tags.url
 438     }
 439
 440     if (tags.list) {
 441       schema['numberOfItems'] = tags.list.numberOfItems
 442       schema['thumbnailUrl'] = tags.image.url
 443     }
 444
 445     if (tags.embed) {
 446       schema['embedUrl'] = tags.embed.url
 447       schema['uploadDate'] = tags.embed.createdAt
 448
 449       if (tags.embed.duration) schema['duration'] = tags.embed.duration
 450       if (tags.embed.views) schema['iterationCount'] = tags.embed.views
 451
 452       schema['thumbnailUrl'] = tags.image.url
 453       schema['contentUrl'] = tags.url
 454     }
 455
 456     return schema
 457   }
 458
 459   private static addTags (htmlStringPage: string, tagsValues: Tags) {
 460     const openGraphMetaTags = this.generateOpenGraphMetaTags(tagsValues)
 461     const standardMetaTags = this.generateStandardMetaTags(tagsValues)
 462     const twitterCardMetaTags = this.generateTwitterCardMetaTags(tagsValues)
 463     const schemaTags = this.generateSchemaTags(tagsValues)
 464
 465     const { url, title, embed, originUrl } = tagsValues
 466
 467     const oembedLinkTags: { type: string, href: string, title: string }[] = []
 468
 469     if (embed) {
 470       oembedLinkTags.push({
 471         type: 'application/json+oembed',
 472         href: WEBSERVER.URL + '/services/oembed?url=' + encodeURIComponent(url),
 473         title
 474       })
 475     }
 476
 477     let tagsString = ''
 478
 479     // Opengraph
 480     Object.keys(openGraphMetaTags).forEach(tagName => {
 481       const tagValue = openGraphMetaTags[tagName]
 482
 483       tagsString += `<meta property="${tagName}" content="${tagValue}" />`
 484     })
 485
 486     // Standard
 487     Object.keys(standardMetaTags).forEach(tagName => {
 488       const tagValue = standardMetaTags[tagName]
 489
 490       tagsString += `<meta property="${tagName}" content="${tagValue}" />`
 491     })
 492
 493     // Twitter card
 494     Object.keys(twitterCardMetaTags).forEach(tagName => {
 495       const tagValue = twitterCardMetaTags[tagName]
 496
 497       tagsString += `<meta property="${tagName}" content="${tagValue}" />`
 498     })
 499
 500     // OEmbed
 501     for (const oembedLinkTag of oembedLinkTags) {
 502       tagsString += `<link rel="alternate" type="${oembedLinkTag.type}" href="${oembedLinkTag.href}" title="${oembedLinkTag.title}" />`
 503     }
 504
 505     // Schema.org
 506     if (schemaTags) {
 507       tagsString += `<script type="application/ld+json">${JSON.stringify(schemaTags)}</script>`
 508     }
 509
 510     // SEO, use origin URL
 511     tagsString += `<link rel="canonical" href="${originUrl}" />`
 512
 513     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.META_TAGS, tagsString)
 514   }
 515 }
 516
 517 function sendHTML (html: string, res: express.Response) {
 518   res.set('Content-Type', 'text/html; charset=UTF-8')
 519
 520   return res.send(html)
 521 }
 522
 523 async function serveIndexHTML (req: express.Request, res: express.Response) {
 524   if (req.accepts(ACCEPT_HEADERS) === 'html' ||
 525       !req.headers.accept) {
 526     try {
 527       await generateHTMLPage(req, res, req.params.language)
 528       return
 529     } catch (err) {
 530       logger.error('Cannot generate HTML page.', err)
 531       return res.sendStatus(HttpStatusCode.INTERNAL_SERVER_ERROR_500)
 532     }
 533   }
 534
 535   return res.sendStatus(HttpStatusCode.NOT_ACCEPTABLE_406)
 536 }
 537
 538 // ---------------------------------------------------------------------------
 539
 540 export {
 541   ClientHtml,
 542   sendHTML,
 543   serveIndexHTML
 544 }
 545
 546 async function generateHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
 547   const html = await ClientHtml.getDefaultHTMLPage(req, res, paramLang)
 548
 549   return sendHTML(html, res)
 550 }