「https://」で始まるページでブックマークレットが動作しない理由
「https://」で始まるページでブックマークレットが動作しない理由を調べてみました。
１．問題点
はてなブックマークでブックマークをするときには、いつも公式のブックマークレットを使っています。
が、「https://」で始まるページではこのブックマークレットが動作しない場合があります。
FirefoxやChromeでこの現象が発生します。
ブックマークできない代表的なURLはTwitterやFacebookなどです。
なお、「https://」で始まるすべてのページでブックマークレットが動作しないという訳ではありませんし、ブックマークレットによっては動作するものもあります。
２．原因
調べてみたところ、ChromeやFirefoxでは「Content Security Policy」というものに対応しているためのようです。
「Content Security Policy（CSP）」は、クロスサイトスクリプティング（XSS）やデータインジェクション攻撃などを検出して軽減するためのセキュリティレイヤーを指します。
具体的にどういうことかというと、「https://」で始まるページにアクセスすると、HTTPレスポンスヘッダに、
content-security-policy:というヘッダが設定されてくることがあります。
下はcontent-security-policyヘッダが設定されたHTTPレスポンスの例です。Firefoxでページを右クリックして「要素を調査」を選択し、「ネットワーク」→「ヘッダ」で確認できます。
ブラウザではこのcontent-security-policyヘッダを検知しているようです。
ただしW3C的にはCSPがブックマークレットの挙動を阻害するものではないらしいので、ブラウザの問題かもしれません。
Content Security Policy Level 2「5. Processing Model」
また、このヘッダが設定されていないhttpsのページでもブックマークレットが動作しないケースもありました。
詳細まで調べきれてないので認識誤りでしたらどこかでつぶやいてください。
３．対策
冒頭の問題点で記したはてなブックマークのブックマークレットについては、Firefoxは「はてなブックマーク Firefox 拡張」、Chromeは「はてなブックマーク GoogleChrome 拡張」で代替可能です。
４．参考サイト
参考サイトは下記です。ありがとうございました。
- スマホ向けページを拡大できるようにするブックマークレット
- パスワードを表示するブックマークレット
- 入力フォームの全角・半角を変換するブックマークレット
- Feedlyでサイドバーを常に表示させるブックマークレット
