Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(api): sanitize product description #2050

Merged
merged 5 commits into from
Oct 9, 2023
Merged

feat(api): sanitize product description #2050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
67aeda9
feat(api): sanitize product description
icazevedo Oct 4, 2023
de7dc79
fix identation
icazevedo Oct 4, 2023
92d71c3
adjust solution
icazevedo Oct 5, 2023
f0a961b
change to single line comments
icazevedo Oct 5, 2023
f2b31d8
Update ProductDescription.tsx
Oct 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/api/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,11 @@
"dataloader": "^2.1.0",
"fast-deep-equal": "^3.1.3",
"isomorphic-unfetch": "^3.1.0",
"p-limit": "^3.1.0"
"p-limit": "^3.1.0",
"sanitize-html": "^2.11.0"
},
"devDependencies": {
"@types/sanitize-html": "^2.9.1",
"@envelop/core": "^2.6.0",
"@faststore/eslint-config": "^2.1.105",
"@faststore/shared": "^2.1.105",
Expand Down
12 changes: 11 additions & 1 deletion packages/api/src/platforms/vtex/utils/enhanceSku.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import type { Product, Item } from '../clients/search/types/ProductSearchResult'
import { sanitizeHtml } from './sanitizeHtml'

export type EnhancedSku = Item & { isVariantOf: Product }

function sanitizeProduct(product: Product): Product {
return {
...product,
description: product.description
? sanitizeHtml(product.description)
: product.description,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Which product.description values should not be sanitized but escaped?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you mean?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We check if product.description is something, if so we sanitize that, but the else case is not clear for me and that's my question: why do we still need to return the product.description if we check if it exists?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because it can possibly have different falsy states, such as null or undefined. I don't want to change the default falsy value returned by the headless API, so I return whatever it returns me in these case.

}
}

export const enhanceSku = (item: Item, product: Product): EnhancedSku => ({
...item,
isVariantOf: product,
isVariantOf: sanitizeProduct(product),
})
23 changes: 23 additions & 0 deletions packages/api/src/platforms/vtex/utils/sanitizeHtml.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import sanitizeHtmlLib from 'sanitize-html'


/**
* For now, we're using sanitize-html's default set
* of allowed tags and attributes, which don't even include img elements
*
* It is known many client depends on pontentially vulnerable tags, such as script tags
* We chose to be restrictive at first, and document those restrictions later.
icazevedo marked this conversation as resolved.
Show resolved Hide resolved
*
* When expanding the set of allowed tags and attributes, please consider performance, privacy and security.
*
* This possibily breaks compatibility with Portal and Store Framework,
* which both allows an enormous amount of tags and attributes
*
* This was a thoughtful decision that can be reviewed in the future given
* research was made to back up those changes.
*/
export const sanitizeHtml = (
dirty: Parameters<typeof sanitizeHtmlLib>[0],
options?: Parameters<typeof sanitizeHtmlLib>[1]
) =>
sanitizeHtmlLib(dirty, options)
7 changes: 6 additions & 1 deletion packages/core/src/components/ui/ProductDescription/ProductDescription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,12 @@ function ProductDescription({
>
<UIAccordionButton>{title}</UIAccordionButton>
<UIAccordionPanel>
<p className="text__body">{content}</p>
<div
// Applies display: contents through FastStore UI
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I think we don't need to explain the applicability of the data-attr here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Normally i'd agree but I think this is relevant because we're using a div here. It is expected for a div to have margin, padding, etc, but not in this case. It's a very specific behavior that's not common, so I thought it was worth the comment.

data-fs-product-details-description-content
// The content is already sanitized by FastStore API
dangerouslySetInnerHTML={{ __html: content }}
/>
</UIAccordionPanel>
</UIAccordionItem>
))}
Expand Down
12 changes: 12 additions & 0 deletions packages/ui/src/components/organisms/ProductDetails/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,18 @@
}
}

[data-fs-product-details-description-content] {
gvc marked this conversation as resolved.
Show resolved Hide resolved
font-size: var(--fs-text-size-body);
line-height: 1.5;
/**
* display: contents allows you to remove an element from the box tree but still keep its contents
* It doesn't have padding or margin, for example.
*
* https://blogs.igalia.com/mrego/2018/01/11/display-contents-is-coming/
*/
display: contents;
}

[data-fs-image-gallery="with-selector"] ~ [data-fs-product-description] {
@include media(">=notebook") {
grid-column: 2 / 9;
Expand Down
69 changes: 64 additions & 5 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6038,6 +6038,13 @@
dependencies:
"@types/node" "*"

"@types/sanitize-html@^2.9.1":
version "2.9.1"
resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.9.1.tgz#6e4b232916cfb3ec0c4733c9899c99e1697ef953"
integrity sha512-XSLD0a9P8c+rKUM09KIi5Nd8mOHLHNgXb1G04rpXWa/GqQVpM+knrS9KR9ptj1CeC3gXWGZn75ApH3H6qNbhYA==
dependencies:
htmlparser2 "^8.0.0"

"@types/scheduler@*":
version "0.16.2"
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
Expand Down Expand Up @@ -10410,6 +10417,15 @@ dom-serializer@^1.0.1:
domhandler "^4.2.0"
entities "^2.0.0"

dom-serializer@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
dependencies:
domelementtype "^2.3.0"
domhandler "^5.0.2"
entities "^4.2.0"

dom-walk@^0.1.0:
version "0.1.2"
resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
Expand All @@ -10420,7 +10436,7 @@ domain-browser@^1.1.1:
resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==

domelementtype@^2.0.1, domelementtype@^2.2.0:
domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
Expand All @@ -10439,6 +10455,13 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
dependencies:
domelementtype "^2.2.0"

domhandler@^5.0.2, domhandler@^5.0.3:
version "5.0.3"
resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
dependencies:
domelementtype "^2.3.0"

[email protected]:
version "3.0.3"
resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.3.tgz#4b115d15a091ddc96f232bcef668550a2f6f1430"
Expand All @@ -10453,6 +10476,15 @@ domutils@^2.5.2, domutils@^2.8.0:
domelementtype "^2.2.0"
domhandler "^4.2.0"

domutils@^3.0.1:
version "3.1.0"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
dependencies:
dom-serializer "^2.0.0"
domelementtype "^2.3.0"
domhandler "^5.0.3"

dot-case@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
Expand Down Expand Up @@ -10676,7 +10708,7 @@ entities@^2.0.0:
resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==

entities@^4.4.0:
entities@^4.2.0, entities@^4.4.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
Expand Down Expand Up @@ -13393,6 +13425,16 @@ htmlparser2@^6.1.0:
domutils "^2.5.2"
entities "^2.0.0"

htmlparser2@^8.0.0:
version "8.0.2"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
dependencies:
domelementtype "^2.3.0"
domhandler "^5.0.3"
domutils "^3.0.1"
entities "^4.4.0"

http-cache-semantics@^4.0.0, http-cache-semantics@^4.1.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
Expand Down Expand Up @@ -18767,6 +18809,11 @@ parse-path@^7.0.0:
dependencies:
protocols "^2.0.0"

parse-srcset@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==

parse-url@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-8.1.0.tgz#972e0827ed4b57fc85f0ea6b0d839f0d8a57a57d"
Expand Down Expand Up @@ -19280,9 +19327,9 @@ prettier@^2.2.0:
integrity sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==

prettier@latest:
version "2.8.4"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.4.tgz#34dd2595629bfbb79d344ac4a91ff948694463c3"
integrity sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==
version "3.0.3"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==

pretty-bytes@^5.3.0, pretty-bytes@^5.6.0:
version "5.6.0"
Expand Down Expand Up @@ -20670,6 +20717,18 @@ sane@^4.0.3:
minimist "^1.1.1"
walker "~1.0.5"

sanitize-html@^2.11.0:
version "2.11.0"
resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.11.0.tgz#9a6434ee8fcaeddc740d8ae7cd5dd71d3981f8f6"
integrity sha512-BG68EDHRaGKqlsNjJ2xUB7gpInPA8gVx/mvjO743hZaeMCZ2DwzW7xvsqZ+KNU4QKwj86HJ3uu2liISf2qBBUA==
dependencies:
deepmerge "^4.2.2"
escape-string-regexp "^4.0.0"
htmlparser2 "^8.0.0"
is-plain-object "^5.0.0"
parse-srcset "^1.0.2"
postcss "^8.3.11"

sass-loader@^12.6.0:
version "12.6.0"
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb"
Expand Down