Repair xss bug (#5256)

* repair upload file with same script name bug

* update repo name xss bug

* fix: transform lib xss bug

* optimize code

frontend/src/components/dialog/change-repo-password-dialog.js

@@ -5,6 +5,7 @@ import { gettext, repoPasswordMinLength } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
+import StyledTitle from '../styled-title';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -98,7 +99,9 @@ class ChangeRepoPasswordDialog extends React.Component {
     return (
       <Modal isOpen={true} centered={true} style={{height: 'auto'}}>
         <ModalHeader toggle={toggleDialog}>
-          <span dangerouslySetInnerHTML={{__html: Utils.generateDialogTitle(gettext('Change Password of Library {placeholder}'), repoName)}}></span>
+          <span>
+            {gettext("Change Password of Library")}{' '}<StyledTitle title={repoName} />
+          </span>
         </ModalHeader>
         <ModalBody>
           <form id="repo-change-passwd-form" action="" method="post">

frontend/src/components/dialog/lib-sub-folder-permission-dialog.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import StyledTitle from '../styled-title';
 import LibSubFolderSetUserPermissionDialog from './lib-sub-folder-set-user-permission-dialog';
 import LibSubFolderSetGroupPermissionDialog from './lib-sub-folder-set-group-permission-dialog';
 import '../../css/share-link-dialog.css';
@@ -32,7 +33,7 @@ class LibSubFolderPermissionDialog extends React.Component {
   }
 
   renderContent = () => {
-    let activeTab = this.state.activeTab;
+    const activeTab = this.state.activeTab;
 
     return (
       <Fragment>
@@ -64,14 +65,28 @@ class LibSubFolderPermissionDialog extends React.Component {
     );
   }
 
-  render() {
+  renderHeader = () => {
     const { repoName, folderName } = this.props;
+    if (repoName) {
+      return (
+        <Fragment>
+          <StyledTitle title={repoName} />{gettext('Folder Permission')}
+        </Fragment>
+      );
+    }
+    return (
+      <Fragment>
+        {gettext('Set')}{' '}<StyledTitle title={folderName} />{gettext('permission')}
+      </Fragment>
+    );
+  }
 
+  render() {
     return (
       <div>
         <Modal isOpen={true} style={{maxWidth: '980px'}} className="share-dialog" toggle={this.props.toggleDialog}>
           <ModalHeader toggle={this.props.toggleDialog}>
-            <span dangerouslySetInnerHTML={{__html: repoName ? Utils.generateDialogTitle(gettext('{placeholder} Folder Permission'), repoName) : Utils.generateDialogTitle(gettext('Set {placeholder}\'s permission'), folderName)}}></span>
+            {this.renderHeader()}
           </ModalHeader>
           <ModalBody className="dialog-list-container share-dialog-content" role="tablist">
             {this.renderContent()}

frontend/src/components/dialog/transfer-dialog.js

@@ -8,6 +8,7 @@ import { gettext, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import UserSelect from '../user-select';
+import StyledTitle from '../styled-title/index.js';
 
 const propTypes = {
   itemName: PropTypes.string.isRequired,
@@ -61,10 +62,6 @@ class TransferDialog extends React.Component {
 
   render() {
     const itemName = this.props.itemName;
-    const innerSpan = '<span class="op-target" title=' + itemName + '>' + itemName +'</span>';
-    let msg = gettext('Transfer Library {library_name}');
-    let message = msg.replace('{library_name}', innerSpan);
-
     let canTransferToDept = true;
     if (this.props.canTransferToDept != undefined) {
       canTransferToDept = this.props.canTransferToDept;
@@ -72,7 +69,7 @@ class TransferDialog extends React.Component {
     return (
       <Modal isOpen={true}>
         <ModalHeader toggle={this.props.toggleDialog}>
-          <div dangerouslySetInnerHTML={{__html:message}} />
+          {gettext('Transfer Library')}{' '}<StyledTitle title={itemName} />
         </ModalHeader>
         <ModalBody>
           {this.state.transferToUser ?

frontend/src/components/dialog/upload-remind-dialog.js

@@ -28,12 +28,16 @@ class UploadRemindDialog extends React.Component {
   }
 
   render() {
-
-    let title = gettext('Replace file {filename}?');
-    title = title.replace('{filename}', '<span class="a-simaulte">' + this.props.currentResumableFile.fileName + '</span>');
+    const { fileName } = this.props.currentResumableFile;
+    const titlePrefix = gettext('Replace file');
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle} ><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
+        <ModalHeader toggle={this.toggle} >
+          <div>
+            <span>{titlePrefix}{' '}</span>
+            <span class="a-simulate">{fileName}?</span>
+          </div>
+          </ModalHeader>
         <ModalBody>
           <p>{gettext('A file with the same name already exists in this folder.')}</p>
           <p>{gettext('Replacing it will overwrite its content.')}</p>