server/lib/client-html.ts

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