Avoid using dangerouslySetInnerHTML

- invalid translation can break the markup - it is insecure
agama-project · Apr 15, 2024 · faaab89 · faaab89
1 parent 1fcc535
commit faaab89
Showing 1 changed file with 19 additions and 17 deletions.
diff --git a/web/src/components/storage/DeviceSelectionDialog.jsx b/web/src/components/storage/DeviceSelectionDialog.jsx
@@ -42,10 +42,6 @@ const SELECT_DISK_PANEL_ID = "panel-for-disk-selection";
 const CREATE_LVM_PANEL_ID = "panel-for-lvm-creation";
 const OPTIONS_NAME = "selection-mode";
 
-const Html = ({ children, ...props }) => (
-  <div {...props} dangerouslySetInnerHTML={{ __html: children }} />
-);
-
 /**
  * Renders a dialog that allows the user to select a target device for installation.
  * @component
@@ -101,6 +97,19 @@ export default function DeviceSelectionDialog({
 
   const isDeviceSelectable = (device) => device.isDrive || device.type === "md";
 
+  // TRANSLATORS: description for using plain partitions for installing the
+  // system, the text in the square brackets [] is displayed in bold, use only
+  // one pair in the translation
+  const [msgStart1, msgBold1, msgEnd1] = _("The file systems will be allocated \
+by default as [new partitions in the selected device].").split(/[[\]]/);
+  // TRANSLATORS: description for using logical volumes for installing the
+  // system, the text in the square brackets [] is displayed in bold, use only
+  // one pair in the translation
+  const [msgStart2, msgBold2, msgEnd2] = _("The file systems will be allocated \
+by default as [logical volumes of a new LVM Volume Group]. The corresponding \
+physical volumes will be created on demand as new partitions at the selected \
+devices.").split(/[[\]]/);
+
   return (
     <Popup
       title={_("Device for installing the system")}
@@ -132,12 +141,9 @@ export default function DeviceSelectionDialog({
           </Panels.Options>
 
           <Panels.Panel id={SELECT_DISK_PANEL_ID} isExpanded={isTargetDisk}>
-            <Html>
-              {
-                // TRANSLATORS: beware the HTML markup (<b> and </b>)
-                _("The file systems will be allocated by default as <b>new partitions in the selected device</b>.")
-              }
-            </Html>
+            {msgStart1}
+            <b>{msgBold1}</b>
+            {msgEnd1}
 
             <DeviceSelectorTable
               aria-label={_("Device selector for target disk")}
@@ -151,13 +157,9 @@ export default function DeviceSelectionDialog({
           </Panels.Panel>
 
           <Panels.Panel id={CREATE_LVM_PANEL_ID} isExpanded={isTargetNewLvmVg} className="stack">
-            <Html>
-              {
-                // TRANSLATORS: beware the HTML markup (<b> and </b>)
-                _("The file systems will be allocated by default as <b>logical volumes of a new LVM Volume \
-Group</b>. The corresponding physical volumes will be created on demand as new partitions at the selected devices.")
-              }
-            </Html>
+            {msgStart2}
+            <b>{msgBold2}</b>
+            {msgEnd2}
 
             <DeviceSelectorTable
               aria-label={_("Device selector for new LVM volume group")}