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 addHtmlLang (htmlStringPage: string, paramLang: string) {
 354     return htmlStringPage.replace('<html>', `<html lang="${paramLang}">`)
 355   }
 356
 357   private static addManifestContentHash (htmlStringPage: string) {
 358     return htmlStringPage.replace('[manifestContentHash]', FILES_CONTENT_HASH.MANIFEST)
 359   }
 360
 361   private static addFaviconContentHash (htmlStringPage: string) {
 362     return htmlStringPage.replace('[faviconContentHash]', FILES_CONTENT_HASH.FAVICON)
 363   }
 364
 365   private static addLogoContentHash (htmlStringPage: string) {
 366     return htmlStringPage.replace('[logoContentHash]', FILES_CONTENT_HASH.LOGO)
 367   }
 368
 369   private static addTitleTag (htmlStringPage: string, title?: string) {
 370     let text = title || CONFIG.INSTANCE.NAME
 371     if (title) text += ` - ${CONFIG.INSTANCE.NAME}`
 372
 373     const titleTag = `<title>${escapeHTML(text)}</title>`
 374
 375     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.TITLE, titleTag)
 376   }
 377
 378   private static addDescriptionTag (htmlStringPage: string, description?: string) {
 379     const content = description || CONFIG.INSTANCE.SHORT_DESCRIPTION
 380     const descriptionTag = `<meta name="description" content="${escapeHTML(content)}" />`
 381
 382     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.DESCRIPTION, descriptionTag)
 383   }
 384
 385   private static addCustomCSS (htmlStringPage: string) {
 386     const styleTag = `<style class="custom-css-style">${CONFIG.INSTANCE.CUSTOMIZATIONS.CSS}</style>`
 387
 388     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.CUSTOM_CSS, styleTag)
 389   }
 390
 391   private static addServerConfig (htmlStringPage: string, serverConfig: HTMLServerConfig) {
 392     // Stringify the JSON object, and then stringify the string object so we can inject it into the HTML
 393     const serverConfigString = JSON.stringify(JSON.stringify(serverConfig))
 394     const configScriptTag = `<script type="application/javascript">window.PeerTubeServerConfig = ${serverConfigString}</script>`
 395
 396     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.SERVER_CONFIG, configScriptTag)
 397   }
 398
 399   private static async addAsyncPluginCSS (htmlStringPage: string) {
 400     const globalCSSContent = await readFile(PLUGIN_GLOBAL_CSS_PATH)
 401     if (globalCSSContent.byteLength === 0) return htmlStringPage
 402
 403     const fileHash = sha256(globalCSSContent)
 404     const linkTag = `<link rel="stylesheet" href="/plugins/global.css?hash=${fileHash}" />`
 405
 406     return htmlStringPage.replace('</head>', linkTag + '</head>')
 407   }
 408
 409   private static generateOpenGraphMetaTags (tags: Tags) {
 410     const metaTags = {
 411       'og:type': tags.ogType,
 412       'og:site_name': tags.escapedSiteName,
 413       'og:title': tags.escapedTitle,
 414       'og:image': tags.image.url
 415     }
 416
 417     if (tags.image.width && tags.image.height) {
 418       metaTags['og:image:width'] = tags.image.width
 419       metaTags['og:image:height'] = tags.image.height
 420     }
 421
 422     metaTags['og:url'] = tags.url
 423     metaTags['og:description'] = tags.escapedDescription
 424
 425     if (tags.embed) {
 426       metaTags['og:video:url'] = tags.embed.url
 427       metaTags['og:video:secure_url'] = tags.embed.url
 428       metaTags['og:video:type'] = 'text/html'
 429       metaTags['og:video:width'] = EMBED_SIZE.width
 430       metaTags['og:video:height'] = EMBED_SIZE.height
 431     }
 432
 433     return metaTags
 434   }
 435
 436   private static generateStandardMetaTags (tags: Tags) {
 437     return {
 438       name: tags.escapedTitle,
 439       description: tags.escapedDescription,
 440       image: tags.image.url
 441     }
 442   }
 443
 444   private static generateTwitterCardMetaTags (tags: Tags) {
 445     const metaTags = {
 446       'twitter:card': tags.twitterCard,
 447       'twitter:site': CONFIG.SERVICES.TWITTER.USERNAME,
 448       'twitter:title': tags.escapedTitle,
 449       'twitter:description': tags.escapedDescription,
 450       'twitter:image': tags.image.url
 451     }
 452
 453     if (tags.image.width && tags.image.height) {
 454       metaTags['twitter:image:width'] = tags.image.width
 455       metaTags['twitter:image:height'] = tags.image.height
 456     }
 457
 458     if (tags.twitterCard === 'player') {
 459       metaTags['twitter:player'] = tags.embed.url
 460       metaTags['twitter:player:width'] = EMBED_SIZE.width
 461       metaTags['twitter:player:height'] = EMBED_SIZE.height
 462     }
 463
 464     return metaTags
 465   }
 466
 467   private static generateSchemaTags (tags: Tags) {
 468     const schema = {
 469       '@context': 'http://schema.org',
 470       '@type': tags.schemaType,
 471       'name': tags.escapedTitle,
 472       'description': tags.escapedDescription,
 473       'image': tags.image.url,
 474       'url': tags.url
 475     }
 476
 477     if (tags.list) {
 478       schema['numberOfItems'] = tags.list.numberOfItems
 479       schema['thumbnailUrl'] = tags.image.url
 480     }
 481
 482     if (tags.embed) {
 483       schema['embedUrl'] = tags.embed.url
 484       schema['uploadDate'] = tags.embed.createdAt
 485
 486       if (tags.embed.duration) schema['duration'] = tags.embed.duration
 487       if (tags.embed.views) schema['iterationCount'] = tags.embed.views
 488
 489       schema['thumbnailUrl'] = tags.image.url
 490       schema['contentUrl'] = tags.url
 491     }
 492
 493     return schema
 494   }
 495
 496   private static addTags (htmlStringPage: string, tagsValues: Tags) {
 497     const openGraphMetaTags = this.generateOpenGraphMetaTags(tagsValues)
 498     const standardMetaTags = this.generateStandardMetaTags(tagsValues)
 499     const twitterCardMetaTags = this.generateTwitterCardMetaTags(tagsValues)
 500     const schemaTags = this.generateSchemaTags(tagsValues)
 501
 502     const { url, escapedTitle, embed, originUrl, disallowIndexation } = tagsValues
 503
 504     const oembedLinkTags: { type: string, href: string, escapedTitle: string }[] = []
 505
 506     if (embed) {
 507       oembedLinkTags.push({
 508         type: 'application/json+oembed',
 509         href: WEBSERVER.URL + '/services/oembed?url=' + encodeURIComponent(url),
 510         escapedTitle
 511       })
 512     }
 513
 514     let tagsStr = ''
 515
 516     // Opengraph
 517     Object.keys(openGraphMetaTags).forEach(tagName => {
 518       const tagValue = openGraphMetaTags[tagName]
 519
 520       tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
 521     })
 522
 523     // Standard
 524     Object.keys(standardMetaTags).forEach(tagName => {
 525       const tagValue = standardMetaTags[tagName]
 526
 527       tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
 528     })
 529
 530     // Twitter card
 531     Object.keys(twitterCardMetaTags).forEach(tagName => {
 532       const tagValue = twitterCardMetaTags[tagName]
 533
 534       tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
 535     })
 536
 537     // OEmbed
 538     for (const oembedLinkTag of oembedLinkTags) {
 539       tagsStr += `<link rel="alternate" type="${oembedLinkTag.type}" href="${oembedLinkTag.href}" title="${oembedLinkTag.escapedTitle}" />`
 540     }
 541
 542     // Schema.org
 543     if (schemaTags) {
 544       tagsStr += `<script type="application/ld+json">${JSON.stringify(schemaTags)}</script>`
 545     }
 546
 547     // SEO, use origin URL
 548     tagsStr += `<link rel="canonical" href="${originUrl}" />`
 549
 550     if (disallowIndexation) {
 551       tagsStr += `<meta name="robots" content="noindex" />`
 552     }
 553
 554     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.META_TAGS, tagsStr)
 555   }
 556 }
 557
 558 function sendHTML (html: string, res: express.Response) {
 559   res.set('Content-Type', 'text/html; charset=UTF-8')
 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)
 590 }