fix(frontend): security XSS / image tag

packages/code-du-travail-frontend/pages/_app.js

@@ -2,6 +2,7 @@
 import "katex/dist/katex.min.css";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import "react-image-lightbox/style.css";
+import "../public/static/modeles.css";
 
 import * as Sentry from "@sentry/nextjs";
 import { GlobalStyles, ThemeProvider } from "@socialgouv/cdtn-ui";

packages/code-du-travail-frontend/src/common/Html.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import xss from "xss";
+import xss, { getDefaultWhiteList } from "xss";
 
 import { htmlParser } from "../lib";
 
@@ -9,6 +9,11 @@ type Props = {
   inline?: boolean;
 };
 
+/**
+ * List of tags that are allowed in the HTML
+ * @type {string[]}
+ * webcomponent-tooltip is used as an overlay for the definition of the words`
+ */
 const whiteListTags = ["webcomponent-tooltip"];
 
 const Html = ({ children, inline = false, ...props }: Props): JSX.Element => {
@@ -25,6 +30,17 @@ const Html = ({ children, inline = false, ...props }: Props): JSX.Element => {
               }
             }
           },
+          // Use for modeles-de-courrier
+          whiteList: {
+            ...getDefaultWhiteList(),
+            ...{
+              div: ["class"],
+              h3: ["class"],
+              li: ["class"],
+              p: ["class"],
+              span: ["class"],
+            },
+          },
         }),
       }}
     />

packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Answer.test.js.snap

@@ -886,7 +886,9 @@ exports[`<Answer /> should renders 1`] = `
             <div
               class=""
             >
-              <p>
+              <p
+                class="test-content"
+              >
                 Contenu au format 
                 <strong>
                   html
@@ -2193,7 +2195,9 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
             <div
               class=""
             >
-              <p>
+              <p
+                class="test-content"
+              >
                 Contenu au format 
                 <strong>
                   html
@@ -3250,7 +3254,9 @@ exports[`<Answer /> should renders back to results link 1`] = `
             <div
               class=""
             >
-              <p>
+              <p
+                class="test-content"
+              >
                 Contenu au format 
                 <strong>
                   html
@@ -4420,7 +4426,9 @@ exports[`<Answer /> should renders related content 1`] = `
             <div
               class=""
             >
-              <p>
+              <p
+                class="test-content"
+              >
                 annualisation du temps de travail. Annualisation de l'annualisation.
               </p>
             </div>
@@ -5632,7 +5640,9 @@ exports[`<Answer /> should renders tooltip 1`] = `
             <div
               class=""
             >
-              <p>
+              <p
+                class="test-content"
+              >
                 Contenu au format 
                 <strong>
                   html
@@ -6690,7 +6700,9 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
             <div
               class=""
             >
-              <p>
+              <p
+                class="test-content"
+              >
                 Contenu au format 
                 <strong>
                   indemnités
@@ -7748,7 +7760,9 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
             <div
               class=""
             >
-              <p>
+              <p
+                class="test-content"
+              >
                 <a
                   href=""
                 >
@@ -8806,7 +8820,9 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
             <div
               class=""
             >
-              <p>
+              <p
+                class="test-content"
+              >
                 annualisation du temps de travail. Annualisation de l'annualisation.
               </p>
             </div>

packages/code-du-travail-frontend/src/lib/html.ts

@@ -3,6 +3,9 @@ import cheerio from "cheerio";
 export const htmlParser = (html: string): string => {
   const $ = cheerio.load(html, null, false);
 
+  // FIXME: Remove style from docx converter
+  $("style").remove();
+
   $("dl").replaceWith(() => {
     const src = $(this).find("source").attr("srcset");
     return src