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

前提条件

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

現象

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

エラーログ・エラーメッセージ

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

原因

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

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

対応

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

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

備考

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

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

在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。
Area to place ads.
Area to place ads.
Comments
この記事にコメントはまだありません。

開発環境 ライブラリ ツール

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