当ブログのコンタクトページは現時点で、Google フォームのリンクを貼っていますが、別タブで開くようにしており、以下の記述を加えておりました。
target="_blank"
ただ、この形はセキュリティリスクがある(【HTML】target="_blank"の問題点)らしく、コンソールでもちゃんと怒られていました。
10:9 warning Using target="\_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in olderbrowsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx-no-target-blank
そこで、Gatsby.js の外部リンク周りについて調べていたら見つかったのがgatsby-remark-external-links
というプラグイン。
ただ、導入方法について調べてみると、
// gatsby-config.jsplugins: [{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
を記載することで解決。
無事開発者ツールで確認したら付与されていました。