sanitizeHtml remove the style attribute
vishaltyagi227 opened this issue · comments
- What are you trying to do?
I created a react app using the CRA and sanitize the HTML which has a style attribute and allowed the style attribute by setting theallowedAttributes
using the following code.
import sanitizeHtml from "sanitize-html";
export default function App() {
const html = `<p style="background-color: green;">Welcome to the World</p>`;
const element = sanitizeHtml(html, {
allowedAttributes: {
"*": ["style"]
}
});
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div dangerouslySetInnerHTML={{ __html: element }} />
</div>
);
}
But after the clean up of the HTML using the sanitizeHtml, style attribute is removed but this is not expected.
Details
Version of Node.js:
v18.14.2
Server Operating System:
Ubuntu 20.04.5 LTS
Additional context:
I create a app using the create-react-app
.
package.json
{
"name": "sanitize-html-issue",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"sanitize-html": "^2.10.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
]
}
Try removing the ;
from the last style rule. You could also test using parseStyleAttributes: false
to see if it behaves properly.
@BoDonkey Thanks, parseStyleAttributes: false
worked