server/lib/client-html.ts

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