react/no-invalid-html-attribute

Disallow values of the rel attribute that HTML does not define

has suggestions

Browsers ignore a rel value they don't know. A typo such as rel="noopenner" looks like it protects the link, but it does nothing.

The rule checks rel on HTML elements in JSX and in React.createElement. It reports:

  • a value that isn't a link type at all, or isn't one for this element: stylesheet is for <link>, noopener is for <a>, <area> and <form>
  • rel on an element other than <a>, <area>, <form> and <link>
  • an empty rel, or one that isn't a string
  • shortcut without icon after it
  • extra whitespace around or between the values

The rule doesn't check your own components. Most reports come with a suggestion that removes the invalid part.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/no-invalid-html-attribute" = "error" # or "warn"

Every option, set to its default:

bunfig.toml
[lint.rules]
"react/no-invalid-html-attribute" = ["error", ["rel"]]

Examples#

example.jsx3 problems
const docs = <a href="https://example.com" rel="noopenner">Docs</a>;

const home = <a href="/" rel="stylesheet">Home</a>;

const logo = <img src="/logo.png" rel="preload" />;
example.jsx3 problems
const empty = <a href="/" rel="">Home</a>;

const spaced = <a href="https://example.com" rel="noopener  noreferrer">Docs</a>;

const icon = <link rel="shortcut" href="/favicon.ico" />;
example.jsxNo problems
const docs = <a href="https://example.com" rel="noopener noreferrer">Docs</a>;

const styles = <link rel="stylesheet" href="/main.css" />;

const icon = <link rel="shortcut icon" href="/favicon.ico" />;

const next = <PageLink rel="following" to="/page/2" />;

Options#

The option is the list of attributes to check. "rel" is the only attribute the rule knows, so the default is ["rel"].