みなさんこんにちは、ガノー（Ganohr）です。

以下の自ブログで公開しているブックマークレットを、『note.com』で直接リンクを設置して、使用できるかテストしてみたくなりました。

※ こちらはChromeでMETA Refreshを悪用しているサイトの対策用ブックマークレットです。詳細は提示のURLを参照してください。

note.comに直接ブックマークレットを設置して見るテスト

リンクをクリックしてみてください。

ブックマークレット起動（ページを本来は更新しようとするとダイアログを出すブックマークレットです）

ブックマークレットの内容

javascript:
window.onbeforeunload = function(){
    return "本当に離脱しますか?";
}

※ 見やすいよう、解説用に整形しています。

実験結果は失敗。note.comの処理を解説

しかし、実際は以下のようなHTMLが出力されるため、ブックマークレットとして機能しません。

<a href="http://
javascript:
window.onbeforeunload%20=%20function()%7B
%20return%20%22%E6%9C%AC%E5%BD%93%E3%81%AB%E9%9B%A2%E8%84%B1%E3%81%97%E3%81%BE%E3%81%99%E3%81%8B?%22;
%7D
" target="_blank" rel="nofollow">
ブックマークレット起動（本来は更新しようとするとダイアログを出すブックマークレットです）
</a>

※ 解説用に整形済み

URLエンコードされているものの、内容自体は特にサニタイジングなどはされていないことがわかりました。

しかし、URLとして指定された文字が「http://」や「https://」等のプロトコル文字列ではない場合、固定的に「http://」を付与する動作のため、結果としてChromeやIE等のブラウザでは動作しないようです。

また、「_target="blank"」を付与し新規タブ（新規ウィンドウ）で開くうえ、「rel="noopener noreferrer"」により新規タブからのDOM操作も不可能になっています。また、リファラーも付与されません。

セキュリティ上はサニタイジングしていないという懸念はありますが、しかし結局モダンなブラウザなら問題は起こらないと考えられるため、このような実装になっているのでしょう。

ただ、ブックマークレットが配信できたら便利なことは確かです。

むしろ、noteに何らかの申請を行えば、特定のブックマークレットが貼り付けられるといった方針も検討していただきたいところです。

今回の内容は以上です！

よければYouTubeのチャンネル登録や、Twitterのフォローをお願いします✊

↓ ↓ ↓ YouTubeチャンネル登録お願いします（っ'-') =͟͟͞͞ ﾌﾞｫﾝ 👍↓ ↓ ↓

↓ ↓ ↓ Twitterのフォローもお願いします📲_(:3｣∠)_ ↓ ↓ ↓

↓ ↓ ↓ 個人ブログも運営中です📱⊂(*‘ω‘ *)っ💻 ↓ ↓ ↓

↓ ↓ ↓ SEOライティング他ご依頼受付中です😉 ↓ ↓ ↓