Repository navigation
refactor: [M3-7990] - Replace sanitize-html with DOM friendly alternative #10378
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@linode/manager": Tech Stories | ||
| --- | ||
|
|
||
| Replace sanitize-html with dompurify ([#10378](https://github.com/linode/manager/pull/10378)) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,7 +3,6 @@ import { useTheme } from '@mui/material'; | |
| import { useSnackbar } from 'notistack'; | ||
| import * as React from 'react'; | ||
| import { useParams } from 'react-router-dom'; | ||
|
|
||
| import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; | ||
| import { Drawer } from 'src/components/Drawer'; | ||
|
|
@@ -19,6 +18,7 @@ import { | |
| import { useGrants, useProfile } from 'src/queries/profile'; | ||
| import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; | ||
| import { getEntityIdsByPermission } from 'src/utilities/grants'; | ||
| import { sanitizeHTML } from 'src/utilities/sanitizeHTML'; | ||
|
|
||
| interface Props { | ||
| helperText: string; | ||
|
|
@@ -94,10 +94,14 @@ export const AddLinodeDrawer = (props: Props) => { | |
| }; | ||
|
|
||
| const errorNotice = () => { | ||
| let errorMsg = sanitizeHTML({ | ||
| sanitizeOptions: { | ||
| ALLOWED_ATTR: [], | ||
| ALLOWED_TAGS: [], // Disallow all HTML tags, | ||
| }, | ||
| sanitizingTier: 'strict', | ||
| text: localError || '', | ||
| }).toString(); | ||
|
Contributor
Author
There was a problem hiding this comment. we need to satisfy the types here with toString() would love to confirm those changes are good with people familiar with this particular Firewall files. Maybe @carrillo-erik ? |
||
| // match something like: Linode <linode_label> (ID <linode_id>) | ||
|
|
||
| const linode = /Linode (.+?) \(ID ([^\)]+)\)/i.exec(errorMsg); | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,81 @@ | ||
| import DOMPurify from 'dompurify'; | ||
|
|
||
| import { allowedHTMLAttr } from 'src/constants'; | ||
|
|
||
| import { getAllowedHTMLTags, isURLValid } from './sanitizeHTML.utils'; | ||
|
|
||
| import type { AllowedHTMLTagsTier } from './sanitizeHTML.utils'; | ||
| import type { Config } from 'dompurify'; | ||
|
|
||
| type DisallowedTagsMode = 'discard' | 'escape'; | ||
|
|
||
| export interface SanitizeOptions extends Config { | ||
| disallowedTagsMode?: DisallowedTagsMode; | ||
| } | ||
|
|
||
| interface SanitizeHTMLOptions { | ||
| allowMoreTags?: string[]; | ||
| disallowedTagsMode?: DisallowedTagsMode; | ||
| sanitizeOptions?: Config; | ||
| sanitizingTier: AllowedHTMLTagsTier; | ||
| text: string; | ||
| } | ||
|
|
||
| export const sanitizeHTML = ({ | ||
| allowMoreTags, | ||
| disallowedTagsMode = 'escape', | ||
| sanitizeOptions: options = {}, | ||
| sanitizingTier, | ||
| text, | ||
| }: SanitizeHTMLOptions) => { | ||
| DOMPurify.setConfig({ | ||
| ALLOWED_ATTR: allowedHTMLAttr, | ||
| ALLOWED_TAGS: getAllowedHTMLTags(sanitizingTier, allowMoreTags), | ||
| KEEP_CONTENT: disallowedTagsMode === 'discard' ? false : true, | ||
| RETURN_DOM: false, | ||
| RETURN_DOM_FRAGMENT: false, | ||
| RETURN_TRUSTED_TYPE: false, | ||
|
Contributor
Author
There was a problem hiding this comment. RETURN_TRUSTED_TYPE: false, |
||
| ...options, | ||
| }); | ||
|
|
||
| // Define transform function for anchor tags | ||
| const anchorHandler = (node: HTMLAnchorElement) => { | ||
| const href = node.getAttribute('href') ?? ''; | ||
|
|
||
| // If the URL is invalid, transform to a span. | ||
| if (href && !isURLValid(href)) { | ||
| const span = document.createElement('span'); | ||
| span.setAttribute('class', node.getAttribute('class') || ''); | ||
|
|
||
| if (node.parentNode) { | ||
| node.parentNode.replaceChild(span, node); | ||
| } | ||
| } else { | ||
| // If this link opens a new tab, add "noopener noreferrer" for security. | ||
| const target = node.getAttribute('target') || ''; | ||
| if (target === '_blank') { | ||
| node.setAttribute('rel', 'noopener noreferrer'); | ||
| } else { | ||
| node.removeAttribute('rel'); | ||
| node.removeAttribute('target'); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| // Register hooks for DOMPurify | ||
| DOMPurify.addHook('uponSanitizeElement', (node, data) => { | ||
| if (data.tagName === 'a') { | ||
| anchorHandler(node as HTMLAnchorElement); | ||
| } else if (data.tagName === 'span') { | ||
| // Allow class attribute only for span elements | ||
| const classAttr = node.getAttribute('class'); | ||
| if (classAttr && classAttr.trim() !== 'version') { | ||
| node.removeAttribute('class'); | ||
| } | ||
| } | ||
| }); | ||
|
Contributor
Author
There was a problem hiding this comment. legacy handlers which I hope to get rid of soon once we refactor event generators |
||
|
|
||
| // Perform sanitization | ||
| const output = DOMPurify.sanitize(text); | ||
| return output.trim(); | ||
| }; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We allow them, but then we strip them all unless it is for
<span class="version" />This will be all cleaned up once we get rid of out eventMessageGenerator transformers, which is part of this epic