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