What is the purpose of the `dangerouslySetInnerHTML` attribute in React?

Q: What is the purpose of the `dangerouslySetInnerHTML` attribute in React?

`dangerouslySetInnerHTML` is used to inject HTML content into a component. it's named dangerous because improper use can expose your application to cross-site scripting (XSS) attacks. import React from 'react'; const DangerousComponent = ({ htmlContent }) => { return ( Rendered HTML Content ); }; export default DangerousComponent import React from 'react'; import DangerousComponent from './DangerousComponent'; const App = () => { const htmlString = ` This is a paragraph with bold text and a link . List Item 1 List Item 2 `; return ( ); }; export default App;

Difficulty: 5/10

XSS prevention, HTML injection, React rendering

1
dangerouslySetInnerHTML is used to inject HTML content into a component.
2
it's named dangerous because improper use can expose your application to cross-site scripting (XSS) attacks.

javascript

Scenario Questions

0-2 years experience

1You need to render a piece of HTML content coming from a CMS inside a React component. How would you use dangerouslySetInnerHTML to do that, and what steps would you take to ensure it’s safe?
2If you forget to wrap the HTML string in an object with __html when using dangerouslySetInnerHTML, what will happen at runtime?

2-5 years experience

Follow-up Questions

How does using a sanitization library like DOMPurify compare to manual string checks?
What performance differences might you notice between rendering raw HTML and building JSX?
How would you write tests to verify that unsafe markup cannot reach the browser?