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