🔒️(frontend) remove dangerouslySetInnerHTML from codebase

dangerouslySetInnerHTML were introduced to quickly
render translated strings containing HTML,
but they can lead to security vulnerabilities
if not handled properly.
Better to use React components to ensure safety.

Author: AntoLC

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to
 - ♿(frontend) improve accessibility:
   - ♿(frontend) add skip to content button for keyboard accessibility #1624
   - ♿(frontend) fix toggle panel button a11y labels #1634
+- 🔒️(frontend) remove dangerouslySetInnerHTML from codebase #1712
 - ⚡️(frontend) improve Comments feature #1687
 
 ### Fixed

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx

@@ -4,10 +4,10 @@ import { TreeViewMoveModeEnum } from '@gouvfr-lasuite/ui-kit';
 import { useModal } from '@openfun/cunningham-react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { AlertModal, Card, Text } from '@/components';
-import { Doc, KEY_LIST_DOC } from '@/docs/doc-management';
+import { Doc, KEY_LIST_DOC, useTrans } from '@/docs/doc-management';
 import {
   getDocAccesses,
   getDocInvitations,
@@ -60,6 +60,7 @@ export const DraggableDocGridContentList = ({
   const { mutate: handleDeleteInvitation } = useDeleteDocInvitation();
   const { mutate: handleDeleteAccess } = useDeleteDocAccess();
   const onDragData = useRef<DocDragEndData | null>(null);
+  const { untitledDocument } = useTrans();
 
   const handleMoveDoc = async () => {
     if (!onDragData.current) {
@@ -144,8 +145,8 @@ export const DraggableDocGridContentList = ({
       return t('You must be at least the administrator of the target document');
     }
 
-    return selectedDoc?.title || t('Unnamed document');
-  }, [canDrag, canDrop, selectedDoc, t]);
+    return selectedDoc?.title || untitledDocument;
+  }, [canDrag, canDrop, selectedDoc?.title, t, untitledDocument]);
 
   const cannotMoveDoc =
     !canDrag || (canDrop !== undefined && !canDrop) || isError;
@@ -193,17 +194,16 @@ export const DraggableDocGridContentList = ({
           {...modalConfirmation}
           title={t('Move document')}
           description={
-            <span
-              dangerouslySetInnerHTML={{
-                __html: t(
-                  'By moving this document to <strong>{{targetDocumentTitle}}</strong>, it will lose its current access rights and inherit the permissions of that document. <strong>This access change cannot be undone.</strong>',
-                  {
-                    targetDocumentTitle:
-                      onDragData.current?.target.title ?? t('Unnamed document'),
-                  },
-                ),
-              }}
-            />
+            <Text $display="inline">
+              <Trans
+                i18nKey="By moving this document to <strong>{{targetDocumentTitle}}</strong>, it will lose its current access rights and inherit the permissions of that document. <strong>This access change cannot be undone.</strong>"
+                values={{
+                  targetDocumentTitle:
+                    onDragData.current?.target.title ?? untitledDocument,
+                }}
+                components={{ strong: <strong /> }}
+              />
+            </Text>
           }
           confirmLabel={t('Move')}
           onConfirm={() => {