Remove some uses of "dangerouslySetInnerHTML" (#1407)

* Remove dangerouslySetInnerHTML from replication addon * Remove dangerouslySetInnerHTML from PermanentNotification * Removes dangerouslySetInnerHTML from addNotification()
apache · Jul 28, 2023 · c486e1d · c486e1d
1 parent 60cda48
commit c486e1d
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 27 deletions.
diff --git a/app/addons/components/actions.js b/app/addons/components/actions.js
@@ -32,7 +32,7 @@ function deleteDatabase (dbId, onDeleteSuccess) {
  this.showDeleteDatabaseModal({ showModal: true });
 
  FauxtonAPI.addNotification({
- msg: 'The database <code>' + _.escape(dbId) + '</code> has been deleted.',
+ msg: 'The database "' + dbId + '" has been deleted.',
  clear: true,
  escape: false // beware of possible XSS when the message changes
  });

diff --git a/app/addons/documents/index-editor/actions.js b/app/addons/documents/index-editor/actions.js
@@ -132,7 +132,7 @@ const deleteView = (options) => {
  SidebarActions.dispatchUpdateDesignDocs(options.designDocs);
 
  FauxtonAPI.addNotification({
- msg: 'The <code>' + _.escape(options.indexName) + '</code> view has been deleted.',
+ msg: 'The "' + options.indexName + '" view has been deleted.',
  type: 'info',
  escape: false,
  clear: true

diff --git a/app/addons/documents/mango/mango.actions.js b/app/addons/documents/mango/mango.actions.js
@@ -10,7 +10,6 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-import app from "../../../app";
 import FauxtonAPI from "../../../core/api";
 import ActionTypes from "./mango.actiontypes";
 import * as IndexResultActions from "../index-results/actions/fetch";
@@ -93,14 +92,11 @@ export default {
 
  return MangoAPI.createIndex(databaseName, indexCode)
  .then(() => {
- const runQueryURL = '#' + FauxtonAPI.urls('mango', 'query-app',
- app.utils.safeURLName(databaseName), '');
-
  const queryIndexes = (params) => { return MangoAPI.fetchIndexes(databaseName, params); };
  dispatch(IndexResultActions.fetchDocs(queryIndexes, fetchParams, {}));
 
  FauxtonAPI.addNotification({
- msg: 'Index is ready for querying. <a href="' + runQueryURL + '">Run a Query.</a>',
+ msg: 'Index is ready for querying.',
  type: 'success',
  clear: true,
  escape: false

diff --git a/app/addons/fauxton/notifications/components/PermanentNotification.js b/app/addons/fauxton/notifications/components/PermanentNotification.js
@@ -21,21 +21,18 @@ export default class PermanentNotification extends React.Component {
 
  static propTypes = {
  visible: PropTypes.bool.isRequired,
- message: PropTypes.string
+ message: PropTypes.node,
  };
 
  constructor (props) {
  super(props);
  }
 
- // many messages contain HTML, hence the need for dangerouslySetInnerHTML
- getMsg () {
- return {__html: this.props.message};
- }
-
  getContent () {
  return (
- <p className="perma-warning__content" dangerouslySetInnerHTML={this.getMsg()}></p>
+ <p className="perma-warning__content">
+ {this.props.message}
+ </p>
  );
  }
 

diff --git a/app/addons/fauxton/notifications/reducers.js b/app/addons/fauxton/notifications/reducers.js
@@ -39,10 +39,6 @@ function addNotification ({ notifications }, info) {
  info.escape = true;
  }
 
- info.htmlMsg = {
- __html: (info.escape ? _.escape(info.cleanMsg) : info.cleanMsg)
- };
-
  // clear: true causes all visible messages to be hidden
  if (info.clear) {
  const idsToClear = _.map(notifications, 'toastId');
@@ -55,7 +51,7 @@ function addNotification ({ notifications }, info) {
 
  newNotifications.unshift(info);
 
- toast(<span dangerouslySetInnerHTML={info.htmlMsg}/>, info);
+ toast(<span>{info.msg}</span>, info);
 
  return newNotifications;
 }

diff --git a/app/addons/replication/actions.js b/app/addons/replication/actions.js
@@ -79,7 +79,7 @@ export const replicate = (params, pageLimit) => dispatch => {
  }
 
  FauxtonAPI.addNotification({
- msg: `Replication from <code>${decodeURIComponent(source)}</code> to <code>${decodeURIComponent(target)}</code> has been scheduled.`,
+ msg: `Replication from "${decodeURIComponent(source)}" to "${decodeURIComponent(target)}" has been scheduled.`,
  type: 'success',
  escape: false,
  clear: true
@@ -223,7 +223,7 @@ export const deleteDocs = (docs, pageLimit) => dispatch => {
 
  let msg = 'The selected documents have been deleted.';
  if (docs.length === 1) {
- msg = `Document <code>${docs[0]._id}</code> has been deleted`;
+ msg = `Document "${docs[0]._id}" has been deleted`;
  }
 
  FauxtonAPI.addNotification({
@@ -261,7 +261,7 @@ export const deleteReplicates = (replicates) => dispatch => {
  .then(() => {
  let msg = 'The selected replications have been deleted.';
  if (replicates.length === 1) {
- msg = `Replication <code>${replicates[0]._id}</code> has been deleted`;
+ msg = `Replication "${replicates[0]._id}" has been deleted`;
  }
 
  dispatch(clearSelectedReplicates());

diff --git a/app/addons/replication/components/modals.js b/app/addons/replication/components/modals.js
@@ -30,13 +30,15 @@ export const DeleteModal = ({
  return null;
  }
 
- let header = "";
+ let header = undefined;
  let btnText = `Delete ${isReplicationDB ? 'Document' : 'Replication Job'}`;
  let infoSection = `Deleting a replication ${isReplicationDB ? 'document' : 'job'} stops continuous replication
  and incomplete one-time replication, but does not affect replicated documents.`;
 
  if (multipleDocs > 1) {
- header = `You are deleting <strong>${multipleDocs}</strong> replication ${isReplicationDB ? 'documents' : 'jobs'}.`;
+ header = <>
+ You are deleting <strong>{multipleDocs}</strong> replication {isReplicationDB ? 'documents' : 'jobs'}.
+ </>;
  btnText = `Delete ${isReplicationDB ? 'Documents' : 'Replication Jobs'}`;
  }
 
@@ -53,7 +55,7 @@ export const DeleteModal = ({
  <Modal.Title>Confirm Deletion</Modal.Title>
  </Modal.Header>
  <Modal.Body>
- <p dangerouslySetInnerHTML={{__html: header}}></p>
+ <p>{header}</p>
  <p>{infoSection}</p>
  </Modal.Body>
  <Modal.Footer>

diff --git a/app/addons/replication/components/newreplication.js b/app/addons/replication/components/newreplication.js
@@ -147,7 +147,7 @@ export default class NewReplicationController extends React.Component {
 
  if (replicationTarget === Constants.REPLICATION_TARGET.NEW_LOCAL_DATABASE && _.includes(databases, localTarget)) {
  FauxtonAPI.addNotification({
- msg: 'The <code>' + localTarget + '</code> database already exists locally. Please enter another database name.',
+ msg: 'The "' + localTarget + '" database already exists locally. Please enter another database name.',
  type: 'error',
  escape: false,
  clear: true

diff --git a/app/addons/search/actions.js b/app/addons/search/actions.js
@@ -233,7 +233,7 @@ const deleteSearchIndex = (options) => {
  SidebarActions.dispatchUpdateDesignDocs(options.designDocs);
 
  FauxtonAPI.addNotification({
- msg: 'The <code>' + _.escape(options.indexName) + '</code> search index has been deleted.',
+ msg: 'The "' + options.indexName + '" search index has been deleted.',
  type: 'info',
  escape: false,
  clear: true