🛂(frontend) secure download button

Blocknote download button opens the file in a new
tab, which could be not secure because of XSS attacks.
We replace the download button with a new one that
downloads the file instead of opening it in a new tab.
Some files are flags as unsafe (SVG / js / exe),
for these files we add a confirmation modal before
downloading the file to prevent the user from
downloading a file that could be harmful.
In the future, we could add other security layers
from this model, to analyze the file before
downloading it by example.

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx

@@ -6,24 +6,50 @@ import {
   getFormattingToolbarItems,
   useDictionary,
 } from '@blocknote/react';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { AIGroupButton } from './AIButton';
+import { FileDownloadButton } from './FileDownloadButton';
 import { MarkdownButton } from './MarkdownButton';
+import { ModalConfirmDownloadUnsafe } from './ModalConfirmDownloadUnsafe';
 import { getQuoteFormattingToolbarItems } from './custom-blocks';
 
 export const BlockNoteToolbar = () => {
   const dict = useDictionary();
+  const [confirmOpen, setIsConfirmOpen] = useState(false);
+  const [onConfirm, setOnConfirm] = useState<() => void | Promise<void>>();
   const { t } = useTranslation();
 
-  const formattingToolbar = useCallback(
-    () => (
+  const toolbarItems = useMemo(() => {
+    const toolbarItems = getFormattingToolbarItems([
+      ...blockTypeSelectItems(dict),
+      getQuoteFormattingToolbarItems(t),
+    ]);
+    const fileDownloadButtonIndex = toolbarItems.findIndex(
+      (item) => item.key === 'fileDownloadButton',
+    );
+    if (fileDownloadButtonIndex !== -1) {
+      toolbarItems.splice(
+        fileDownloadButtonIndex,
+        1,
+        <FileDownloadButton
+          key="fileDownloadButton"
+          open={(onConfirm) => {
+            setIsConfirmOpen(true);
+            setOnConfirm(() => onConfirm);
+          }}
+        />,
+      );
+    }
+
+    return toolbarItems;
+  }, [dict, t]);
+
+  const formattingToolbar = useCallback(() => {
+    return (
       <FormattingToolbar>
-        {getFormattingToolbarItems([
-          ...blockTypeSelectItems(dict),
-          getQuoteFormattingToolbarItems(t),
-        ])}
+        {toolbarItems}
 
         {/* Extra button to do some AI powered actions */}
         <AIGroupButton key="AIButton" />
@@ -31,9 +57,18 @@ export const BlockNoteToolbar = () => {
         {/* Extra button to convert from markdown to json */}
         <MarkdownButton key="customButton" />
       </FormattingToolbar>
-    ),
-    [dict, t],
-  );
+    );
+  }, [toolbarItems]);
 
-  return <FormattingToolbarController formattingToolbar={formattingToolbar} />;
+  return (
+    <>
+      <FormattingToolbarController formattingToolbar={formattingToolbar} />
+      {confirmOpen && (
+        <ModalConfirmDownloadUnsafe
+          onClose={() => setIsConfirmOpen(false)}
+          onConfirm={onConfirm}
+        />
+      )}
+    </>
+  );
 };

src/frontend/apps/impress/src/features/docs/doc-editor/components/FileDownloadButton.tsx

@@ -0,0 +1,111 @@
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+  checkBlockIsFileBlock,
+  checkBlockIsFileBlockWithPlaceholder,
+} from '@blocknote/core';
+import {
+  useBlockNoteEditor,
+  useComponentsContext,
+  useDictionary,
+  useSelectedBlocks,
+} from '@blocknote/react';
+import { useCallback, useMemo } from 'react';
+import { RiDownload2Fill } from 'react-icons/ri';
+
+import { downloadFile, exportResolveFileUrl } from '@/features/docs/doc-export';
+
+export const FileDownloadButton = ({
+  open,
+}: {
+  open: (onConfirm: () => Promise<void> | void) => void;
+}) => {
+  const dict = useDictionary();
+  const Components = useComponentsContext();
+
+  const editor = useBlockNoteEditor<
+    BlockSchema,
+    InlineContentSchema,
+    StyleSchema
+  >();
+
+  const selectedBlocks = useSelectedBlocks(editor);
+
+  const fileBlock = useMemo(() => {
+    // Checks if only one block is selected.
+    if (selectedBlocks.length !== 1) {
+      return undefined;
+    }
+
+    const block = selectedBlocks[0];
+
+    if (checkBlockIsFileBlock(block, editor)) {
+      return block;
+    }
+
+    return undefined;
+  }, [editor, selectedBlocks]);
+
+  const onClick = useCallback(async () => {
+    if (fileBlock && fileBlock.props.url) {
+      editor.focus();
+
+      const url = fileBlock.props.url as string;
+
+      /**
+       * If not hosted on our domain, means not a file uploaded by the user,
+       * we do what Blocknote was doing initially.
+       */
+      if (!url.includes(window.location.hostname)) {
+        if (!editor.resolveFileUrl) {
+          window.open(url);
+        } else {
+          void editor
+            .resolveFileUrl(url)
+            .then((downloadUrl) => window.open(downloadUrl));
+        }
+
+        return;
+      }
+
+      if (!url.includes('-unsafe')) {
+        const blob = (await exportResolveFileUrl(url, undefined)) as Blob;
+        downloadFile(blob, url.split('/').pop() || 'file');
+      } else {
+        const onConfirm = async () => {
+          const blob = (await exportResolveFileUrl(url, undefined)) as Blob;
+          downloadFile(blob, url.split('/').pop() || 'file (unsafe)');
+        };
+
+        open(onConfirm);
+      }
+    }
+  }, [editor, fileBlock, open]);
+
+  if (
+    !fileBlock ||
+    checkBlockIsFileBlockWithPlaceholder(fileBlock, editor) ||
+    !Components
+  ) {
+    return null;
+  }
+
+  return (
+    <>
+      <Components.FormattingToolbar.Button
+        className="bn-button"
+        label={
+          dict.formatting_toolbar.file_download.tooltip[fileBlock.type] ||
+          dict.formatting_toolbar.file_download.tooltip['file']
+        }
+        mainTooltip={
+          dict.formatting_toolbar.file_download.tooltip[fileBlock.type] ||
+          dict.formatting_toolbar.file_download.tooltip['file']
+        }
+        icon={<RiDownload2Fill />}
+        onClick={() => void onClick()}
+      />
+    </>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/ModalConfirmDownloadUnsafe.tsx

@@ -0,0 +1,74 @@
+import { Button, Modal, ModalSize } from '@openfun/cunningham-react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Text } from '@/components';
+
+interface ModalConfirmDownloadUnsafeProps {
+  onClose: () => void;
+  onConfirm?: () => Promise<void> | void;
+}
+
+export const ModalConfirmDownloadUnsafe = ({
+  onConfirm,
+  onClose,
+}: ModalConfirmDownloadUnsafeProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      isOpen
+      closeOnClickOutside
+      onClose={() => onClose()}
+      rightActions={
+        <>
+          <Button
+            aria-label={t('Close the modal')}
+            color="secondary"
+            onClick={() => onClose()}
+          >
+            {t('Cancel')}
+          </Button>
+          <Button
+            aria-label={t('Download')}
+            color="danger"
+            onClick={() => {
+              console.log('onClick');
+              if (onConfirm) {
+                void onConfirm();
+              }
+              onClose();
+            }}
+          >
+            {t('Download anyway')}
+          </Button>
+        </>
+      }
+      size={ModalSize.SMALL}
+      title={
+        <Text
+          $gap="0.7rem"
+          $size="h6"
+          $align="flex-start"
+          $variation="1000"
+          $direction="row"
+        >
+          <Text $isMaterialIcon $theme="warning">
+            warning
+          </Text>
+          {t('Warning')}
+        </Text>
+      }
+    >
+      <Box aria-label={t('Modal confirmation to download the attachment')}>
+        <Box>
+          <Box $direction="column" $gap="0.35rem" $margin={{ top: 'sm' }}>
+            <Text $variation="700">{t('This file is flagged as unsafe.')}</Text>
+            <Text $variation="600">
+              {t('Please download it only if it comes from a trusted source.')}
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-export/index.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './utils';