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