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