BabelPluginによりリンクへrel=noopenerを自動的に付与する

以下の記事が話題になっていました。

リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io

rel="noopener noreferrer"を付けないとフィッシング詐欺攻撃の可能性があるというものです。
Reactを使っている人ならeslint-plugin-reactも使っていると思いますが、これには、react/jsx-no-target-blankというルールが含まれており、target='_blank'かつhrefがhttpで始まる場合エラーを出します。

eslint-plugin-react/jsx-no-target-blank.md at master · yannickcr/eslint-plugin-react

ただ、これを有効にして安心していると、hrefが変数である場合には対処できず、知らずのうちにnoopenerが付いてないリンクを作成している可能性があります。

そこでbabel-plugin-jsx-target-blankというBabel Pluginを公開しました。

akameco/babel-plugin-jsx-target-blank
add 'noopener noreferrer' to external link for security

これは、aタグにtarget="_blank"があれば自動でnoopener noreferrerを付加するプラグインです。もちろん、外部リンクの場合も付加します。
これによって、もはやnoopenerを付ける付けないを意識することもないです。

使い方

インストール

$ yarn add --dev babel-plugin-jsx-target-blank

.babelrc

{
  "plugins": ["jsx-target-blank"]
}

<a href="akameco.github.io" target="_blank">akameco</a>

      ↓ ↓ ↓ ↓ ↓ ↓

<a href="akameco.github.io" target="_blank" rel="noopener noreferrer">akameco</a>

<a href={externalLink} target="_blank">akameco</a>

      ↓ ↓ ↓ ↓ ↓ ↓

<a href={externalLink} target="_blank" rel="noopener noreferrer">akameco</a>

おわりに

React2アドベントカレンダーがスカスカだったので、すでに過ぎた日を埋めてみました。期限を過ぎたのではないのであしからず😅

JSXのaタグにtarget="_blank"がある場合rel=noopenerを付加するプラグイン書いた。eslintのreact/jsx-no-target-blankとの違いは、hrefが変数の場合も自動で付加する pic.twitter.com/i6YFn6a3xk

— あかめ@無職.js (@akameco) December 7, 2017