react/no-danger Restriction

What it does

This rule prevents the use of dangerouslySetInnerHTML prop.

Why is this bad?

dangerouslySetInnerHTML is a way to inject HTML into your React component. This is dangerous because it can easily lead to XSS vulnerabilities.

Example

Examples of incorrect code for this rule:

import React from "react";

const Hello = <div dangerouslySetInnerHTML={{ __html: "Hello World" }}></div>;

Examples of correct code for this rule:

import React from "react";

const Hello = <div>Hello World</div>;

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/no-danger

Config (.oxlintrc.json)

{
  "rules": {
    "react/no-danger": "error"
  }
}

References

• Rule Source