UBER-771: Use cookie instead of token for images (#3607)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/presentation/src/utils.ts

@@ -284,11 +284,11 @@ export function getFileUrl (file: string, size: IconSize = 'full', filename?: st
     return file
   }
   const uploadUrl = getMetadata(plugin.metadata.UploadURL)
-  const token = getMetadata(plugin.metadata.Token)
+
   if (filename !== undefined) {
-    return `${uploadUrl as string}/${filename}?file=${file}&token=${token as string}&size=${size as string}`
+    return `${uploadUrl as string}/${filename}?file=${file}&size=${size as string}`
   }
-  return `${uploadUrl as string}?file=${file}&token=${token as string}&size=${size as string}`
+  return `${uploadUrl as string}?file=${file}&size=${size as string}`
 }
 
 /**

packages/text-editor/src/components/StyledTextBox.svelte

@@ -143,7 +143,7 @@
   const attachments = new Map<string, ProseMirrorNode>()
 
   const imagePlugin = ImageRef.configure({
-    inline: false,
+    inline: true,
     HTMLAttributes: {},
     attachFile,
     reportNode: (id, node) => {

packages/text-editor/src/components/extensions.ts

@@ -71,8 +71,8 @@ export const defaultExtensions: AnyExtension[] = [
     openOnClick: true,
     HTMLAttributes: { class: 'cursor-pointer', rel: 'noopener noreferrer', target: '_blank' }
   }),
-  ...tableExtensions,
-  ...taskListExtensions
+  ...tableExtensions
+  // ...taskListExtensions // Disable since tasks are not working properly now.
 ]
 
 export const mInsertTable = [

packages/text-editor/src/components/imageExt.ts

@@ -57,7 +57,7 @@ export const ImageRef = Node.create<ImageOptions>({
 
   addOptions () {
     return {
-      inline: false,
+      inline: true,
       HTMLAttributes: {}
     }
   },
@@ -75,25 +75,23 @@ export const ImageRef = Node.create<ImageOptions>({
 
   addAttributes () {
     return {
-      fileid: {
-        default: null,
-        parseHTML: (element) => element.getAttribute('file-id'),
-        renderHTML: (attributes) => {
-          // eslint-disable-next-line
-          if (!attributes.fileid) {
-            return {}
-          }
-
-          return {
-            'file-id': attributes.fileid
-          }
-        }
+      'file-id': {
+        default: null
       },
       width: {
         default: null
       },
       height: {
         default: null
+      },
+      src: {
+        default: null
+      },
+      alt: {
+        default: null
+      },
+      title: {
+        default: null
       }
     }
   },
@@ -115,29 +113,31 @@ export const ImageRef = Node.create<ImageOptions>({
       HTMLAttributes
     )
     const id = merged['file-id']
-    merged.src = getFileUrl(id, 'full')
-    let width: IconSize | undefined
-    switch (merged.width) {
-      case '32px':
-        width = 'small'
-        break
-      case '64px':
-        width = 'medium'
-        break
-      case '128px':
-      case '256px':
-        width = 'large'
-        break
-      case '512px':
-        width = 'x-large'
-        break
+    if (id != null) {
+      merged.src = getFileUrl(id, 'full')
+      let width: IconSize | undefined
+      switch (merged.width) {
+        case '32px':
+          width = 'small'
+          break
+        case '64px':
+          width = 'medium'
+          break
+        case '128px':
+        case '256px':
+          width = 'large'
+          break
+        case '512px':
+          width = 'x-large'
+          break
+      }
+      if (width !== undefined) {
+        merged.src = getFileUrl(id, width)
+        merged.srcset = getFileUrl(id, width) + ' 1x,' + getFileUrl(id, getIconSize2x(width)) + ' 2x'
+      }
+      merged.class = 'textEditorImage'
+      this.options.reportNode?.(id, node)
     }
-    if (width !== undefined) {
-      merged.src = getFileUrl(id, width)
-      merged.srcset = getFileUrl(id, width) + ' 1x,' + getFileUrl(id, getIconSize2x(width)) + ' 2x'
-    }
-    merged.class = 'textEditorImage'
-    this.options.reportNode?.(id, node)
     return ['img', merged]
   },
 

packages/ui/src/components/Panel.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
-  import { deviceOptionsStore as deviceInfo, checkAdaptiveMatching } from '../../'
+  import { deviceOptionsStore as deviceInfo, checkAdaptiveMatching, embeddedPlatform, IconBack } from '../../'
   import { resizeObserver } from '../resize'
   import Button from './Button.svelte'
   import Scroller from './Scroller.svelte'
@@ -97,6 +97,17 @@
   >
     <div class="popupPanel-title {twoRows && !withoutTitle ? 'row-top' : 'row'}">
       {#if allowClose && !embedded}
+        {#if embeddedPlatform}
+          <Button
+            focusIndex={10000}
+            icon={IconBack}
+            kind={'ghost'}
+            size={'medium'}
+            on:click={() => {
+              history.back()
+            }}
+          />
+        {/if}
         <Button
           focusIndex={10000}
           icon={IconClose}

packages/ui/src/location.ts

@@ -113,7 +113,7 @@ declare global {
     embeddedPlatform?: boolean
   }
 }
-const embeddedPlatform = window.embeddedPlatform ?? false
+export const embeddedPlatform = window.embeddedPlatform ?? false
 const locationWritable = writable(getRawCurrentLocation())
 
 console.log('embeddedPlatform', window.embeddedPlatform)

plugins/workbench-resources/src/connect.ts

@@ -38,6 +38,8 @@ export async function connect (title: string): Promise<Client | undefined> {
   const tokens: Record<string, string> = fetchMetadataLocalStorage(login.metadata.LoginTokens) ?? {}
   const token = tokens[ws]
   setMetadata(presentation.metadata.Token, token)
+  document.cookie =
+    encodeURIComponent(presentation.metadata.Token.replaceAll(':', '-')) + '=' + encodeURIComponent(token) + '; path=/'
 
   const endpoint = fetchMetadataLocalStorage(login.metadata.LoginEndpoint)
   const email = fetchMetadataLocalStorage(login.metadata.LoginEmail)
@@ -184,6 +186,8 @@ function clearMetadata (ws: string): void {
     setMetadataLocalStorage(login.metadata.LoginTokens, tokens)
   }
   setMetadata(presentation.metadata.Token, null)
+  document.cookie =
+    encodeURIComponent(presentation.metadata.Token.replaceAll(':', '-')) + '=' + encodeURIComponent('') + '; path=/'
   setMetadataLocalStorage(login.metadata.LoginEndpoint, null)
   setMetadataLocalStorage(login.metadata.LoginEmail, null)
   void closeClient()

server/front/src/index.ts

@@ -229,9 +229,29 @@ export function start (
 
   const filesHandler = async (req: any, res: Response): Promise<void> => {
     try {
-      const token = req.query.token as string
-      const payload = decodeToken(token)
+      console.log(req.headers)
+      const cookies = ((req?.headers?.cookie as string) ?? '').split(';').map((it) => it.split('='))
+
+      const token = cookies.find((it) => it[0] === 'presentation-metadata-Token')?.[1]
+      const payload =
+        token !== undefined
+          ? decodeToken(token)
+          : { email: 'guest', workspace: { name: req.query.workspace as string, productId: '' } }
+
       let uuid = req.query.file as string
+      if (token === undefined) {
+        try {
+          const d = await config.minio.stat(payload.workspace, uuid)
+          if (!((d.metaData['content-type'] as string) ?? '').includes('image')) {
+            // Do not allow to return non images with no token.
+            if (token === undefined) {
+              res.status(403).send()
+              return
+            }
+          }
+        } catch (err) {}
+      }
+
       const size = req.query.size as 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'full'
 
       uuid = await getResizeID(size, uuid, config, payload)