Merge pull request #3386 from weseek/fix/prevent-xss-from-duplicate-and-rename

fix xss

src/client/js/app.jsx

@@ -17,6 +17,9 @@ import PageTimeline from './components/PageTimeline';
 import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLazyRenderer';
 import PageManagement from './components/Page/PageManagement';
 import ShareLinkAlert from './components/Page/ShareLinkAlert';
+import DuplicatedAlert from './components/Page/DuplicatedAlert';
+import RedirectedAlert from './components/Page/RedirectedAlert';
+import RenamedAlert from './components/Page/RenamedAlert';
 import TrashPageList from './components/TrashPageList';
 import TrashPageAlert from './components/Page/TrashPageAlert';
 import NotFoundPage from './components/NotFoundPage';
@@ -100,6 +103,9 @@ Object.assign(componentMappings, {
   'grw-fab-container': <Fab />,
 
   'share-link-alert': <ShareLinkAlert />,
+  'duplicated-alert': <DuplicatedAlert />,
+  'redirected-alert': <RedirectedAlert />,
+  'renamed-alert': <RenamedAlert />,
 });
 
 // additional definitions if data exists

src/client/js/components/Page/DuplicatedAlert.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+
+const DuplicatedAlert = (props) => {
+  const { t } = props;
+
+  return (
+    <div className="alert alert-success py-3 px-4">
+      <strong>
+        { t('Duplicated') }:{t('page_page.notice.duplicated')}
+      </strong>
+    </div>
+  );
+};
+
+DuplicatedAlert.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+};
+
+export default withTranslation()(DuplicatedAlert);

src/client/js/components/Page/RedirectedAlert.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+
+const RedirectedAlert = (props) => {
+  const { t } = props;
+
+  return (
+    <>
+      <strong>{ t('Redirected') }:</strong>{ t('page_page.notice.redirected')}
+    </>
+  );
+};
+
+RedirectedAlert.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+};
+
+export default withTranslation()(RedirectedAlert);

src/client/js/components/Page/RenamedAlert.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+
+const RenamedAlert = (props) => {
+  const { t } = props;
+
+  return (
+    <>
+      <strong>{ t('Moved') }:</strong>{t('page_page.notice.moved')}
+    </>
+  );
+};
+
+RenamedAlert.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+};
+
+export default withTranslation()(RenamedAlert);

src/server/views/widget/page_alerts.html

@@ -33,10 +33,10 @@
       <span>
         {% set fromPath = req.query.renamedFrom or req.query.redirectFrom %}
         {% if redirectFrom or req.query.redirectFrom %}
-          <strong>{{ t('Redirected') }}:</strong> {{ t('page_page.notice.redirected', fromPath | preventXss) }}
+        <div id="redirected-alert"></div>
         {% endif %}
         {% if req.query.renamedFrom %}
-          <strong>{{ t('Moved') }}:</strong> {{ t('page_page.notice.moved', fromPath | preventXss) }}
+        <div id="renamed-alert"></div>
         {% endif %}
       </span>
       {% set hasRedirectLink = redirectFrom or req.query.redirectFrom or req.query.withRedirect %}
@@ -50,11 +50,7 @@
     {% endif %}
 
     {% if req.query.duplicated and not page.isDeleted() %}
-    <div class="alert alert-success py-3 px-4">
-      <span>
-        <strong>{{ t('Duplicated') }}: </strong> {{ t('page_page.notice.duplicated', req.query.duplicated | preventXss) }}
-      </span>
-    </div>
+    <div id="duplicated-alert"></div>
     {% endif %}
 
     {% if req.query.unlinked %}