react/no-invalid-html-attribute

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:

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

Every option, set to its default:

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

Examples#

Reported:

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" />;

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" />;

Not reported:

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"].