logo image

EsLintで外部リンクのセキュリティリスクを警告(Using target="_blank" without rel="noreferrer" is a security risk: see )

Icon representing a data.
2022-01-15
Icon show updated_at
2022-01-15
2
Twitter icon.
Next.js
EsLint

Precondition

  • eslint: 7.32.0
  • eslint-config-next: 11.1.2
  • eslint-config-prettier: ^8.3.0

Fact

Next.jsでのビルド時に警告エラーが発生。

Error log or Error Massage

Error: Using target="_blank" without 
rel="noreferrer" is a security risk: see 
https://html.spec.whatwg.org/multipage/links.html#link-type-noopener

Cause

外部リンクのタグに、rel="noreferrer"を付与していなかったため。

<a href="https://*****.com/" target="_blank">

Method

rel="noopener noreferrer" を追加する。

<a href="https://*****.com/" target="_blank"  rel="noopener noreferrer">

Remarks

window.opener プロパティで 元のwindowオブジェクトにアクセスすることができる。そのため、悪意のあるURLにリダイレクトされる危険性がある。

noreferrerを付与すると、window.openerはnullになる。

在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。
Area to place ads.
Area to place ads.
Comments
There are no comments on this article yet.

Environment Library tools

Next.js
EsLint
在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。