» Web 開発
Adobe Flash利用を削減するFirefox
この投稿は米国 Mozilla Tech Blog の記事 “Reducing Adobe Flash Usage in Firefox” の抄訳です。
ブラウザプラグイン、特にFlashは、ビデオ再生やインタラクティブなコンテンツを含む、いくつかの素晴らしい機能をウェブの世界で使えるようにしてきました。しかし、プラグインはしばしば安定性、パフォーマンスやセキュリティの課題をブラウザに引き起こして来ました。これはユーザが受け入れなければならないトレードオフではありません。
Mozillaおよびウェブ業界は、日々のブラウジングにFlashの必要性が低くなるように段階を踏んできました。2016年8月、Firefoxはユーザ体験に必須ではない、いくつかのFlashコンテンツをブロックしましたが、レガシーのFlashコンテンツはサポートを継続しております。これらの変更および将来の変更により、Firefoxユーザにとってはセキュリティの拡張、バッテリー寿命延長、ページロードの高速化や、より良いブラウザー反応性が実現する予定です。
ここ何年かに亘り、Firefoxはこれまでプラグインでしか提供されていなかった機能をWebAPIで代替する実装を行ってきました。これはビデオ・音声再生やストリーミング機能、クリップボード統合、高速2Dおよび3Dグラフィックス、WebSocketネットワーキングやマイク・カメラアクセスなどです。ウェブサイトがFlashから他のウェブ技術に移行するに従って、プラグインによるFirefoxのクラッシュレートは劇的に低下しました。
Firefoxはユーザに見えない特殊なFlashコンテンツをブロックすることにより、この傾向を継続していきます。これによりFlashのクラッシュやハングは最大10％になる見込みです。ウェブサイトの互換性問題を最小化するため、これらの変化はHTMLに置き換え可能な少なく厳選されたFlashコンテンツのリストに当初は限定されていました。私たちは時間をかけてこのリストを追加していく予定です。
2016年末、私たちは広告測定でよく使われるコンテンツの可視性(viewability)をチェックするために使われるFlashをこのリストに追加しました。これはFirefoxのパフォーマンスとデバイスバッテリー寿命を向上させます。この変更と同時にFirefoxはHTMLで同等の機能となるIntersection Observer API (Firefox bug 1243846)を実装いたします。可視性測定に現在Flashを利用されているコンテンツ製作者のみなさんには、このAPIが有効になり次第、この新しいAPIを適用いただくことをお勧めいたします。
2017年には、Firefoxはすべてのコンテンツについて、Flashプラグイン持つウェブサイトを有効にする前に、クリックによる有効化承認作業を必要とする予定です。現在ビデオやゲームでFlashやSilverlightをご利用のウェブサイトはできるだけ早期にHTML技術への適用を計画すべきです。Firefoxはビデオプラグインの代替として、Adobe PrimetimeとGoogle Widevineの暗号ビデオ再生をサポートしています。
私たちは引き続きAdobe社と密接に連携し、最適に実現可能なFlash体験をユーザのみなさんに提供していきます。この開発パートナーシップにより、パフォーマンスと安定性を改善するWindowsでの高DPIの改善や、拡張サンドボックス、高速化Flashレンダリングパイプラインを実装していきます。
これらの変更により、ユーザのみなさんが使いやすいウェブ体験を損なうことなく、ブラウジングを安全に高速にするための私たちの進めるさまざまな活動の一部です。2015年に発表しましたとおり、2017年3月にFirefoxはFlashを除くすべてのNPAPIプラグインのサポートを停止する計画です。次のメジャーバージョンであるFirefox ESR (法人向け延長サポート版）リリースは同じ2017年3月に予定されていますが、移行に時間が必要なユーザのみなさまのために、ESRではSilverlightやJavaなどのプラグインのサポートを2018年初頭まで継続する予定です。
私たちは多くのその他の機能や改善を試み、Firefoxを発見や協調のためのより素晴らしいプラットフォームにしてきます。フィードバックや機能リクエストをお待ちしています。
Firefox の開発ツールを使った JavaScript のパフォーマンス向上
この記事は Hacks ブログの記事、”Optimizing JavaScript Performance With Firefox Dev Tools
” の抄訳です。
Firefox の開発ツールに含まれるパフォーマンスツールを利用すると、パフォーマンスの低い JavaScript を調査して、一般的なレスポンスとレイアウトに関する性能を見ることが可能になります。
以下のスクリーンキャストでは、コードの中で性能を低下させている要因を調査し、それを修正する方法を解説しています。具体的には、かろうじて数秒に 1 度画面を更新できる程度に低速な 2D の canvas の描画デモを、パフォーマンス分析し、少しの修正を加えることで実用的なフレームレートで描画できるように改善しています。
スクリーンキャスト：https://youtu.be/VFZFpzQTG6M
関連情報
Greg Tatum について
Firefox の開発ツールに含まれる、パフォーマンスツールとメモリツールの開発者。
クリエイティブコーディングに対する情熱を持ち、Canvas 2D と WebGL を使った描画の限界を広げるべく活動を行う。
- Web サイト：gregtatum.com/
- Twitter：@TatumCreative
Greg Tatum によるその他の記事はこちら。
Firefox の新しいメモリツール
この記事は 2015 年 11 月 11 日にポストされた “Firefox’s New Memory Tool” の抄訳です。
Firefox Developer Edition 44 には、新しくメモリツールが追加されました。このツールを使うと、Web アプリケーションのメモリ使用状況について理解しやすくなります。特にリソースの制限の厳しいモバイル向けの Web サイトの開発者には有用でしょう。この強力なツールの使い方は、フリーランスのクリエイティブデザイナーであり、フランスの Mozilla コミュニティメンバーでもある Baptiste Kaenel の作成した動画をご覧ください：https://youtu.be/DJLoq5E5ww0
メモリツールはまずメモリのスナップショットをとります。その結果を様々な点でグループ分けし、ツリーや表形式で表示します。標準では “coarse type” でグルーピングしています。この設定では、メモリ上のものを次の 4 つに分類します。
- オブジェクト：JavaScript のオブジェクト。[[Class]] 名によって、より細かくグループ分けされます
- Scripts：Web アプリケーションによってロードされた JavaScript のソースコード。ここにはSpiderMonkey の JIT コンパイラである IonMonkey によって生成された実行可能なマシンコードも含まれます
- String：Web アプリケーションが使用する、JavaScript の文字列です
- その他：上記のいずれにも属さないものを表します
“coarse type” 以外には、”object class” と “internal type” でもグルーピング可能です。前者では JavaScript の [[Object]] クラスによってグルーピングを行い、後者ではそれらの C++ での型によって分類します。後者は特に Firefox のプラットフォーム開発を行う人にとって有用な機能でしょう。
また “allocation stack” というグルーピング方法も選べます。これはメモリパネルの上部にある「割り当てスタックを記録」にチェックを入れることで利用できます。これは割り当てスタックの記録を取ることによって、アプリケーションのパフォーマンスが低下するためです。その代わり、ヒープ領域上のものを JavaScript コード上の位置によってグループ化して確認できるようになります。他の設定とは異なり、JavaScript のソースコードとメモリ上の要素とを直接関連付けて確認できるようになります。
スナップショットはいくつも取ることができ、それぞれのスナップショットにはメモリの使用量が MB 単位で表示されます。これを見ることで、アプリケーションのメモリの使用量が時間に応じて増減する様子を確認できます。
メモリツールの詳細については、MDN のメモリツールのページをご覧ください。また私たちは皆さまからのフィードバックをおまちしています。ぜひ Firefox Developer Edition をダウンロードし、コメントを @FirefoxDevTools 宛ににツイートください。
Dan Callahan について
Mozilla の Developer Relation を担当するエンジニア。元 Mozilla Persona の開発者。
- Web サイト：dancallahan.info
- Twitter：@callahad
Nick Fitzgerald について
Firefox の開発ツールと JavaScript エンジンである SpiderMonkey を担当。ソースマップの仕様策定者の一人で、ブログ fitzgeraldnick.com を不定期に更新中。IRC では fitzgen でコンタクト可能。
- Web サイト：fitzgeraldnick.com
- Twitter：@fitzgen
Firefox 47 サイト互換性情報
先週金曜日、Firefox 46 Beta と Firefox 47 Developer Edition (Aurora) がリリースされました。いつも通りサイト互換性情報を用意していますので、Web 開発者の皆さんは一読されることをお勧めします。
もし一覧に漏れや間違いがあるときは下のコメント欄でお知らせください。
HTTP ページ上でのパスワード要求はやめましょう
[これは Mozilla のセキュリティエンジニア Tanvi Vyas 氏のブログ記事 No More Passwords over HTTP, Please! を同氏の許可を得て翻訳したものです]
Firefox 46 Developer Edition は、HTTP ページ上でログイン情報の入力を求められた場合、開発者に警告を行います。
ユーザ名とパスワードの組み合わせは、ユーザの個人データへのアクセスを管理する手段です。Web サイトはこうした情報を注意深く扱い、パスワードは HTTPS のような安全な (認証、暗号化された) 接続を通じてのみ要求すべきです。しかし残念なことに、HTTP のような安全でない接続でユーザのパスワードが扱われている例が 非常に多く 見られます。このプライバシーとセキュリティの脆弱性を開発者の皆さんに知らせるため、最新の Firefox Developer Edition で、安全でないページのセキュリティアイコンを赤い斜線の入った南京錠アイコンに変えることにより、問題を開発者に警告するようにしました。
Firefox はパスワード入力欄が安全かどうかをどうやって判断するのでしょうか？
Firefox は、パスワード入力欄が安全であるかどうかを、それが埋め込まれているページを調査することで判断します。各ページは、W3C の Secure Contexts 仕様 で定められたアルゴリズムに従って、安全かそうでないか確認されます。安全でないページに埋め込まれているあらゆる要素は 中間者 (MITM) 攻撃によって改ざんされる恐れがあります。攻撃者は、以下に挙げるような様々な仕組みを用いて、安全でないページ上で入力されたパスワードを抜き出すことが可能です。
- フォームの
action属性を変更することで、本来の送信先ではなく攻撃者の管理下にあるサーバへ向けてパスワードが送信されるようにします。その後本来の送信先へ、その盗み取ったパスワードを転送するようにして、即座にリダイレクトします。 - JavaScript を使って、フォーム送信前にパスワード入力欄の内容を取得し、それを攻撃者のサーバへ送信します。
- JavaScript を使って、ユーザのキー入力操作を記録し、それを攻撃者のサーバへ送信します。
上記の攻撃はすべて、アカウント情報が漏洩したことにユーザが気付かないうちに起こり得るという点に注意が必要です。
Firefox は、バージョン 26 以降、開発者ツールの Web コンソール を通じてこの問題を開発者に警告しています。
なぜ HTTPS を通じてパスワードの送信するだけでは十分と言えないのでしょうか？ なぜログインフォームの置かれたページまで HTTPS でなければいけないのでしょうか？
このような質問は頻繁に聞かれますので、この記事で特に取り上げなければと考えていました。HTTP の代わりに HTTPS を通じて送信を行えば、確かにネットワーク盗聴者がユーザのパスワードを覗き見るのを防ぐことは可能ですが、活動中の中間者攻撃者が安全でない HTTP ページからパスワードを抜き出すのを防ぐことはできません。上で説明した通り、活動中の攻撃者は Web サーバとユーザのコンピュータの間で HTTP 通信に割り込み、Web ページの内容を改ざんすることが可能です。攻撃者は、サイトがユーザへ届けようとした HTML の内容を取得し、ユーザ名とパスワードを盗み出す JavaScript をページへ追加した上で、そのページをユーザへ送りつけるといったことができてしまうのです。ユーザが自分のユーザ名とパスワードを入力すると、それは攻撃者と本来の送信先の両方へ送られることになります。
私のサイトでは認証情報がそれほど重要ではないのですが？
サイトへのアクセスにユーザ名とパスワードが必要とされるものの、さほど重要なデータは保存されていないという場合もあるでしょう。たとえば、あるニュースサイトで、ユーザが後で読みたい記事のリストが保存されている一方で、ユーザに関するその他のデータは一切保存されていないとしましょう。多くのユーザはこれを機密性の高い情報だとは考えません。そのサイトやユーザの認証情報を保護しなければいけないと、そのニュースサイトの Web 開発者が動機付けられる可能性も低いでしょう。しかしながら、パスワードの使い回しは大きな問題となっています。ユーザは、ニュースサイトから、ソーシャルネットワーク、Web メール、銀行まで、複数のサイトで同じパスワードを使っている可能性があります。そのため、たとえあなたのサイトでユーザ名やパスワードの漏洩が重大なリスクと見なされない場合でも、同じユーザ名とパスワードを使ってオンラインバンキングへログインしているユーザにとっては大きなリスクとなり得るのです。攻撃者はますます賢くなっており、あるサイトからユーザ名とパスワードの組み合わせを盗み出したら、より「儲かる」サイトで使い回そうと試みます。
私のサイトからこの警告をなくすには？
ログインフォームを HTTPS ページ上に置いてください。
もちろん、そのための一番単純な方法は、Web サイト全体を HTTPS へ移行することです。今すぐそれができない場合は、ログイン専用の HTTPS ページを別途用意してください。そして、ユーザがあなたのサイトへログインする際には、必ずその HTTPS ログインページへ誘導するようにしてください。フォームの送信先が HTTPS になっている場合、あなたのドメインの一部は既に HTTPS を使うよう作られているはずです。
HTTPS を通じてコンテンツを配信するには、認証局 から TLS 証明書 を取得する必要があります。Let’s Encrypt は無料で証明書を発行してくれる認証局です。サーバの設定方法に関しては、Mozilla Wiki や SSL Configuration Generator を参照してください。
ページが自分の管理下にない場合はどうすればいいのでしょうか？
Firefox Developer Edition のユーザが、自分の管理しているサイトを開発するためだけでなく、普段の Web ブラウジングにも Developer Edition を使っている場合があることは承知しています。自分の管理下にないページ上でこの警告を目にした開発者は、それでもいくつかの行動を取ることが可能です。自分のデータを守るために、ロケーションバーに表示されている URL の先頭に「https://」を追加し、安全な接続を通じてログインできるかどうか試してみましょう。また、サイトの管理者に連絡を取って、そのサイトが抱えているプライバシーとセキュリティの脆弱性について注意を呼びかけることもできるでしょう。
盗まれたパスワードが原因で発生した攻撃は実際にありますか？
パスワードの使い回しが大規模な情報漏洩につながった事件は、Dropbox、Sony、LinkedIn、HBGary、Astros、Yahoo! など、数多く報告されています。中間者攻撃によってログインフォームからパスワードが盗み出された被害はまだあまり知られていませんが、JavaScript インジェクションの基本的なテクニックは インターネットサービスプロバイダ や 政府機関 によって幅広く使われています。
ページ上にパスワード入力欄が見当たらない場合も時々この警告が表示されるのはなぜですか？
パスワード入力欄を最初から隠しておき、ユーザが何らかの操作を行うまで表示させないという手法が時々見られますが、そうしたページでもこの警告は表示されます。パスワード入力欄がページ上に表示されるタイミングをどう判別すべきかという バグ が登録されています。
この機能はベータ版やリリース版の Firefox ユーザも使えるようになりますか？
今のところ、この機能は開発者に主眼を置いています。なぜなら、ユーザのパスワードを危険にさらしているサイトを最終的に修正しなければならないのは、他でもない開発者の皆さんだからです。ただ、一般的に言って、私たちは長期的に 安全でない HTTP を廃止する 方向で動いているため、ブラウザが何か安全でないものを検知した場合に明示的な警告を目にする機会が増えていくことは十分に予想されます。たとえば、Firefox の現行版はいずれも、開発者ツールのネットワークモニタにおいて、安全でない HTTP 接続に関してはすべて 赤い斜線付きの南京錠アイコンを表示しています。
Firefox の他のバージョンでこの警告を有効にするには？
Firefox 44 以降のユーザは、チャンネルを問わず、以下の手順でこの機能の有効、無効を切り替えられます。
- Firefox で新しいウィンドウまたはタブを開きます。
- ロケーションバーに
about:configと入力し Enter キーを押します。 - 注意深く使うよう呼びかけるページが表示されますので、その通りにします。
security.insecure_password.ui.enabledという設定の値が、Firefox が安全でないログインページについて警告するかどうかを決定します。値をtrueに切り替えれば、この機能が有効になり、安全でないログインページ上で警告が表示されるようになります。値をfalseに切り替えれば、この機能を無効化できます。
謝辞
この機能の実装とユーザ体験向上を担当してくれた Paolo Amadini、Aislinn Grigas 両氏にこの場を借りて特に感謝の気持ちを表したいと思います。
Firefox 46 サイト互換性情報
昨日、Firefox 45 Beta と Firefox 46 Developer Edition (Aurora) がリリースされました。いつも通りサイト互換性情報を用意していますので、Web 開発者の皆さんは一読されることをお勧めします。
もし一覧に漏れや間違いがあるときは下のコメント欄でお知らせください。
Firefox 45 サイト互換性情報
先週、Firefox 44 Beta と Firefox 45 Developer Edition (Aurora) がリリースされました。いつも通りサイト互換性情報を用意していますので、Web 開発者の皆さんは一読されることをお勧めします。延長サポート版 (ESR) となる Firefox 45 に先立って、44 には様々な変更が入っていますのでご注意ください。
もし一覧に漏れや間違いがあるときは下のコメント欄でお知らせください。
Firefox 44 サイト互換性情報
先々週、Firefox 43 Beta と Firefox 44 Developer Edition (Aurora) がリリースされました。modest でタイムリーに告知しそびれてしまいましたが、いつも通りサイト互換性情報を用意していますので、Web 開発者の皆さんは一読されることをお勧めします。
もし一覧に漏れや間違いがあるときは下のコメント欄でお知らせください。
Firefox 43 サイト互換性情報
Firefox 42 Beta と Firefox 43 Developer Edition (Aurora) がリリースされました。いつも通りサイト互換性情報を用意していますので、Web 開発者の皆さんは一読されることをお勧めします。
これまで Firefox のサイト互換性情報は MDN に投稿してきましたが、今後は Firefox サイト互換性情報 という専用サイトに投稿します。
もし一覧に漏れや間違いがあるときは下のコメント欄でお知らせください。
Firefox 42 サイト互換性情報
Firefox 41 Beta と Firefox 42 Developer Edition (Aurora) がリリースされました。いつも通りサイト互換性情報を投稿していますので、Web 開発者の皆さんは一読されることをお勧めします。もし一覧に漏れや間違いがあるときは下のコメント欄でお知らせください。