server/lib/client-html.ts

   1 import express from 'express'
   2 import { pathExists, 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 { MAccountHost, MChannelHost, 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<MAccountHost | MChannelHost>,
 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.getClientUrl()
 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     if (!pathExists(PLUGIN_GLOBAL_CSS_PATH)) {
 412       logger.info('Plugin Global CSS file is not available (generation may still be in progress), ignoring it.')
 413       return htmlStringPage
 414     }
 415
 416     let globalCSSContent: Buffer
 417
 418     try {
 419       globalCSSContent = await readFile(PLUGIN_GLOBAL_CSS_PATH)
 420     } catch (err) {
 421       logger.error('Error retrieving the Plugin Global CSS file, ignoring it.', { err })
 422       return htmlStringPage
 423     }
 424
 425     if (globalCSSContent.byteLength === 0) return htmlStringPage
 426
 427     const fileHash = sha256(globalCSSContent)
 428     const linkTag = `<link rel="stylesheet" href="/plugins/global.css?hash=${fileHash}" />`
 429
 430     return htmlStringPage.replace('</head>', linkTag + '</head>')
 431   }
 432
 433   private static generateOpenGraphMetaTags (tags: Tags) {
 434     const metaTags = {
 435       'og:type': tags.ogType,
 436       'og:site_name': tags.escapedSiteName,
 437       'og:title': tags.escapedTitle,
 438       'og:image': tags.image.url
 439     }
 440
 441     if (tags.image.width && tags.image.height) {
 442       metaTags['og:image:width'] = tags.image.width
 443       metaTags['og:image:height'] = tags.image.height
 444     }
 445
 446     metaTags['og:url'] = tags.url
 447     metaTags['og:description'] = tags.escapedDescription
 448
 449     if (tags.embed) {
 450       metaTags['og:video:url'] = tags.embed.url
 451       metaTags['og:video:secure_url'] = tags.embed.url
 452       metaTags['og:video:type'] = 'text/html'
 453       metaTags['og:video:width'] = EMBED_SIZE.width
 454       metaTags['og:video:height'] = EMBED_SIZE.height
 455     }
 456
 457     return metaTags
 458   }
 459
 460   private static generateStandardMetaTags (tags: Tags) {
 461     return {
 462       name: tags.escapedTitle,
 463       description: tags.escapedDescription,
 464       image: tags.image.url
 465     }
 466   }
 467
 468   private static generateTwitterCardMetaTags (tags: Tags) {
 469     const metaTags = {
 470       'twitter:card': tags.twitterCard,
 471       'twitter:site': CONFIG.SERVICES.TWITTER.USERNAME,
 472       'twitter:title': tags.escapedTitle,
 473       'twitter:description': tags.escapedDescription,
 474       'twitter:image': tags.image.url
 475     }
 476
 477     if (tags.image.width && tags.image.height) {
 478       metaTags['twitter:image:width'] = tags.image.width
 479       metaTags['twitter:image:height'] = tags.image.height
 480     }
 481
 482     if (tags.twitterCard === 'player') {
 483       metaTags['twitter:player'] = tags.embed.url
 484       metaTags['twitter:player:width'] = EMBED_SIZE.width
 485       metaTags['twitter:player:height'] = EMBED_SIZE.height
 486     }
 487
 488     return metaTags
 489   }
 490
 491   private static async generateSchemaTags (tags: Tags, context: HookContext) {
 492     const schema = {
 493       '@context': 'http://schema.org',
 494       '@type': tags.schemaType,
 495       'name': tags.escapedTitle,
 496       'description': tags.escapedDescription,
 497       'image': tags.image.url,
 498       'url': tags.url
 499     }
 500
 501     if (tags.list) {
 502       schema['numberOfItems'] = tags.list.numberOfItems
 503       schema['thumbnailUrl'] = tags.image.url
 504     }
 505
 506     if (tags.embed) {
 507       schema['embedUrl'] = tags.embed.url
 508       schema['uploadDate'] = tags.embed.createdAt
 509
 510       if (tags.embed.duration) schema['duration'] = tags.embed.duration
 511
 512       schema['thumbnailUrl'] = tags.image.url
 513       schema['contentUrl'] = tags.url
 514     }
 515
 516     return Hooks.wrapObject(schema, 'filter:html.client.json-ld.result', context)
 517   }
 518
 519   private static async addTags (htmlStringPage: string, tagsValues: Tags, context: HookContext) {
 520     const openGraphMetaTags = this.generateOpenGraphMetaTags(tagsValues)
 521     const standardMetaTags = this.generateStandardMetaTags(tagsValues)
 522     const twitterCardMetaTags = this.generateTwitterCardMetaTags(tagsValues)
 523     const schemaTags = await this.generateSchemaTags(tagsValues, context)
 524
 525     const { url, escapedTitle, embed, originUrl, disallowIndexation } = tagsValues
 526
 527     const oembedLinkTags: { type: string, href: string, escapedTitle: string }[] = []
 528
 529     if (embed) {
 530       oembedLinkTags.push({
 531         type: 'application/json+oembed',
 532         href: WEBSERVER.URL + '/services/oembed?url=' + encodeURIComponent(url),
 533         escapedTitle
 534       })
 535     }
 536
 537     let tagsStr = ''
 538
 539     // Opengraph
 540     Object.keys(openGraphMetaTags).forEach(tagName => {
 541       const tagValue = openGraphMetaTags[tagName]
 542
 543       tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
 544     })
 545
 546     // Standard
 547     Object.keys(standardMetaTags).forEach(tagName => {
 548       const tagValue = standardMetaTags[tagName]
 549
 550       tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
 551     })
 552
 553     // Twitter card
 554     Object.keys(twitterCardMetaTags).forEach(tagName => {
 555       const tagValue = twitterCardMetaTags[tagName]
 556
 557       tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
 558     })
 559
 560     // OEmbed
 561     for (const oembedLinkTag of oembedLinkTags) {
 562       tagsStr += `<link rel="alternate" type="${oembedLinkTag.type}" href="${oembedLinkTag.href}" title="${oembedLinkTag.escapedTitle}" />`
 563     }
 564
 565     // Schema.org
 566     if (schemaTags) {
 567       tagsStr += `<script type="application/ld+json">${JSON.stringify(schemaTags)}</script>`
 568     }
 569
 570     // SEO, use origin URL
 571     tagsStr += `<link rel="canonical" href="${originUrl}" />`
 572
 573     if (disallowIndexation) {
 574       tagsStr += `<meta name="robots" content="noindex" />`
 575     }
 576
 577     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.META_TAGS, tagsStr)
 578   }
 579 }
 580
 581 function sendHTML (html: string, res: express.Response, localizedHTML: boolean = false) {
 582   res.set('Content-Type', 'text/html; charset=UTF-8')
 583
 584   if (localizedHTML) {
 585     res.set('Vary', 'Accept-Language')
 586   }
 587
 588   return res.send(html)
 589 }
 590
 591 async function serveIndexHTML (req: express.Request, res: express.Response) {
 592   if (req.accepts(ACCEPT_HEADERS) === 'html' || !req.headers.accept) {
 593     try {
 594       await generateHTMLPage(req, res, req.params.language)
 595       return
 596     } catch (err) {
 597       logger.error('Cannot generate HTML page.', { err })
 598       return res.status(HttpStatusCode.INTERNAL_SERVER_ERROR_500).end()
 599     }
 600   }
 601
 602   return res.status(HttpStatusCode.NOT_ACCEPTABLE_406).end()
 603 }
 604
 605 // ---------------------------------------------------------------------------
 606
 607 export {
 608   ClientHtml,
 609   sendHTML,
 610   serveIndexHTML
 611 }
 612
 613 async function generateHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
 614   const html = await ClientHtml.getDefaultHTMLPage(req, res, paramLang)
 615
 616   return sendHTML(html, res, true)
 617 }