feat(client): support HTML tags in heading and lead props (#840)

- Modify Hero component to use dangerouslySetInnerHTML for heading and lead props - Ensure HTML content is sanitized to prevent XSS attacks Signed-off-by: hxtree <[email protected]>
hxtree · Feb 23, 2024 · 4fbd434 · 4fbd434
1 parent bbb9cfa
commit 4fbd434
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 8 deletions.
diff --git a/clients/admin-client/src/pages/home.page.tsx b/clients/admin-client/src/pages/home.page.tsx
@@ -5,7 +5,7 @@ export default function HomePage() {
     <>
       <Hero
         image="/assets/clouds.jpg"
-        heading="Attention, Game Masters!"
+        heading="Attention,<br/> Game Masters!"
         lead="Introducing our latest tool designed exclusively for you."
       >
       </Hero>

diff --git a/clients/design-system/package.json b/clients/design-system/package.json
@@ -50,7 +50,8 @@
     "lodash": "~4.17.21",
     "bootstrap": "~5.3.2",
     "@popperjs/core": "2.11.8",
-    "@rollup/plugin-multi-entry": "~6.0.1"
+    "@rollup/plugin-multi-entry": "~6.0.1",
+    "xss": "~1.0.14"
   },
   "devDependencies": {
     "vite-plugin-checker": "0.6.2",

diff --git a/clients/design-system/src/components/Hero/Hero.tsx b/clients/design-system/src/components/Hero/Hero.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import './style.module.scss';
+import xss from 'xss';
 
 export interface HeroProps {
   heading: string;
@@ -15,13 +16,13 @@ export const Hero = ({ image, heading, lead, children }: HeroProps) => {
         <div className='container p-sm-1 p-md-3 p-lg-5'>
           <div className="row">
             <div className='col-lg-7 col-sm-12'>
-              <h1 className='display-3 text-primary'>{heading}</h1>
-              <p className="lead text-white">{lead}</p>
+              <h1 className='display-3 text-primary' dangerouslySetInnerHTML={{ __html: xss(heading) }}></h1>
+              <p className="lead text-white" dangerouslySetInnerHTML={{ __html: xss(lead) }}></p>
               {children}
             </div>
           </div>
         </div>
       </div>
    </>
   )
-}
+}
diff --git a/clients/design-system/stories/components/atoms/Icons.stories.tsx b/clients/design-system/stories/components/atoms/Icons.stories.tsx
@@ -52,7 +52,7 @@ export const Default = () => {
       <div className="d-flex flex-wrap">
         {icons.map(({ icon, name }, index) => (
           <div className="mx-4 mb-5" key={index}>
-            <Paper elevation="6" className="d-flex flex-column justify-content-center align-items-center rounded position-relative" style={{ width: '100px', height: '100px', padding: '4px' }} elevation='2'>
+            <Paper elevation="6" className="d-flex flex-column justify-content-center align-items-center rounded position-relative" style={{ width: '100px', height: '100px', padding: '4px' }}>
               <FontAwesomeIcon size='2x' icon={icon} className="position-absolute top-50 start-50 translate-middle" />
               <div className="text-muted position-absolute start-50 bottom-0 translate-middle" style={{ fontSize: "0.6rem", marginBottom: "1px" }}>{name}</div>
             </Paper>

diff --git a/clients/design-system/stories/pages/Homepage.stories.tsx b/clients/design-system/stories/pages/Homepage.stories.tsx
@@ -39,7 +39,7 @@ export const Default = () => (
           Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula.
         </Alert>
 
-        <Paper>
+        <Paper elevation='2'>
           <Typography variant="h1">Et malesuada fames ac turpis.</Typography>
           <Typography variant="intro">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula metus quis sagittis malesuada. Nulla facilisi. Duis feugiat tellus eu justo hendrerit, nec congue odio congue.

diff --git a/common/config/rush/browser-approved-packages.json b/common/config/rush/browser-approved-packages.json
@@ -882,6 +882,10 @@
       "name": "web-vitals",
       "allowedCategories": [ "apis" ]
     },
+    {
+      "name": "xss",
+      "allowedCategories": [ "clients" ]
+    },
     {
       "name": "yargs",
       "allowedCategories": [ "platform", "rigs" ]

diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/common/config/rush/repo-state.json b/common/config/rush/repo-state.json
@@ -1,5 +1,5 @@
 // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
 {
-  "pnpmShrinkwrapHash": "3bc100bbb251882e73f9506a222f8a9ead55c64a",
+  "pnpmShrinkwrapHash": "cd2515e3587f70d1fa8897d5571c205aabea85c7",
   "preferredVersionsHash": "a48003cf229dd47d077bcf6301ac15a6f90e1c34"
 }