From 4fbd43424f995d5a36aa0d99ccad8b28110e4ed7 Mon Sep 17 00:00:00 2001 From: Matthew Heroux Date: Fri, 23 Feb 2024 08:51:57 -0600 Subject: [PATCH] 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 --- clients/admin-client/src/pages/home.page.tsx | 2 +- clients/design-system/package.json | 3 ++- .../design-system/src/components/Hero/Hero.tsx | 7 ++++--- .../stories/components/atoms/Icons.stories.tsx | 2 +- .../stories/pages/Homepage.stories.tsx | 2 +- .../config/rush/browser-approved-packages.json | 4 ++++ common/config/rush/pnpm-lock.yaml | 16 ++++++++++++++++ common/config/rush/repo-state.json | 2 +- 8 files changed, 30 insertions(+), 8 deletions(-) diff --git a/clients/admin-client/src/pages/home.page.tsx b/clients/admin-client/src/pages/home.page.tsx index 7cf04dc0..4acd761f 100644 --- 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() { <> diff --git a/clients/design-system/package.json b/clients/design-system/package.json index 85087f8c..9dd4b697 100644 --- 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 index 1f9cf9c2..03edfd91 100644 --- 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,8 +16,8 @@ export const Hero = ({ image, heading, lead, children }: HeroProps) => {
-

{heading}

-

{lead}

+

+

{children}
@@ -24,4 +25,4 @@ export const Hero = ({ image, heading, lead, children }: HeroProps) => {
) -} +} \ No newline at end of file diff --git a/clients/design-system/stories/components/atoms/Icons.stories.tsx b/clients/design-system/stories/components/atoms/Icons.stories.tsx index 68cedc79..aba50af6 100644 --- 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 = () => {
{icons.map(({ icon, name }, index) => (
- +
{name}
 diff --git a/clients/design-system/stories/pages/Homepage.stories.tsx b/clients/design-system/stories/pages/Homepage.stories.tsx index ce3873a7..cf117e21 100644 --- 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. - + Et malesuada fames ac turpis. 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 index 9d0390d6..04768276 100644 --- 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 index 8aaf4a3f..7d296a39 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -119,6 +119,9 @@ importers: lodash: specifier: ~4.17.21 version: 4.17.21 + xss: + specifier: ~1.0.14 + version: 1.0.14 devDependencies: '@babel/core': specifier: 7.23.5 @@ -16918,6 +16921,10 @@ packages: hasBin: true dev: true + /cssfilter@0.0.10: + resolution: {integrity: sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==} + dev: false + /cssom@0.3.8: resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==} dev: true @@ -28108,6 +28115,15 @@ packages: /xmlchars@2.2.0: resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} + /xss@1.0.14: + resolution: {integrity: sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==} + engines: {node: '>= 0.10.0'} + hasBin: true + dependencies: + commander: 2.20.3 + cssfilter: 0.0.10 + dev: false + /xtend@4.0.2: resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==} engines: {node: '>=0.4'} diff --git a/common/config/rush/repo-state.json b/common/config/rush/repo-state.json index 00aaeb3b..b477263c 100644 --- 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" }