Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent invalid characters from appearing in markup (react/no-unescaped-entities) #1566

Closed
feross opened this issue Oct 28, 2020 · 0 comments

Comments

@feross
Copy link
Member

feross commented Oct 28, 2020

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md


From my testing, the configuration with no false positives is:

    "react/no-unescaped-entities": ["error", {
      "forbid": [">", "}"]
    }],

This rule prevents characters that you may have meant as JSX escape characters
from being accidentally injected as a text node in JSX statements.

For example, if one were to misplace their closing > in a tag:

<MyComponent
  name="name"
  type="string"
  foo="bar">  {/* oops! */}
  x="y">
  Body Text
</MyComponent>

The body text of this would render as x="y"> Body Text, which is probably not
what was intended. This rule requires that these special characters are
escaped if they appear in the body of a tag.

Another example is when one accidentally includes an extra closing brace.

<MyComponent>{'Text'}}</MyComponent>

The extra brace will be rendered, and the body text will be Text}.

This rule will also check for " and ', which might be accidentally included
when the closing > is in the wrong place.

<MyComponent
  a="b">  {/* oops! */}
  c="d"
  Intended body text
</MyComponent>

The preferred way to include one of these characters is to use the HTML escape code.

  • > can be replaced with &gt;
  • " can be replaced with &quot;, &ldquo;, &#34; or &rdquo;
  • ' can be replaced with &apos;, &lsquo;, &#39; or &rsquo;
  • } can be replaced with &#125;

Alternatively, you can include the literal character inside a subexpression
(such as <div>{'>'}</div>.

The characters < and { should also be escaped, but they are not checked by this
rule because it is a syntax error to include those tokens inside of a tag.

Rule Details

Examples of incorrect code for this rule:

<div> > </div>

Examples of correct code for this rule:

<div> &gt; </div>
<div> {'>'} </div>

Rule Options

...
"react/no-unescaped-entities": [<enabled>, { "forbid": Array<string> }]
...

forbid

Overwrite the default forbidden entities array ['>', '"', '\'', '}'] with your own:

"react/no-unescaped-entities": ["error", {"forbid": [">", "}"]}],
// or
"react/no-unescaped-entities": ["error", {"forbid": [{
  char: ">",
  alternatives: ['&gt;']
}, {
  char: "}",
  alternatives: ['&#125;']
}]}],

Where char is a special character and alternatives is the correct escapes.

@feross feross added this to the standard 16 milestone Oct 28, 2020
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 29, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
Archived in project
Development

No branches or pull requests

1 participant