🦔

twitterでサイトをシェアしようとしたときに、勝手にurlがついちゃう件

2022/02/23に公開

JavaScript

Twitter

tech

サイトを作ったときによくSNSのシェア導線をつくると思います。
その際に特にtwitterでは気をつけないと少しありがた迷惑な機能で想定しないシェア文言が入ってしまいます。

デモサイトを下に用意しました。

本当はiframeとかで埋め込みたいのですが、セキュリティの観点でそれは出来なさそう（それはそう）

勝手にシェア元のURLが入ってしまう

まず前提として、twitterでサイトのシェアをしたいときには下のようなシェア用URLが用意されています。

https://twitter.com/share?

ストリングクエリは以下のようになってます

- text = シェアするときに自動で追加されるテキスト
- url = サイトのURL
- hashtags = ハッシュタグ

本来ならこのurlとhashtagsを使えばいいのですが、これを使ってしまうとURLやハッシュタグの位置が自由に決められないという弱点もあります。
なので、textクエリだけを使って、シェア文言を表現したい場面が多々あります。

うまくいかないパターン

それでは実際に、twitterでサイトをシェアする仕組みを作ります。
aタグにURLを入れる方法でも同じですが、今回はwindow.open()を使います。
ここからはデモサイトをみながらチェックしてもらうのがわかりやすいかと思います。

まずは失敗（ダサい）パターン

/**
 * @param {string} text シェアしたいテキスト。encodeURIComponentはエンコードしてくれる組み込み関数。
 */
const shareURL = (text) => `https://twitter.com/share?text=${encodeURIComponent(text)}`;

const TEXT = `この記事が熱い！！
↓↓↓↓↓↓↓↓
https://zenn.dev/soneda_yusuke/articles/a8340aea70c769
↑↑↑↑↑↑↑↑`;

// shareTwitterNG=>Elemnt
shareTwitterNG.addEventListener("click", () => {
	window.open(shareURL(TEXT), "_blank");
});

解説をすると、あるシェア導線をクリックすると、twitterにシェアするという流れになっています。
上のtwitterシェアURLでいうと、textのみにクエリストリングを入れているのですが、実際にこれを動かそうとすると、、、

なぜか最後の行にシェア元（デモサイト）のURLが😨
超絶ダサい
この時のURLを見るとなぜか最後に&url=https://sample-share-twitter.vercel.app/とご丁寧にシェア元のURLがついてしまいます。

原因

考察になりますが、これはwindow.openerからtwitter側が元のURLを取得している可能性が高いです。

これは、現在のタブが他のタブから開かれたときに、そのタブを開いた元のタブを参照できるというAPIです。
おそらく、twitterのシェアURLが開かれたときに、元のタブを開いてURLを勝手にクエリに入れていると思われます。

うまくいく例

ということで、長かったのですが、うまくいく（かっこいい）例は下のようになります。

const shareURL = (text) => `https://twitter.com/share?text=${encodeURIComponent(text)}`;

const TEXT = `この記事が熱い！！
↓↓↓↓↓↓↓↓
https://zenn.dev/soneda_yusuke/articles/a8340aea70c769
↑↑↑↑↑↑↑↑`;

shareTwitterOK.addEventListener("click", () => {
	window.open(shareURL(TEXT), "_blank", "noreferrer");
});

変更点がわかりにくいのですが、window.openerの第三引数にnoreferrerを入れています。
このように変更すると、、、

最後のURLが消えた！
超絶かっこいい

これによって、タブを開いた元の情報を参照できなくなります。noopenerでも良さそうですがこちらはダメでした🤷‍♂️

つまり、noreferrerを明示的に宣言することによって、タブを開いた元の情報を参照することができなくなり、URLの取得ができなくなったということになります。
これで一件落着

まとめ

ここまでの話をまとめるとこんな感じです。

twitterでシェア導線を設置するときには、勝手にurlが補完される可能性が高いの。
これを防ぎたいときにはnoreferrerをつける。
基本的に別サイトに遷移するときや別タブを開くときにはnoopenerやnoreferrerをつけるべき。これをしないと、勝手にサイトの情報を参照されて、悪意のある攻撃を受ける可能性があるので注意です。

というような感じです。
個人的にはなんでaタグにnoopenerつけないとあかんのやろと思ってたのがスッキリしたので、とても学びになりました。

勝手にシェア元のURLが入ってしまう

うまくいかないパターン

原因

うまくいく例

まとめ

Discussion