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