feat: anitize descriptions on help page

allow to customize description content by sanitizing it's content

closes AOEpeople#102

package.json

@@ -43,6 +43,7 @@
  "react-icons": "^4.2.0",
  "react-router-dom": "^5.3.0",
  "react-scripts": "4.0.3",
+ "sanitize-html": "^2.5.2",
  "sass": "^1.42.1",
  "typescript": "4.3.5",
  "walk": "^2.3.15"
@@ -52,6 +53,7 @@
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",
  "@testing-library/user-event": "^12.1.10",
+ "@types/sanitize-html": "^2.5.0",
  "husky": "^7.0.2",
  "lint-staged": "^11.1.2",
  "prettier": "^2.4.1"

src/components/PageHelp/PageHelp.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import sanitizeHtml from 'sanitize-html';
 import HeroHeadline from "../HeroHeadline/HeroHeadline";
 import Fadeable from "../Fadeable/Fadeable";
 import SetTitle from "../SetTitle";
@@ -10,6 +11,13 @@ interface Props {
  onLeave: () => void;
 }
 
+const sanitize = (dirty: string, options: sanitizeHtml.IOptions = {}) => ({
+ __html: sanitizeHtml(
+ dirty,
+ options
+ )
+});
+
 const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
  const { pageHelp } = useMessages();
 
@@ -22,19 +30,29 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
  <HeroHeadline>{title}</HeroHeadline>
  <div className="fullpage-content">
  {paragraphs.map(({ headline, values }) => (
- <React.Fragment key={headline}>
- <h3>{headline}</h3>
- {values.map((element, index) => (
- <p key={index}>{element}</p>
- ))}
- </React.Fragment>
+ <React.Fragment key={headline}>
+ <h3>{headline}</h3>
+ {values.map((element, index) => {
+ const content = sanitizeHtml(element, {
+ allowedTags: ['b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li'],
+ allowedAttributes: {
+ 'a': ['href', 'target']
+ },
+ });
+ console.log(content);
+ return (
+ <p key={index} dangerouslySetInnerHTML={sanitize(element)}></p>
+ )
+ })
+ }
+ </React.Fragment>
  ))}
 
  <p>{quadrantsPreDescription ?? "The quadrants are:"}</p>
  <ul>
  {quadrants.map(({ name, description }) => (
  <li key={name}>
- <strong>{name}:</strong> {description}
+ <strong>{name}:</strong> <span dangerouslySetInnerHTML={sanitize(description)}></span>
  </li>
  ))}
  </ul>
@@ -43,7 +61,7 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
  <ul>
  {rings.map(({ name, description }) => (
  <li key={name}>
- <strong>{name}:</strong> {description}
+ <strong>{name}:</strong> <span dangerouslySetInnerHTML={sanitize(description)}></span>
  </li>
  ))}
  </ul>

yarn.lock

@@ -1947,6 +1947,13 @@
  dependencies:
  "@types/node" "*"
 
+"@types/sanitize-html@^2.5.0":
+ version "2.5.0"
+ resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.5.0.tgz#bfef58fbcf2674b20ffcc23c3506faa68c3a13e3"
+ integrity sha512-PeFIEZsO9m1+ACJlXUaimgrR+5DEDiIXhz7Hso307jmq5Yz0lb5kDp8LiTr5dMMMliC/jNNx/qds7Zoxa4zexw==
+ dependencies:
+ htmlparser2 "^6.0.0"
+
 "@types/scheduler@*":
  version "0.16.1"
  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
@@ -5727,7 +5734,7 @@ [email protected]:
  tapable "^1.1.3"
  util.promisify "1.0.0"
 
-htmlparser2@^6.1.0:
+htmlparser2@^6.0.0, htmlparser2@^6.1.0:
  version "6.1.0"
  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
@@ -6271,6 +6278,11 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
  dependencies:
  isobject "^3.0.1"
 
+is-plain-object@^5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+ integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-potential-custom-element-name@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
@@ -7009,6 +7021,11 @@ kleur@^3.0.3:
  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
+klona@^2.0.3:
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
+ integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
+
 klona@^2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
@@ -7619,6 +7636,11 @@ nanoid@^3.1.23:
  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
  integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
 
+nanoid@^3.1.30:
+ version "3.1.30"
+ resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
+ integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
+
 nanomatch@^1.2.9:
  version "1.2.13"
  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -8139,6 +8161,11 @@ parse-json@^5.0.0:
  json-parse-even-better-errors "^2.3.0"
  lines-and-columns "^1.1.6"
 
+parse-srcset@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
+ integrity sha1-8r0iH2zJcKk42IVWq8WJyqqiveE=
+
 [email protected]:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
@@ -8247,6 +8274,11 @@ performance-now@^2.1.0:
  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picocolors@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+ integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
@@ -9007,6 +9039,15 @@ postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, po
  source-map "^0.6.1"
  supports-color "^6.1.0"
 
+postcss@^8.0.2:
+ version "8.3.11"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
+ integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
+ dependencies:
+ nanoid "^3.1.30"
+ picocolors "^1.0.0"
+ source-map-js "^0.6.2"
+
 postcss@^8.1.0:
  version "8.3.5"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709"
@@ -9924,6 +9965,19 @@ sane@^4.0.3:
  minimist "^1.1.1"
  walker "~1.0.5"
 
+sanitize-html@^2.5.2:
+ version "2.5.2"
+ resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.5.2.tgz#fd7892340e7fc9afd5722200929258808c578784"
+ integrity sha512-sJ1rO2YixFIqs2kIcEUb6PTrCjvz8DMq1XqWWuy0kjgjrn58GNLK1DKSIRybFZDO1WNgsEgD+WiEzTEYS8xEug==
+ dependencies:
+ deepmerge "^4.2.2"
+ escape-string-regexp "^4.0.0"
+ htmlparser2 "^6.0.0"
+ is-plain-object "^5.0.0"
+ klona "^2.0.3"
+ parse-srcset "^1.0.2"
+ postcss "^8.0.2"
+
 sanitize.css@^10.0.0:
  version "10.0.0"
  resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-10.0.0.tgz#b5cb2547e96d8629a60947544665243b1dc3657a"