X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=server%2Flib%2Fclient-html.ts;h=058f29f03f1c8c4f2a81ac8cc31dcfa7bb477a69;hb=5a05c14573ca3c0d16b77bef78d845f96c8c6497;hp=5485376d3e3e0db22e5b5fa1aa253bacd75f370d;hpb=84bced652cd72aad852914a4a734c47dd0002fef;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/server/lib/client-html.ts b/server/lib/client-html.ts
index 5485376d3..058f29f03 100644
--- a/server/lib/client-html.ts
+++ b/server/lib/client-html.ts
@@ -1,17 +1,22 @@
-import * as express from 'express'
-import { readFile } from 'fs-extra'
+import express from 'express'
+import { pathExists, readFile } from 'fs-extra'
 import { join } from 'path'
 import validator from 'validator'
+import { isTestOrDevInstance } from '@server/helpers/core-utils'
+import { toCompleteUUID } from '@server/helpers/custom-validators/misc'
+import { mdToOneLinePlainText } from '@server/helpers/markdown'
+import { ActorImageModel } from '@server/models/actor/actor-image'
+import { root } from '@shared/core-utils'
+import { escapeHTML } from '@shared/core-utils/renderer'
+import { sha256 } from '@shared/extra-utils'
+import { HTMLServerConfig } from '@shared/models'
 import { buildFileLocale, getDefaultLocale, is18nLocale, POSSIBLE_LOCALES } from '../../shared/core-utils/i18n/i18n'
-import { HttpStatusCode } from '../../shared/core-utils/miscs/http-error-codes'
+import { HttpStatusCode } from '../../shared/models/http/http-error-codes'
 import { VideoPlaylistPrivacy, VideoPrivacy } from '../../shared/models/videos'
-import { isTestInstance, sha256 } from '../helpers/core-utils'
-import { escapeHTML } from '@shared/core-utils/renderer'
 import { logger } from '../helpers/logger'
 import { CONFIG } from '../initializers/config'
 import {
   ACCEPT_HEADERS,
-  ACTOR_IMAGES_SIZE,
   CUSTOM_HTML_TAG_COMMENTS,
   EMBED_SIZE,
   FILES_CONTENT_HASH,
@@ -21,10 +26,12 @@ import {
 import { AccountModel } from '../models/account/account'
 import { VideoModel } from '../models/video/video'
 import { VideoChannelModel } from '../models/video/video-channel'
-import { getActivityStreamDuration } from '../models/video/video-format-utils'
 import { VideoPlaylistModel } from '../models/video/video-playlist'
-import { MAccountActor, MChannelActor } from '../types/models'
-import { toSafeHtml } from '../helpers/markdown'
+import { MAccountActor, MChannelActor, MVideo, MVideoPlaylist } from '../types/models'
+import { getActivityStreamDuration } from './activitypub/activity'
+import { getBiggestActorImage } from './actor-image'
+import { Hooks } from './plugins/hooks'
+import { ServerConfigManager } from './server-config-manager'
 
 type Tags = {
   ogType: string
@@ -35,11 +42,14 @@ type Tags = {
     numberOfItems: number
   }
 
-  siteName: string
-  title: string
+  escapedSiteName: string
+  escapedTitle: string
+  escapedDescription: string
+
   url: string
   originUrl: string
-  description: string
+
+  disallowIndexation?: boolean
 
   embed?: {
     url: string
@@ -55,8 +65,9 @@ type Tags = {
   }
 }
 
-const toPlainText = (content: string) => {
-  return toSafeHtml(content).replace(/<[^>]+>/g, '')
+type HookContext = {
+  video?: MVideo
+  playlist?: MVideoPlaylist
 }
 
 class ClientHtml {
@@ -80,7 +91,9 @@ class ClientHtml {
     return customHtml
   }
 
-  static async getWatchHTMLPage (videoId: string, req: express.Request, res: express.Response) {
+  static async getWatchHTMLPage (videoIdArg: string, req: express.Request, res: express.Response) {
+    const videoId = toCompleteUUID(videoIdArg)
+
     // Let Angular application handle errors
     if (!validator.isInt(videoId) && !validator.isUUID(videoId, 4)) {
       res.status(HttpStatusCode.NOT_FOUND_404)
@@ -97,15 +110,15 @@ class ClientHtml {
       res.status(HttpStatusCode.NOT_FOUND_404)
       return html
     }
+    const description = mdToOneLinePlainText(video.description)
 
-    let customHtml = ClientHtml.addTitleTag(html, escapeHTML(video.name))
-    customHtml = ClientHtml.addDescriptionTag(customHtml, toPlainText(video.description))
+    let customHtml = ClientHtml.addTitleTag(html, video.name)
+    customHtml = ClientHtml.addDescriptionTag(customHtml, description)
 
     const url = WEBSERVER.URL + video.getWatchStaticPath()
     const originUrl = video.url
-    const title = escapeHTML(video.name)
-    const siteName = escapeHTML(CONFIG.INSTANCE.NAME)
-    const description = toPlainText(video.description)
+    const title = video.name
+    const siteName = CONFIG.INSTANCE.NAME
 
     const image = {
       url: WEBSERVER.URL + video.getPreviewStaticPath()
@@ -122,23 +135,26 @@ class ClientHtml {
     const twitterCard = CONFIG.SERVICES.TWITTER.WHITELISTED ? 'player' : 'summary_large_image'
     const schemaType = 'VideoObject'
 
-    customHtml = ClientHtml.addTags(customHtml, {
+    customHtml = await ClientHtml.addTags(customHtml, {
       url,
       originUrl,
-      siteName,
-      title,
-      description,
+      escapedSiteName: escapeHTML(siteName),
+      escapedTitle: escapeHTML(title),
+      escapedDescription: escapeHTML(description),
+      disallowIndexation: video.privacy !== VideoPrivacy.PUBLIC,
       image,
       embed,
       ogType,
       twitterCard,
       schemaType
-    })
+    }, { video })
 
     return customHtml
   }
 
-  static async getWatchPlaylistHTMLPage (videoPlaylistId: string, req: express.Request, res: express.Response) {
+  static async getWatchPlaylistHTMLPage (videoPlaylistIdArg: string, req: express.Request, res: express.Response) {
+    const videoPlaylistId = toCompleteUUID(videoPlaylistIdArg)
+
     // Let Angular application handle errors
     if (!validator.isInt(videoPlaylistId) && !validator.isUUID(videoPlaylistId, 4)) {
       res.status(HttpStatusCode.NOT_FOUND_404)
@@ -156,14 +172,15 @@ class ClientHtml {
       return html
     }
 
-    let customHtml = ClientHtml.addTitleTag(html, escapeHTML(videoPlaylist.name))
-    customHtml = ClientHtml.addDescriptionTag(customHtml, toPlainText(videoPlaylist.description))
+    const description = mdToOneLinePlainText(videoPlaylist.description)
 
-    const url = videoPlaylist.getWatchUrl()
+    let customHtml = ClientHtml.addTitleTag(html, videoPlaylist.name)
+    customHtml = ClientHtml.addDescriptionTag(customHtml, description)
+
+    const url = WEBSERVER.URL + videoPlaylist.getWatchStaticPath()
     const originUrl = videoPlaylist.url
-    const title = escapeHTML(videoPlaylist.name)
-    const siteName = escapeHTML(CONFIG.INSTANCE.NAME)
-    const description = toPlainText(videoPlaylist.description)
+    const title = videoPlaylist.name
+    const siteName = CONFIG.INSTANCE.NAME
 
     const image = {
       url: videoPlaylist.getThumbnailUrl()
@@ -182,42 +199,60 @@ class ClientHtml {
     const twitterCard = CONFIG.SERVICES.TWITTER.WHITELISTED ? 'player' : 'summary'
     const schemaType = 'ItemList'
 
-    customHtml = ClientHtml.addTags(customHtml, {
+    customHtml = await ClientHtml.addTags(customHtml, {
       url,
       originUrl,
-      siteName,
+      escapedSiteName: escapeHTML(siteName),
+      escapedTitle: escapeHTML(title),
+      escapedDescription: escapeHTML(description),
+      disallowIndexation: videoPlaylist.privacy !== VideoPlaylistPrivacy.PUBLIC,
       embed,
-      title,
-      description,
       image,
       list,
       ogType,
       twitterCard,
       schemaType
-    })
+    }, { playlist: videoPlaylist })
 
     return customHtml
   }
 
   static async getAccountHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
-    return this.getAccountOrChannelHTMLPage(() => AccountModel.loadByNameWithHost(nameWithHost), req, res)
+    const accountModelPromise = AccountModel.loadByNameWithHost(nameWithHost)
+    return this.getAccountOrChannelHTMLPage(() => accountModelPromise, req, res)
   }
 
   static async getVideoChannelHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
-    return this.getAccountOrChannelHTMLPage(() => VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost), req, res)
+    const videoChannelModelPromise = VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost)
+    return this.getAccountOrChannelHTMLPage(() => videoChannelModelPromise, req, res)
+  }
+
+  static async getActorHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
+    const [ account, channel ] = await Promise.all([
+      AccountModel.loadByNameWithHost(nameWithHost),
+      VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost)
+    ])
+
+    return this.getAccountOrChannelHTMLPage(() => Promise.resolve(account || channel), req, res)
   }
 
   static async getEmbedHTML () {
     const path = ClientHtml.getEmbedPath()
 
-    if (!isTestInstance() && ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
+    // Disable HTML cache in dev mode because webpack can regenerate JS files
+    if (!isTestOrDevInstance() && ClientHtml.htmlCache[path]) {
+      return ClientHtml.htmlCache[path]
+    }
 
     const buffer = await readFile(path)
+    const serverConfig = await ServerConfigManager.Instance.getHTMLServerConfig()
 
     let html = buffer.toString()
     html = await ClientHtml.addAsyncPluginCSS(html)
     html = ClientHtml.addCustomCSS(html)
     html = ClientHtml.addTitleTag(html)
+    html = ClientHtml.addDescriptionTag(html)
+    html = ClientHtml.addServerConfig(html, serverConfig)
 
     ClientHtml.htmlCache[path] = html
 
@@ -240,53 +275,57 @@ class ClientHtml {
       return ClientHtml.getIndexHTML(req, res)
     }
 
-    let customHtml = ClientHtml.addTitleTag(html, escapeHTML(entity.getDisplayName()))
-    customHtml = ClientHtml.addDescriptionTag(customHtml, toPlainText(entity.description))
+    const description = mdToOneLinePlainText(entity.description)
+
+    let customHtml = ClientHtml.addTitleTag(html, entity.getDisplayName())
+    customHtml = ClientHtml.addDescriptionTag(customHtml, description)
 
     const url = entity.getLocalUrl()
     const originUrl = entity.Actor.url
-    const siteName = escapeHTML(CONFIG.INSTANCE.NAME)
-    const title = escapeHTML(entity.getDisplayName())
-    const description = toPlainText(entity.description)
+    const siteName = CONFIG.INSTANCE.NAME
+    const title = entity.getDisplayName()
 
+    const avatar = getBiggestActorImage(entity.Actor.Avatars)
     const image = {
-      url: entity.Actor.getAvatarUrl(),
-      width: ACTOR_IMAGES_SIZE.AVATARS.width,
-      height: ACTOR_IMAGES_SIZE.AVATARS.height
+      url: ActorImageModel.getImageUrl(avatar),
+      width: avatar?.width,
+      height: avatar?.height
     }
 
     const ogType = 'website'
     const twitterCard = 'summary'
     const schemaType = 'ProfilePage'
 
-    customHtml = ClientHtml.addTags(customHtml, {
+    customHtml = await ClientHtml.addTags(customHtml, {
       url,
       originUrl,
-      title,
-      siteName,
-      description,
+      escapedTitle: escapeHTML(title),
+      escapedSiteName: escapeHTML(siteName),
+      escapedDescription: escapeHTML(description),
       image,
       ogType,
       twitterCard,
-      schemaType
-    })
+      schemaType,
+      disallowIndexation: !entity.Actor.isOwned()
+    }, {})
 
     return customHtml
   }
 
   private static async getIndexHTML (req: express.Request, res: express.Response, paramLang?: string) {
     const path = ClientHtml.getIndexPath(req, res, paramLang)
-    if (!isTestInstance() && ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
+    if (ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
 
     const buffer = await readFile(path)
+    const serverConfig = await ServerConfigManager.Instance.getHTMLServerConfig()
 
     let html = buffer.toString()
 
-    if (paramLang) html = ClientHtml.addHtmlLang(html, paramLang)
     html = ClientHtml.addManifestContentHash(html)
     html = ClientHtml.addFaviconContentHash(html)
     html = ClientHtml.addLogoContentHash(html)
     html = ClientHtml.addCustomCSS(html)
+    html = ClientHtml.addServerConfig(html, serverConfig)
     html = await ClientHtml.addAsyncPluginCSS(html)
 
     ClientHtml.htmlCache[path] = html
@@ -314,15 +353,16 @@ class ClientHtml {
       lang = req.acceptsLanguages(POSSIBLE_LOCALES) || getDefaultLocale()
     }
 
-    return join(__dirname, '../../../client/dist/' + buildFileLocale(lang) + '/index.html')
-  }
+    logger.debug(
+      'Serving %s HTML language', buildFileLocale(lang),
+      { cookie: req.cookies?.clientLanguage, paramLang, acceptLanguage: req.headers['accept-language'] }
+    )
 
-  private static getEmbedPath () {
-    return join(__dirname, '../../../client/dist/standalone/videos/embed.html')
+    return join(root(), 'client', 'dist', buildFileLocale(lang), 'index.html')
   }
 
-  private static addHtmlLang (htmlStringPage: string, paramLang: string) {
-    return htmlStringPage.replace('<html>', `<html lang="${paramLang}">`)
+  private static getEmbedPath () {
+    return join(root(), 'client', 'dist', 'standalone', 'videos', 'embed.html')
   }
 
   private static addManifestContentHash (htmlStringPage: string) {
@@ -341,14 +381,14 @@ class ClientHtml {
     let text = title || CONFIG.INSTANCE.NAME
     if (title) text += ` - ${CONFIG.INSTANCE.NAME}`
 
-    const titleTag = `<title>${text}</title>`
+    const titleTag = `<title>${escapeHTML(text)}</title>`
 
     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.TITLE, titleTag)
   }
 
   private static addDescriptionTag (htmlStringPage: string, description?: string) {
     const content = description || CONFIG.INSTANCE.SHORT_DESCRIPTION
-    const descriptionTag = `<meta name="description" content="${content}" />`
+    const descriptionTag = `<meta name="description" content="${escapeHTML(content)}" />`
 
     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.DESCRIPTION, descriptionTag)
   }
@@ -359,8 +399,29 @@ class ClientHtml {
     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.CUSTOM_CSS, styleTag)
   }
 
+  private static addServerConfig (htmlStringPage: string, serverConfig: HTMLServerConfig) {
+    // Stringify the JSON object, and then stringify the string object so we can inject it into the HTML
+    const serverConfigString = JSON.stringify(JSON.stringify(serverConfig))
+    const configScriptTag = `<script type="application/javascript">window.PeerTubeServerConfig = ${serverConfigString}</script>`
+
+    return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.SERVER_CONFIG, configScriptTag)
+  }
+
   private static async addAsyncPluginCSS (htmlStringPage: string) {
-    const globalCSSContent = await readFile(PLUGIN_GLOBAL_CSS_PATH)
+    if (!pathExists(PLUGIN_GLOBAL_CSS_PATH)) {
+      logger.info('Plugin Global CSS file is not available (generation may still be in progress), ignoring it.')
+      return htmlStringPage
+    }
+
+    let globalCSSContent: Buffer
+
+    try {
+      globalCSSContent = await readFile(PLUGIN_GLOBAL_CSS_PATH)
+    } catch (err) {
+      logger.error('Error retrieving the Plugin Global CSS file, ignoring it.', { err })
+      return htmlStringPage
+    }
+
     if (globalCSSContent.byteLength === 0) return htmlStringPage
 
     const fileHash = sha256(globalCSSContent)
@@ -372,8 +433,8 @@ class ClientHtml {
   private static generateOpenGraphMetaTags (tags: Tags) {
     const metaTags = {
       'og:type': tags.ogType,
-      'og:site_name': tags.siteName,
-      'og:title': tags.title,
+      'og:site_name': tags.escapedSiteName,
+      'og:title': tags.escapedTitle,
       'og:image': tags.image.url
     }
 
@@ -383,7 +444,7 @@ class ClientHtml {
     }
 
     metaTags['og:url'] = tags.url
-    metaTags['og:description'] = tags.description
+    metaTags['og:description'] = tags.escapedDescription
 
     if (tags.embed) {
       metaTags['og:video:url'] = tags.embed.url
@@ -398,8 +459,8 @@ class ClientHtml {
 
   private static generateStandardMetaTags (tags: Tags) {
     return {
-      name: tags.title,
-      description: tags.description,
+      name: tags.escapedTitle,
+      description: tags.escapedDescription,
       image: tags.image.url
     }
   }
@@ -408,8 +469,8 @@ class ClientHtml {
     const metaTags = {
       'twitter:card': tags.twitterCard,
       'twitter:site': CONFIG.SERVICES.TWITTER.USERNAME,
-      'twitter:title': tags.title,
-      'twitter:description': tags.description,
+      'twitter:title': tags.escapedTitle,
+      'twitter:description': tags.escapedDescription,
       'twitter:image': tags.image.url
     }
 
@@ -427,12 +488,12 @@ class ClientHtml {
     return metaTags
   }
 
-  private static generateSchemaTags (tags: Tags) {
+  private static async generateSchemaTags (tags: Tags, context: HookContext) {
     const schema = {
       '@context': 'http://schema.org',
       '@type': tags.schemaType,
-      'name': tags.title,
-      'description': tags.description,
+      'name': tags.escapedTitle,
+      'description': tags.escapedDescription,
       'image': tags.image.url,
       'url': tags.url
     }
@@ -447,92 +508,98 @@ class ClientHtml {
       schema['uploadDate'] = tags.embed.createdAt
 
       if (tags.embed.duration) schema['duration'] = tags.embed.duration
-      if (tags.embed.views) schema['iterationCount'] = tags.embed.views
 
       schema['thumbnailUrl'] = tags.image.url
       schema['contentUrl'] = tags.url
     }
 
-    return schema
+    return Hooks.wrapObject(schema, 'filter:html.client.json-ld.result', context)
   }
 
-  private static addTags (htmlStringPage: string, tagsValues: Tags) {
+  private static async addTags (htmlStringPage: string, tagsValues: Tags, context: HookContext) {
     const openGraphMetaTags = this.generateOpenGraphMetaTags(tagsValues)
     const standardMetaTags = this.generateStandardMetaTags(tagsValues)
     const twitterCardMetaTags = this.generateTwitterCardMetaTags(tagsValues)
-    const schemaTags = this.generateSchemaTags(tagsValues)
+    const schemaTags = await this.generateSchemaTags(tagsValues, context)
 
-    const { url, title, embed, originUrl } = tagsValues
+    const { url, escapedTitle, embed, originUrl, disallowIndexation } = tagsValues
 
-    const oembedLinkTags: { type: string, href: string, title: string }[] = []
+    const oembedLinkTags: { type: string, href: string, escapedTitle: string }[] = []
 
     if (embed) {
       oembedLinkTags.push({
         type: 'application/json+oembed',
         href: WEBSERVER.URL + '/services/oembed?url=' + encodeURIComponent(url),
-        title
+        escapedTitle
       })
     }
 
-    let tagsString = ''
+    let tagsStr = ''
 
     // Opengraph
     Object.keys(openGraphMetaTags).forEach(tagName => {
       const tagValue = openGraphMetaTags[tagName]
 
-      tagsString += `<meta property="${tagName}" content="${tagValue}" />`
+      tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
     })
 
     // Standard
     Object.keys(standardMetaTags).forEach(tagName => {
       const tagValue = standardMetaTags[tagName]
 
-      tagsString += `<meta property="${tagName}" content="${tagValue}" />`
+      tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
     })
 
     // Twitter card
     Object.keys(twitterCardMetaTags).forEach(tagName => {
       const tagValue = twitterCardMetaTags[tagName]
 
-      tagsString += `<meta property="${tagName}" content="${tagValue}" />`
+      tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
     })
 
     // OEmbed
     for (const oembedLinkTag of oembedLinkTags) {
-      tagsString += `<link rel="alternate" type="${oembedLinkTag.type}" href="${oembedLinkTag.href}" title="${oembedLinkTag.title}" />`
+      tagsStr += `<link rel="alternate" type="${oembedLinkTag.type}" href="${oembedLinkTag.href}" title="${oembedLinkTag.escapedTitle}" />`
     }
 
     // Schema.org
     if (schemaTags) {
-      tagsString += `<script type="application/ld+json">${JSON.stringify(schemaTags)}</script>`
+      tagsStr += `<script type="application/ld+json">${JSON.stringify(schemaTags)}</script>`
     }
 
     // SEO, use origin URL
-    tagsString += `<link rel="canonical" href="${originUrl}" />`
+    tagsStr += `<link rel="canonical" href="${originUrl}" />`
 
-    return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.META_TAGS, tagsString)
+    if (disallowIndexation) {
+      tagsStr += `<meta name="robots" content="noindex" />`
+    }
+
+    return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.META_TAGS, tagsStr)
   }
 }
 
-function sendHTML (html: string, res: express.Response) {
+function sendHTML (html: string, res: express.Response, localizedHTML: boolean = false) {
   res.set('Content-Type', 'text/html; charset=UTF-8')
 
+  if (localizedHTML) {
+    res.set('Vary', 'Accept-Language')
+  }
+
   return res.send(html)
 }
 
 async function serveIndexHTML (req: express.Request, res: express.Response) {
-  if (req.accepts(ACCEPT_HEADERS) === 'html' ||
-      !req.headers.accept) {
+  if (req.accepts(ACCEPT_HEADERS) === 'html' || !req.headers.accept) {
     try {
       await generateHTMLPage(req, res, req.params.language)
       return
     } catch (err) {
-      logger.error('Cannot generate HTML page.', err)
-      return res.sendStatus(HttpStatusCode.INTERNAL_SERVER_ERROR_500)
+      logger.error('Cannot generate HTML page.', { err })
+      return res.status(HttpStatusCode.INTERNAL_SERVER_ERROR_500).end()
     }
   }
 
-  return res.sendStatus(HttpStatusCode.NOT_ACCEPTABLE_406)
+  return res.status(HttpStatusCode.NOT_ACCEPTABLE_406).end()
 }
 
 // ---------------------------------------------------------------------------
@@ -546,5 +613,5 @@ export {
 async function generateHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
   const html = await ClientHtml.getDefaultHTMLPage(req, res, paramLang)
 
-  return sendHTML(html, res)
+  return sendHTML(html, res, true)
 }