gatsby-remark-external-linksを導入出来なかった話
Gatsby.js
2022.02.06
カテゴリー:技術

当ブログのコンタクトページは現時点で、Google フォームのリンクを貼っていますが、別タブで開くようにしており、以下の記述を加えておりました。

target="_blank"

ただ、この形はセキュリティリスクがある(【HTML】target="_blank"の問題点)らしく、コンソールでもちゃんと怒られていました。

10:9 warning Using target="\_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older
browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx-no-target-blank

そこで、Gatsby.js の外部リンク周りについて調べていたら見つかったのがgatsby-remark-external-linksというプラグイン。
ただ、導入方法について調べてみると、

// gatsby-config.js
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: "gatsby-remark-external-links",
options: {
target: "_self",
rel: "nofollow"
}
}
]
}
},

gatsby-transformer-remarkに紐付ける事例ばかりで、gatsby-plugin-mdxを使っている事例が残念ながら見つかりませんでした。
試しにプラグインを導入していろいろな記述を試してみたのですが、だめでした、、
直接 mdx ファイルにtarget="_blank" rel="noopener noreferrer"の記述を加えればいい話なのですが、当ブログは Chakra UI を導入していたので、<Link>タグのオプションにisExternalを記載することで解決。
無事開発者ツールで確認したら付与されていました。