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