From 9c575e397c8ff3829c176dbb9073ec6a2b9f7a38 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 9 Dec 2025 09:43:22 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=92=EF=B8=8F(frontend)=20remove=20dang?=
 =?UTF-8?q?erouslySetInnerHTML=20from=20codebase?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 CHANGELOG.md                                  |  1 +
 .../components/DocGridContentList.tsx         | 30 +++++++++----------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0603aeb..5ef90231 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx
index da81bbe3..ce64b6b6 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx
+++ b/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={() => {