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