server/lib/client-html.ts

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