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