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 { logger } from '../helpers/logger'
  16 import { CONFIG } from '../initializers/config'
  17 import {
  18   ACCEPT_HEADERS,
  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 { VideoModel } from '../models/video/video'
  27 import { VideoChannelModel } from '../models/video/video-channel'
  28 import { VideoPlaylistModel } from '../models/video/video-playlist'
  29 import { MAccountActor, MChannelActor } from '../types/models'
  30 import { getActivityStreamDuration } from './activitypub/activity'
  31 import { getBiggestActorImage } from './actor-image'
  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       disallowIndexation: video.privacy !== VideoPrivacy.PUBLIC,
 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       disallowIndexation: videoPlaylist.privacy !== VideoPlaylistPrivacy.PUBLIC,
 202       embed,
 203       image,
 204       list,
 205       ogType,
 206       twitterCard,
 207       schemaType
 208     })
 209
 210     return customHtml
 211   }
 212
 213   static async getAccountHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
 214     const accountModelPromise = AccountModel.loadByNameWithHost(nameWithHost)
 215     return this.getAccountOrChannelHTMLPage(() => accountModelPromise, req, res)
 216   }
 217
 218   static async getVideoChannelHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
 219     const videoChannelModelPromise = VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost)
 220     return this.getAccountOrChannelHTMLPage(() => videoChannelModelPromise, req, res)
 221   }
 222
 223   static async getActorHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
 224     const [ account, channel ] = await Promise.all([
 225       AccountModel.loadByNameWithHost(nameWithHost),
 226       VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost)
 227     ])
 228
 229     return this.getAccountOrChannelHTMLPage(() => Promise.resolve(account || channel), req, res)
 230   }
 231
 232   static async getEmbedHTML () {
 233     const path = ClientHtml.getEmbedPath()
 234
 235     if (ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
 236
 237     const buffer = await readFile(path)
 238     const serverConfig = await ServerConfigManager.Instance.getHTMLServerConfig()
 239
 240     let html = buffer.toString()
 241     html = await ClientHtml.addAsyncPluginCSS(html)
 242     html = ClientHtml.addCustomCSS(html)
 243     html = ClientHtml.addTitleTag(html)
 244     html = ClientHtml.addDescriptionTag(html)
 245     html = ClientHtml.addServerConfig(html, serverConfig)
 246
 247     ClientHtml.htmlCache[path] = html
 248
 249     return html
 250   }
 251
 252   private static async getAccountOrChannelHTMLPage (
 253     loader: () => Promise<MAccountActor | MChannelActor>,
 254     req: express.Request,
 255     res: express.Response
 256   ) {
 257     const [ html, entity ] = await Promise.all([
 258       ClientHtml.getIndexHTML(req, res),
 259       loader()
 260     ])
 261
 262     // Let Angular application handle errors
 263     if (!entity) {
 264       res.status(HttpStatusCode.NOT_FOUND_404)
 265       return ClientHtml.getIndexHTML(req, res)
 266     }
 267
 268     const description = mdToOneLinePlainText(entity.description)
 269
 270     let customHtml = ClientHtml.addTitleTag(html, entity.getDisplayName())
 271     customHtml = ClientHtml.addDescriptionTag(customHtml, description)
 272
 273     const url = entity.getLocalUrl()
 274     const originUrl = entity.Actor.url
 275     const siteName = CONFIG.INSTANCE.NAME
 276     const title = entity.getDisplayName()
 277
 278     const avatar = getBiggestActorImage(entity.Actor.Avatars)
 279     const image = {
 280       url: ActorImageModel.getImageUrl(avatar),
 281       width: avatar?.width,
 282       height: avatar?.height
 283     }
 284
 285     const ogType = 'website'
 286     const twitterCard = 'summary'
 287     const schemaType = 'ProfilePage'
 288
 289     customHtml = ClientHtml.addTags(customHtml, {
 290       url,
 291       originUrl,
 292       escapedTitle: escapeHTML(title),
 293       escapedSiteName: escapeHTML(siteName),
 294       escapedDescription: escapeHTML(description),
 295       image,
 296       ogType,
 297       twitterCard,
 298       schemaType,
 299       disallowIndexation: !entity.Actor.isOwned()
 300     })
 301
 302     return customHtml
 303   }
 304
 305   private static async getIndexHTML (req: express.Request, res: express.Response, paramLang?: string) {
 306     const path = ClientHtml.getIndexPath(req, res, paramLang)
 307     if (ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
 308
 309     const buffer = await readFile(path)
 310     const serverConfig = await ServerConfigManager.Instance.getHTMLServerConfig()
 311
 312     let html = buffer.toString()
 313
 314     html = ClientHtml.addManifestContentHash(html)
 315     html = ClientHtml.addFaviconContentHash(html)
 316     html = ClientHtml.addLogoContentHash(html)
 317     html = ClientHtml.addCustomCSS(html)
 318     html = ClientHtml.addServerConfig(html, serverConfig)
 319     html = await ClientHtml.addAsyncPluginCSS(html)
 320
 321     ClientHtml.htmlCache[path] = html
 322
 323     return html
 324   }
 325
 326   private static getIndexPath (req: express.Request, res: express.Response, paramLang: string) {
 327     let lang: string
 328
 329     // Check param lang validity
 330     if (paramLang && is18nLocale(paramLang)) {
 331       lang = paramLang
 332
 333       // Save locale in cookies
 334       res.cookie('clientLanguage', lang, {
 335         secure: WEBSERVER.SCHEME === 'https',
 336         sameSite: 'none',
 337         maxAge: 1000 * 3600 * 24 * 90 // 3 months
 338       })
 339
 340     } else if (req.cookies.clientLanguage && is18nLocale(req.cookies.clientLanguage)) {
 341       lang = req.cookies.clientLanguage
 342     } else {
 343       lang = req.acceptsLanguages(POSSIBLE_LOCALES) || getDefaultLocale()
 344     }
 345
 346     logger.debug(
 347       'Serving %s HTML language', buildFileLocale(lang),
 348       { cookie: req.cookies?.clientLanguage, paramLang, acceptLanguage: req.headers['accept-language'] }
 349     )
 350
 351     return join(root(), 'client', 'dist', buildFileLocale(lang), 'index.html')
 352   }
 353
 354   private static getEmbedPath () {
 355     return join(root(), 'client', 'dist', 'standalone', 'videos', 'embed.html')
 356   }
 357
 358   private static addManifestContentHash (htmlStringPage: string) {
 359     return htmlStringPage.replace('[manifestContentHash]', FILES_CONTENT_HASH.MANIFEST)
 360   }
 361
 362   private static addFaviconContentHash (htmlStringPage: string) {
 363     return htmlStringPage.replace('[faviconContentHash]', FILES_CONTENT_HASH.FAVICON)
 364   }
 365
 366   private static addLogoContentHash (htmlStringPage: string) {
 367     return htmlStringPage.replace('[logoContentHash]', FILES_CONTENT_HASH.LOGO)
 368   }
 369
 370   private static addTitleTag (htmlStringPage: string, title?: string) {
 371     let text = title || CONFIG.INSTANCE.NAME
 372     if (title) text += ` - ${CONFIG.INSTANCE.NAME}`
 373
 374     const titleTag = `<title>${escapeHTML(text)}</title>`
 375
 376     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.TITLE, titleTag)
 377   }
 378
 379   private static addDescriptionTag (htmlStringPage: string, description?: string) {
 380     const content = description || CONFIG.INSTANCE.SHORT_DESCRIPTION
 381     const descriptionTag = `<meta name="description" content="${escapeHTML(content)}" />`
 382
 383     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.DESCRIPTION, descriptionTag)
 384   }
 385
 386   private static addCustomCSS (htmlStringPage: string) {
 387     const styleTag = `<style class="custom-css-style">${CONFIG.INSTANCE.CUSTOMIZATIONS.CSS}</style>`
 388
 389     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.CUSTOM_CSS, styleTag)
 390   }
 391
 392   private static addServerConfig (htmlStringPage: string, serverConfig: HTMLServerConfig) {
 393     // Stringify the JSON object, and then stringify the string object so we can inject it into the HTML
 394     const serverConfigString = JSON.stringify(JSON.stringify(serverConfig))
 395     const configScriptTag = `<script type="application/javascript">window.PeerTubeServerConfig = ${serverConfigString}</script>`
 396
 397     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.SERVER_CONFIG, configScriptTag)
 398   }
 399
 400   private static async addAsyncPluginCSS (htmlStringPage: string) {
 401     const globalCSSContent = await readFile(PLUGIN_GLOBAL_CSS_PATH)
 402     if (globalCSSContent.byteLength === 0) return htmlStringPage
 403
 404     const fileHash = sha256(globalCSSContent)
 405     const linkTag = `<link rel="stylesheet" href="/plugins/global.css?hash=${fileHash}" />`
 406
 407     return htmlStringPage.replace('</head>', linkTag + '</head>')
 408   }
 409
 410   private static generateOpenGraphMetaTags (tags: Tags) {
 411     const metaTags = {
 412       'og:type': tags.ogType,
 413       'og:site_name': tags.escapedSiteName,
 414       'og:title': tags.escapedTitle,
 415       'og:image': tags.image.url
 416     }
 417
 418     if (tags.image.width && tags.image.height) {
 419       metaTags['og:image:width'] = tags.image.width
 420       metaTags['og:image:height'] = tags.image.height
 421     }
 422
 423     metaTags['og:url'] = tags.url
 424     metaTags['og:description'] = tags.escapedDescription
 425
 426     if (tags.embed) {
 427       metaTags['og:video:url'] = tags.embed.url
 428       metaTags['og:video:secure_url'] = tags.embed.url
 429       metaTags['og:video:type'] = 'text/html'
 430       metaTags['og:video:width'] = EMBED_SIZE.width
 431       metaTags['og:video:height'] = EMBED_SIZE.height
 432     }
 433
 434     return metaTags
 435   }
 436
 437   private static generateStandardMetaTags (tags: Tags) {
 438     return {
 439       name: tags.escapedTitle,
 440       description: tags.escapedDescription,
 441       image: tags.image.url
 442     }
 443   }
 444
 445   private static generateTwitterCardMetaTags (tags: Tags) {
 446     const metaTags = {
 447       'twitter:card': tags.twitterCard,
 448       'twitter:site': CONFIG.SERVICES.TWITTER.USERNAME,
 449       'twitter:title': tags.escapedTitle,
 450       'twitter:description': tags.escapedDescription,
 451       'twitter:image': tags.image.url
 452     }
 453
 454     if (tags.image.width && tags.image.height) {
 455       metaTags['twitter:image:width'] = tags.image.width
 456       metaTags['twitter:image:height'] = tags.image.height
 457     }
 458
 459     if (tags.twitterCard === 'player') {
 460       metaTags['twitter:player'] = tags.embed.url
 461       metaTags['twitter:player:width'] = EMBED_SIZE.width
 462       metaTags['twitter:player:height'] = EMBED_SIZE.height
 463     }
 464
 465     return metaTags
 466   }
 467
 468   private static generateSchemaTags (tags: Tags) {
 469     const schema = {
 470       '@context': 'http://schema.org',
 471       '@type': tags.schemaType,
 472       'name': tags.escapedTitle,
 473       'description': tags.escapedDescription,
 474       'image': tags.image.url,
 475       'url': tags.url
 476     }
 477
 478     if (tags.list) {
 479       schema['numberOfItems'] = tags.list.numberOfItems
 480       schema['thumbnailUrl'] = tags.image.url
 481     }
 482
 483     if (tags.embed) {
 484       schema['embedUrl'] = tags.embed.url
 485       schema['uploadDate'] = tags.embed.createdAt
 486
 487       if (tags.embed.duration) schema['duration'] = tags.embed.duration
 488       if (tags.embed.views) schema['iterationCount'] = tags.embed.views
 489
 490       schema['thumbnailUrl'] = tags.image.url
 491       schema['contentUrl'] = tags.url
 492     }
 493
 494     return schema
 495   }
 496
 497   private static addTags (htmlStringPage: string, tagsValues: Tags) {
 498     const openGraphMetaTags = this.generateOpenGraphMetaTags(tagsValues)
 499     const standardMetaTags = this.generateStandardMetaTags(tagsValues)
 500     const twitterCardMetaTags = this.generateTwitterCardMetaTags(tagsValues)
 501     const schemaTags = this.generateSchemaTags(tagsValues)
 502
 503     const { url, escapedTitle, embed, originUrl, disallowIndexation } = tagsValues
 504
 505     const oembedLinkTags: { type: string, href: string, escapedTitle: string }[] = []
 506
 507     if (embed) {
 508       oembedLinkTags.push({
 509         type: 'application/json+oembed',
 510         href: WEBSERVER.URL + '/services/oembed?url=' + encodeURIComponent(url),
 511         escapedTitle
 512       })
 513     }
 514
 515     let tagsStr = ''
 516
 517     // Opengraph
 518     Object.keys(openGraphMetaTags).forEach(tagName => {
 519       const tagValue = openGraphMetaTags[tagName]
 520
 521       tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
 522     })
 523
 524     // Standard
 525     Object.keys(standardMetaTags).forEach(tagName => {
 526       const tagValue = standardMetaTags[tagName]
 527
 528       tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
 529     })
 530
 531     // Twitter card
 532     Object.keys(twitterCardMetaTags).forEach(tagName => {
 533       const tagValue = twitterCardMetaTags[tagName]
 534
 535       tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
 536     })
 537
 538     // OEmbed
 539     for (const oembedLinkTag of oembedLinkTags) {
 540       tagsStr += `<link rel="alternate" type="${oembedLinkTag.type}" href="${oembedLinkTag.href}" title="${oembedLinkTag.escapedTitle}" />`
 541     }
 542
 543     // Schema.org
 544     if (schemaTags) {
 545       tagsStr += `<script type="application/ld+json">${JSON.stringify(schemaTags)}</script>`
 546     }
 547
 548     // SEO, use origin URL
 549     tagsStr += `<link rel="canonical" href="${originUrl}" />`
 550
 551     if (disallowIndexation) {
 552       tagsStr += `<meta name="robots" content="noindex" />`
 553     }
 554
 555     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.META_TAGS, tagsStr)
 556   }
 557 }
 558
 559 function sendHTML (html: string, res: express.Response, localizedHTML: boolean = false) {
 560   res.set('Content-Type', 'text/html; charset=UTF-8')
 561
 562   if (localizedHTML) {
 563     res.set('Vary', 'Accept-Language')
 564   }
 565
 566   return res.send(html)
 567 }
 568
 569 async function serveIndexHTML (req: express.Request, res: express.Response) {
 570   if (req.accepts(ACCEPT_HEADERS) === 'html' || !req.headers.accept) {
 571     try {
 572       await generateHTMLPage(req, res, req.params.language)
 573       return
 574     } catch (err) {
 575       logger.error('Cannot generate HTML page.', err)
 576       return res.status(HttpStatusCode.INTERNAL_SERVER_ERROR_500).end()
 577     }
 578   }
 579
 580   return res.status(HttpStatusCode.NOT_ACCEPTABLE_406).end()
 581 }
 582
 583 // ---------------------------------------------------------------------------
 584
 585 export {
 586   ClientHtml,
 587   sendHTML,
 588   serveIndexHTML
 589 }
 590
 591 async function generateHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
 592   const html = await ClientHtml.getDefaultHTMLPage(req, res, paramLang)
 593
 594   return sendHTML(html, res, true)
 595 }