From 43af64decffceecfbb81d712667412e5935445fd Mon Sep 17 00:00:00 2001
From: David Cho-Lerat <david.cho-lerat@sonarsource.com>
Date: Mon, 25 Nov 2024 11:58:43 +0100
Subject: SONAR-23741 Backport fixes for SSF-656 & SSF-657

---
 .../components/ActivationFormModal.tsx             | 14 +++--
 .../components/CustomRuleFormModal.tsx             | 14 +++--
 .../components/RuleDetailsDescription.tsx          | 44 ++++++++-------
 .../components/RuleDetailsParameters.tsx           | 15 +++--
 .../ActivationFormModal-test.tsx.snap              | 64 +++++++++++-----------
 .../CustomRuleFormModal-test.tsx.snap              | 32 +++++------
 .../RuleDetailsParameters-test.tsx.snap            | 26 ++++-----
 7 files changed, 111 insertions(+), 98 deletions(-)

(limited to 'server/sonar-web/src/main/js/apps/coding-rules')

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx
index 70851441576..531c0162257 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import classNames from 'classnames';
 import * as React from 'react';
 import { OptionTypeBase } from 'react-select';
@@ -26,7 +27,7 @@ import Modal from '../../../components/controls/Modal';
 import Select from '../../../components/controls/Select';
 import { Alert } from '../../../components/ui/Alert';
 import { translate } from '../../../helpers/l10n';
-import { sanitizeString } from '../../../helpers/sanitize';
+import { SafeHTMLInjection, SanitizeLevel } from '../../../helpers/sanitize';
 import { Dict, Rule, RuleActivation, RuleDetails } from '../../../types/types';
 import { sortProfiles } from '../../quality-profiles/utils';
 import { SeveritySelect } from './SeveritySelect';
@@ -218,11 +219,12 @@ export default class ActivationFormModal extends React.PureComponent<Props, Stat
                     />
                   )}
                   {param.htmlDesc !== undefined && (
-                    <div
-                      className="note"
-                      // eslint-disable-next-line react/no-danger
-                      dangerouslySetInnerHTML={{ __html: sanitizeString(param.htmlDesc) }}
-                    />
+                    <SafeHTMLInjection
+                      htmlAsString={param.htmlDesc}
+                      sanitizeLevel={SanitizeLevel.FORBID_SVG_MATHML}
+                    >
+                      <div className="note" />
+                    </SafeHTMLInjection>
                   )}
                 </div>
               ))
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
index 57c8f242761..55d67cebfad 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import * as React from 'react';
 import { components, OptionProps, OptionTypeBase, SingleValueProps } from 'react-select';
 import { createRule, updateRule } from '../../../api/rules';
@@ -31,7 +32,7 @@ import MandatoryFieldsExplanation from '../../../components/ui/MandatoryFieldsEx
 import { RULE_STATUSES, RULE_TYPES } from '../../../helpers/constants';
 import { csvEscape } from '../../../helpers/csv';
 import { translate } from '../../../helpers/l10n';
-import { sanitizeString } from '../../../helpers/sanitize';
+import { SafeHTMLInjection, SanitizeLevel } from '../../../helpers/sanitize';
 import { latinize } from '../../../helpers/strings';
 import { Dict, RuleDetails, RuleParameter } from '../../../types/types';
 import { SeveritySelect } from './SeveritySelect';
@@ -317,11 +318,12 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
         />
       )}
       {param.htmlDesc !== undefined && (
-        <div
-          className="modal-field-description"
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: sanitizeString(param.htmlDesc) }}
-        />
+        <SafeHTMLInjection
+          htmlAsString={param.htmlDesc}
+          sanitizeLevel={SanitizeLevel.FORBID_SVG_MATHML}
+        >
+          <div className="modal-field-description" />
+        </SafeHTMLInjection>
       )}
     </div>
   );
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
index a7fd2cb2c89..8fe97276bc6 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
@@ -17,13 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import * as React from 'react';
 import { updateRule } from '../../../api/rules';
 import FormattingTips from '../../../components/common/FormattingTips';
 import { Button, ResetButtonLink } from '../../../components/controls/buttons';
 import RuleTabViewer from '../../../components/rules/RuleTabViewer';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { sanitizeString, sanitizeUserInput } from '../../../helpers/sanitize';
+import { SafeHTMLInjection, SanitizeLevel } from '../../../helpers/sanitize';
 import { RuleDetails } from '../../../types/types';
 import { RuleDescriptionSections } from '../rule';
 import RemoveExtendedDescriptionModal from './RemoveExtendedDescriptionModal';
@@ -112,14 +113,14 @@ export default class RuleDetailsDescription extends React.PureComponent<Props, S
   renderExtendedDescription = () => (
     <div id="coding-rules-detail-description-extra">
       {this.props.ruleDetails.htmlNote !== undefined && (
-        <div
-          className="rule-desc spacer-bottom markdown"
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{
-            __html: sanitizeUserInput(this.props.ruleDetails.htmlNote),
-          }}
-        />
+        <SafeHTMLInjection
+          htmlAsString={this.props.ruleDetails.htmlNote}
+          sanitizeLevel={SanitizeLevel.USER_INPUT}
+        >
+          <div className="rule-desc spacer-bottom markdown" />
+        </SafeHTMLInjection>
       )}
+
       {this.props.canWrite && (
         <Button
           id="coding-rules-detail-extend-description"
@@ -216,23 +217,28 @@ export default class RuleDetailsDescription extends React.PureComponent<Props, S
     return (
       <div className="js-rule-description">
         {defaultSection && (
-          <section
-            className="coding-rules-detail-description markdown"
-            key={defaultSection.key}
-            /* eslint-disable-next-line react/no-danger */
-            dangerouslySetInnerHTML={{ __html: sanitizeString(defaultSection.content) }}
-          />
+          <SafeHTMLInjection
+            htmlAsString={defaultSection.content}
+            sanitizeLevel={SanitizeLevel.FORBID_SVG_MATHML}
+          >
+            <section
+              className="coding-rules-detail-description markdown"
+              key={defaultSection.key}
+            />
+          </SafeHTMLInjection>
         )}
 
         {hasDescriptionSection && !defaultSection && (
           <>
             {introductionSection && (
-              <div
-                className="rule-desc"
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML={{ __html: sanitizeString(introductionSection) }}
-              />
+              <SafeHTMLInjection
+                htmlAsString={introductionSection}
+                sanitizeLevel={SanitizeLevel.FORBID_SVG_MATHML}
+              >
+                <div className="rule-desc" />
+              </SafeHTMLInjection>
             )}
+
             <RuleTabViewer ruleDetails={ruleDetails} />
           </>
         )}
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsParameters.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsParameters.tsx
index 512219441a3..50a50c4adb5 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsParameters.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsParameters.tsx
@@ -17,9 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
 import * as React from 'react';
 import { translate } from '../../../helpers/l10n';
-import { sanitizeString } from '../../../helpers/sanitize';
+import { SafeHTMLInjection, SanitizeLevel } from '../../../helpers/sanitize';
 import { RuleParameter } from '../../../types/types';
 
 interface Props {
@@ -30,13 +31,17 @@ export default class RuleDetailsParameters extends React.PureComponent<Props> {
   renderParameter = (param: RuleParameter) => (
     <tr className="coding-rules-detail-parameter" key={param.key}>
       <td className="coding-rules-detail-parameter-name">{param.key}</td>
+
       <td className="coding-rules-detail-parameter-description">
         {param.htmlDesc !== undefined && (
-          <p
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: sanitizeString(param.htmlDesc) }}
-          />
+          <SafeHTMLInjection
+            htmlAsString={param.htmlDesc}
+            sanitizeLevel={SanitizeLevel.FORBID_SVG_MATHML}
+          >
+            <p />
+          </SafeHTMLInjection>
         )}
+
         {param.defaultValue !== undefined && (
           <div className="note spacer-top">
             {translate('coding_rules.parameters.default_value')}
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/ActivationFormModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/ActivationFormModal-test.tsx.snap
index 218e1a3d16e..680fb4d5d02 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/ActivationFormModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/ActivationFormModal-test.tsx.snap
@@ -160,14 +160,14 @@ exports[`should render correctly: default 1`] = `
           type="text"
           value="1"
         />
-        <div
-          className="note"
-          dangerouslySetInnerHTML={
-            {
-              "__html": "description",
-            }
-          }
-        />
+        <SafeHTMLInjection
+          htmlAsString="description"
+          sanitizeLevel={1}
+        >
+          <div
+            className="note"
+          />
+        </SafeHTMLInjection>
       </div>
       <div
         className="modal-field"
@@ -281,14 +281,14 @@ exports[`should render correctly: submitting 1`] = `
           type="text"
           value="1"
         />
-        <div
-          className="note"
-          dangerouslySetInnerHTML={
-            {
-              "__html": "description",
-            }
-          }
-        />
+        <SafeHTMLInjection
+          htmlAsString="description"
+          sanitizeLevel={1}
+        >
+          <div
+            className="note"
+          />
+        </SafeHTMLInjection>
       </div>
       <div
         className="modal-field"
@@ -400,14 +400,14 @@ exports[`should render correctly: update mode 1`] = `
           type="text"
           value="1"
         />
-        <div
-          className="note"
-          dangerouslySetInnerHTML={
-            {
-              "__html": "description",
-            }
-          }
-        />
+        <SafeHTMLInjection
+          htmlAsString="description"
+          sanitizeLevel={1}
+        >
+          <div
+            className="note"
+          />
+        </SafeHTMLInjection>
       </div>
       <div
         className="modal-field"
@@ -555,14 +555,14 @@ exports[`should render correctly: with deep profiles 1`] = `
           type="text"
           value="1"
         />
-        <div
-          className="note"
-          dangerouslySetInnerHTML={
-            {
-              "__html": "description",
-            }
-          }
-        />
+        <SafeHTMLInjection
+          htmlAsString="description"
+          sanitizeLevel={1}
+        >
+          <div
+            className="note"
+          />
+        </SafeHTMLInjection>
       </div>
       <div
         className="modal-field"
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap
index 77ad50e79a5..c376249c83a 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap
@@ -210,14 +210,14 @@ exports[`should handle re-activation 1`] = `
           type="text"
           value=""
         />
-        <div
-          className="modal-field-description"
-          dangerouslySetInnerHTML={
-            {
-              "__html": "description",
-            }
-          }
-        />
+        <SafeHTMLInjection
+          htmlAsString="description"
+          sanitizeLevel={1}
+        >
+          <div
+            className="modal-field-description"
+          />
+        </SafeHTMLInjection>
       </div>
       <div
         className="modal-field"
@@ -465,14 +465,14 @@ exports[`should render correctly: default 1`] = `
           type="text"
           value=""
         />
-        <div
-          className="modal-field-description"
-          dangerouslySetInnerHTML={
-            {
-              "__html": "description",
-            }
-          }
-        />
+        <SafeHTMLInjection
+          htmlAsString="description"
+          sanitizeLevel={1}
+        >
+          <div
+            className="modal-field-description"
+          />
+        </SafeHTMLInjection>
       </div>
       <div
         className="modal-field"
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsParameters-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsParameters-test.tsx.snap
index 1c441e4738e..b6f155022ac 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsParameters-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsParameters-test.tsx.snap
@@ -25,13 +25,12 @@ exports[`should render correctly 1`] = `
         <td
           className="coding-rules-detail-parameter-description"
         >
-          <p
-            dangerouslySetInnerHTML={
-              {
-                "__html": "description",
-              }
-            }
-          />
+          <SafeHTMLInjection
+            htmlAsString="description"
+            sanitizeLevel={1}
+          >
+            <p />
+          </SafeHTMLInjection>
           <div
             className="note spacer-top"
           >
@@ -57,13 +56,12 @@ exports[`should render correctly 1`] = `
         <td
           className="coding-rules-detail-parameter-description"
         >
-          <p
-            dangerouslySetInnerHTML={
-              {
-                "__html": "description",
-              }
-            }
-          />
+          <SafeHTMLInjection
+            htmlAsString="description"
+            sanitizeLevel={1}
+          >
+            <p />
+          </SafeHTMLInjection>
           <div
             className="note spacer-top"
           >
-- 
cgit v1.2.3