feat: sanitize HTML in footer

moved sanitize function into a separate file including some simple tests

closes AOEpeople#91

README.md

@@ -186,6 +186,8 @@ To add a footnote to the footer, create a public folder in your application and
 }
 ```
 
+> The footnote information may include HTML like `<a href="https://foo.bar">My Link</a>` which will be sanitized.
+
 ### Add a help page with explanations
 To add a help page, create a public folder in your application and put a `messages.json` in it.
 ```json
@@ -252,6 +254,8 @@ To add a help page, create a public folder in your application and put a `messag
 }
 ```
 
+> The information in `description`s for `rings` and `quadrants` as well as the `values` for `paragraphs` may include HTML like `<a href="https://foo.bar">My Link</a>` which will be sanitized.
+
 > For more information see the source code of the [Messages Context](./src/context/MessagesContext/index.tsx).
 
 ## Development

src/components/Footer/Footer.tsx

@@ -6,6 +6,7 @@ import { assetUrl, getItemPageNames, isMobileViewport } from "../../config";
 import { Item } from "../../model";
 import "./footer.scss";
 import { useMessages } from "../../context/MessagesContext";
+import { sanitize } from "../../sanitize";
 
 interface Props {
  items: Item[];
@@ -34,7 +35,7 @@ const Footer: React.FC<Props> = ({ items, pageName }) => {
  />
  }
  >
- <span className="footnote">{footerFootnote}</span>
+ <div className="footnote" dangerouslySetInnerHTML={sanitize(footerFootnote)}></div>
  </Branding>
  )}
 

src/components/PageHelp/PageHelp.tsx

@@ -1,23 +1,16 @@
 import React from "react";
-import sanitizeHtml from 'sanitize-html';
 import HeroHeadline from "../HeroHeadline/HeroHeadline";
 import Fadeable from "../Fadeable/Fadeable";
 import SetTitle from "../SetTitle";
 import { radarName } from "../../config";
 import { useMessages } from "../../context/MessagesContext";
+import { sanitize } from "../../sanitize";
 
 interface Props {
  leaving: boolean;
  onLeave: () => void;
 }
 
-const sanitize = (dirty: string, options: sanitizeHtml.IOptions = {}) => ({
- __html: sanitizeHtml(
- dirty,
- options
- )
-});
-
 const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
  const { pageHelp } = useMessages();
 
@@ -34,12 +27,7 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
  <h3>{headline}</h3>
  {values.map((element, index) => {
  return (
- <p key={index} dangerouslySetInnerHTML={sanitize(element, {
- allowedTags: ['b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li'],
- allowedAttributes: {
- 'a': ['href', 'target']
- },
- })}></p>
+ <p key={index} dangerouslySetInnerHTML={sanitize(element)}></p>
  )
  })
  }
@@ -50,7 +38,7 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
  <ul>
  {quadrants.map(({ name, description }) => (
  <li key={name}>
- <strong>{name}:</strong> <span dangerouslySetInnerHTML={sanitize(description)}></span>
+ <strong>{name}:</strong> <span dangerouslySetInnerHTML={sanitize(description, {})}></span>
  </li>
  ))}
  </ul>
@@ -59,7 +47,7 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
  <ul>
  {rings.map(({ name, description }) => (
  <li key={name}>
- <strong>{name}:</strong> <span dangerouslySetInnerHTML={sanitize(description)}></span>
+ <strong>{name}:</strong> <span dangerouslySetInnerHTML={sanitize(description, {})}></span>
  </li>
  ))}
  </ul>

src/sanitize.test.tsx

@@ -0,0 +1,20 @@
+import { sanitize } from "./sanitize";
+
+describe("sanitize", () => {
+ it("should sanitize the string input to HTML output", () => {
+ let res = sanitize('foo');
+ expect(res.__html).toEqual("foo");
+ res = sanitize('<a href="https://example.org">Example.org</a>');
+ expect(res.__html).toEqual("<a href=\"https://example.org\">Example.org</a>");
+ });
+ it("should not sanitize not allowed tags", () => {
+ let res = sanitize('Before <iframe src="https://example.org"></iframe> After');
+ expect(res.__html).toEqual("Before After");
+ });
+ it("should accept options for rendering", () => {
+ let res = sanitize('<a href="https://example.org" target="_blank">Example.org</a>', { allowedAttributes: { a: ['href']}});
+ expect(res.__html).toEqual("<a href=\"https://example.org\">Example.org</a>");
+ });
+});
+
+

src/sanitize.ts

@@ -0,0 +1,15 @@
+import sanitizeHtml from 'sanitize-html';
+
+const defaultSanitizeOptions = {
+ allowedTags: ['b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li'],
+ allowedAttributes: {
+ 'a': ['href', 'target']
+ }
+}
+
+export const sanitize = (dirty: string, options: sanitizeHtml.IOptions = defaultSanitizeOptions) => ({
+ __html: sanitizeHtml(
+ dirty,
+ options
+ )
+});