Merge pull request #7941 from thornbill/xss-checkbox-11

Fix xss in checkbox element

Author: thornbill

src/apps/dashboard/routes/users/access.tsx

@@ -318,8 +318,14 @@ const UserLibraryAccess = () => {
                                 key={Item.Id}
                                 className='chkDevice'
                                 itemId={Item.Id}
-                                itemName={Item.CustomName || Item.Name}
-                                itemAppName={Item.AppName}
+                                itemName={
+                                    [
+                                        Item.CustomName || Item.Name,
+                                        Item.AppName
+                                    ]
+                                        .filter(Boolean)
+                                        .join(' - ')
+                                }
                                 itemCheckedAttribute={Item.checkedAttribute}
                             />
                         ))}

src/elements/CheckBoxElement.tsx

@@ -45,7 +45,6 @@ interface CheckBoxElementProps {
     dataFilter?: string;
     itemType?: string;
     itemId?: string | null;
-    itemAppName?: string | null;
     itemCheckedAttribute?: string;
     itemName?: string | null;
     title?: string;
@@ -58,14 +57,12 @@ const CheckBoxElement: FC<CheckBoxElementProps> = ({
     dataFilter,
     itemType,
     itemId,
-    itemAppName,
     itemCheckedAttribute,
     itemName,
     title
 }) => {
-    const appName = itemAppName ? `- ${itemAppName}` : '';
     const renderContent = itemName ?
-        `<span>${escapeHTML(itemName || '')} ${appName}</span>` :
+        `<span>${escapeHTML(itemName)}</span>` :
         `<span>${globalize.translate(title)}</span>`;
 
     return (
@@ -75,13 +72,13 @@ const CheckBoxElement: FC<CheckBoxElementProps> = ({
                 labelClassName: labelClassName ?
                     `class='${labelClassName}'` :
                     '',
-                className: className,
+                className,
                 id: elementId ? `id='${elementId}'` : '',
                 dataFilter: dataFilter ? `data-filter='${dataFilter}'` : '',
                 dataItemType: itemType ? `data-itemtype='${itemType}'` : '',
-                dataId: itemId ? `data-id='${itemId}'` : '',
+                dataId: itemId ? `data-id='${escapeHTML(itemId)}'` : '',
                 checkedAttribute: itemCheckedAttribute || '',
-                renderContent: renderContent
+                renderContent
             })}
         />
     );