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