Firefoxのブックマークレットが使えないサイトがある

　昨日、ツイッターの公式ブログから引用してツイートしようとしたら、ブックマークレットが機能しなかった。１２時間くらい原因と対策を探して、少なくとも次の二つのサイトでFirefoxのブックマークレットを利用できないことが分かった。

• Twitterについて
• GitHub ・ Build software better, together.

　同じドメインのページでも同様である。

　ようやく見つけた原因と対策は次の通りである。

GitHub では、URL 末尾に "?w=" を付与すると、diff からスペースのみの変更行を除去できます。
"?w=" は覚えられないため、次のような Bookmarklet を作成したのですが、GitHub のサイトでは動きません。
（中略）
回答（中略）
Fifefox では、https なページに対するブックマークレートが CSP というセキュリティレイヤによって、動かないようです。
これをブラウザの設定で、無効にしたいのであれば、 about:config から security.csp.enable を false にするとよいようでした。

• https://developer.mozilla.org/ja/docs/Security/CSP
• http://stackoverflow.com/questions/7607605/does-content-security-policy-block-bookmarklets

（Firefox の https なサイトでの bookmarklet 問題）

　Firefoxの about:config で security.csp.enable を false に変えたら、ブックマークレットが機能した。ただ、この方法はセキュリティ面で問題がありそうなので、私は以前から利用している【JSActions】を使うことにした。アドオン【NoScript】を初期状態で利用してもブックマークレットが機能するようである。ただし、オプションの「詳細設定」の「信頼してない」タブにある「ブックマークレットの禁止」というチェック項目をチェックしたら機能しなくなる。この問題はJavascriptを無効にすれば良いわけではなく、アドオン【YesScript】や【QuickJava】を使ってJavascriptを無効にする方法では問題が解決しなかった。アドオン【Adblock Plus】を使ってスクリプトを全てブロックしても問題は解決しなかった。

　ブックマークレットの特徴は"javascript:"で始まることであるが、"javascript:"で始まるリンクは一時期、CSPによるデフォルトの制限だったようである。

Default CSP restrictions

廃止 Gecko 15.0 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12)
Gecko 15.0 note
(Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12)
Gecko 15.0 で、Content Security Policy はデフォルトの制限がなくなりました。詳しくは W3C の Content Security Policy 仕様書をご覧ください。
（以下略）

インライン JavaScript
（中略）
javascript: URI
javascript: URIs are ignored:

1. <a href="javascript:do_something_evil()">Click this for awesome fun stuff!</a>

（Default CSP restrictions）

　私は自作ブックマークレットの紹介のため上記のような"javascript:"で始まるリンクをブログに載せているが、機能しない時期があったことに気付かなかった。また、Firefoxのブックマークレットに関しては使い続けていて、機能しない時期があったことに気付かなかった。今はデフォルトでは制限されなくなったが、Content Security Policy (CSP) を利用しているサイトでは、ブックマークレットが機能しないらしい。

　Content Security Policy (CSP) はHTTPヘッダに記述することで利用できるらしい。

Using Content Security Policy

Content Security Policy を設定することは、実施したいポリシーを決定することになります。ポリシーを決定したら、これらを設定し、あなたのポリシーを確立するために Content-Security-Policy を使用します。

Firefox 23 より前は、X-Content-Security-Policy HTTP ヘッダを使用していました。Firefox 23 以降は、標準になった Content-Security-Policy ヘッダを使用します。以前のヘッダから新しいヘッダへ移行する間は、サイトで Content-Security-Policy ヘッダと Content-Security-Policy ヘッダの両方を送信してもかまいません。この場合は X-Content-Security-Policy を無視して、Content-Security-Policy ヘッダに含まれているポリシーを使用します。

ポリシーの指定

ポリシーを指定するには、次のように Content-Security-Policy HTTP ヘッダを使用してください:

Content-Security-Policy: policy

policy は、あなたの Content Security Policy を記述する ポリシーディレクティブ を含む文字列です。

（中略）

例: 一般的な使用例

（中略）

例 3
Web サイトの管理者が、Web アプリケーションのユーザに、そのカスタムコンテンツに任意のドメインからの画像を含めることを許可したい場合。ただし、オーディオやビデオメディアは信頼されたプロバイダからのものだけに制限し、すべてのスクリプトは、信頼されたコードをホストする特定のサーバからのもののみに制限する。

Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com

この例は、デフォルトでは、ドキュメントの元のホストからのコンテンツのみが許可されますが、次の例外を伴います:

• 画像はどこからのものでも読み込まれます (ワイルドカード記号 "*" に注意してください)。
• メディアは、media1.com と media2.com からのものだけが許可されます (これらのサイトのサブドメインは許可されません)。
• 実行可能なスクリプトは、userscripts.example.com からのものだけが許可されます。

（Using Content Security Policy - Security | MDN）

　この例３の script-src の所のように許可するドメインを指定するとブックマークレットが機能しないのだろう。

CSP policy directives

（中略）

サポートされたポリシーディレクティブ

（中略）

script-src

script-src ディレクティブは、JavaScript の正当な提供元を指定します。他の提供元からのスクリプトを要求したり読み込んだりすることは許可されません。script-src ディレクティブまたは default-src ディレクティブが含まれている場合は、'unsafe-inline' や 'unsafe-eval' を指定しなければ、それぞれインラインスクリプトや eval() が無効になります。

（CSP policy directives - Security | MDN）

　さて、【Twitterについて】や【GitHub】がどのように指定しているのか確認してみた。
　Firefoxの【Webコンソール】（キーボードのF12）の「ネットワーク」タブで表示された一覧から確認したいURL（通常は一番上？）をクリックして表示される「ネットワーク要求調査」ウインドウの中の「応答ヘッダ」を見ることでも確認できたが、【ヘッダーまるみえ君】でも確認できる。
　【Twitterについて】は次のように指定していた。

Content-Security-Policy: default-src https: 'unsafe-eval' data:; report-uri https://twitter.com/scribes/csp_report; img-src https: data: ; script-src https://*.twitter.com https://*.twimg.com https://*.vine.co 'unsafe-eval' ; frame-src https://* chrome-extension: about: javascript:

　【GitHub】は次のように指定していた。

Content-Security-Policy: default-src *; script-src https://github.global.ssl.fastly.net https://ssl.google-analytics.com https://collector-cdn.github.com; style-src 'self' 'unsafe-inline' https://github.global.ssl.fastly.net; object-src https://github.global.ssl.fastly.net

　【Twitterについて】も【GitHub】も script-src の所でドメインが指定されている。即ち、指定されたドメイン以外から要求されたJavascriptは機能しない。Javascriptであるブックマークレットも機能しない。

　今後、Firefoxのブックマークレットが使えないサイトが増えるようであれば対処法を考えないといけない。今は【JSActions】が使えているし、アドオン【Custom Buttons】を利用することで対処できるかもしれないが、アドオンによるJavascriptまで拒否されるようになったら非常に不便になる。大丈夫だと思うが少し心配である。
　それはともかく、Firefoxを使っていてブックマークレットが全く動作しないサイトがあったら、HTTPヘッダの Content-Security-Policy を確認すると良い。ブックマークレットのスクリプトに誤りがあるわけではなく、サイトに拒否されていることが分かるかもしれない。もちろん、ブックマークレットのスクリプトを間違えていても全く反応しないことがあるが…。

追記（2016/2/13）：

　Firefox 44.0では【JSActions】と【Custom Buttons】が使えないので、代わりに about:config の値をツールバーのメニューで変えられるアドオン【PrefBar】をインストールして、次のように security.csp.enable の切り替えチェックボックス(CSP)と media.volume_scale の変更メニュー(音量)を PrefBar に追加して、ブックマークレットはCSPのチェックを外してページをリロードしてから使うことにした。

タグ：不具合 Firefox ブックマークレット