sanitizeHtml remove the style attribute

[vishaltyagi227]

• 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 the allowedAttributes 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"
    ]
}

[BoDonkey]

Try removing the ; from the last style rule. You could also test using parseStyleAttributes: false to see if it behaves properly.

[vishaltyagi227]

@BoDonkey Thanks, parseStyleAttributes: false worked