新春特別企画

2020年のWeb標準

この記事を読むのに必要な時間:およそ 3 分

Web BundlesによるWebコンテンツのバンドル

Web Bundlesは複数のHTTPリクエストとレスポンスをまとめる仕様です。Signed HTTP Exchangesは単一のHTTPリクエストとレスポンスに対する署名であるため,Webページを構成するたくさんのリソースを考えると,それらをまとめた結果を署名したほうが効率的であるのは想像に難くありません。

このWebページをWeb Bundlesでまとめることを考えてみましょう。このWebページのHTMLはhttps://gihyo.jp/design/column/newyear/2020/web-standards-prospectへのレスポンスに含まれており,そのHTMLから参照するCSS・JavaScript・画像といったサブリソースがブラウザからリクエストされます。これらを表現するために必要なレスポンスヘッダ・ボディ・バイト長などの情報に加え,マジックナンバーを含めたCBOR(Concise Binary Object Representation)のバイナリフォーマットがWeb Bundlesの仕様として定義されています。ただ,まとめるためのツールは既にGo製のwebpackage/go/bundleやNode.js製のwbnとして提供されており,実際に使う場合にフォーマットそのものを気にするケースはそこまで多くないでしょう。理解しておくべきなのは,Webページをバンドルした結果どのように利用していけるかといったユースケースです。

生成されたWeb Bundlesのファイルに署名すれば,それに含まれるWebページのアセットすべてをSigned HTTP Exchangesと同じように論理的なオリジンを保った形で扱えます。これで,いかなる場所でホストされても署名元のコンテンツであることを保証された状態でWebページをパッケージ化できました。

パッケージ化されたWeb Bundlesの.wbnファイルは,そのファイルに含まれるHTTPリクエストとレスポンスでコンテンツネゴシエーションを行うため,ローカル環境でも動作します。そのため,一度ローカル環境にダウンロードしてしまえばネットワークを介さずに動作する他,リソースのロードが発生しないため高速に動作します。

また,ファイルとして扱えるのでBluetoothやUSBメモリなどを介して配布することも可能です。実際にChrome Dev Summit 2019では,このWeb Bundlesのデモンストレーションとして,PROXXSquooshweb.dev.wbnファイルが保存されたオフラインダイナソー※1の形をしたUSBメモリが配られました。このようにWeb Packagingは既存技術が持つ課題を解消するだけでなく,Webページを配布・共有する新しい手段として進化し,Webページの持つ可能性を広げています。

※1
Chromeにおいて,インターネットに接続されていないときの画面に表示される恐竜。アドレスバーにchrome://dinoを入力することでも表示できる。スペースキーを押すとミニゲームが始まり,↑キーと↓キーを使って操作する。

Web Authenticationが実現するパスワード不要な認証

最近のデジタルデバイスには,指紋や顔といった人間の生体を検出するインターフェースを持ったものが数多く登場しています。iPhoneやPixelなどのモバイルデバイスには指紋認証や顔認証が利用されていますし,macOSでもTouch ID(Appleが開発する生体認証機能)を利用できるデバイスがあります。

しかし昨今のWebにおいて,我々が認証する時に使っているのはパスワードや秘密の質問といった,認証において本人性を検証できる要素のうち「知識」のみを要求するものがほとんどです。最近では,アカウント情報に登録されている電話番号やメールアドレスにワンタイムトークンを送信して安全性を高める手法も増えてきました。しかし,パスワードやワンタイムトークンは流出してしまった時に第三者にも使えてしまうという弱点があります。パスワードについては,高性能のマシンによるパスワードクラッキング攻撃によって脆弱なものになりつつありますし,そもそもパスワードを保存しているシステムから流出してしまうリスクに対してユーザーは為す術がありません。またワンタイムトークンについては,精巧に作られたフィッシングサイトから抜き取られて悪用される,という事例も増えています。

Web Authenticationは,前述のような認証器をブラウザから使うためのJavaScriptのインターフェースです。認証器には,前述したようなデバイスに含まれる生体認証だけでなく,接続方法によって分類が違うなど様々な仕様があり,これらはFIDO (Fast IDentity Online) Allianceが標準化を進めているFIDO 2の一部として定義されています。認証器の中には生体認証機能を持たず多要素認証の2要素目として利用されるものもありますが,macOSのTouch IDのように生体認証に加えてユーザーの所有性も含んでいる認証器をWebで利用できれば,認証要素のうち「所有」「生体」を使って認証できることになります。これが実現することによって,パスワードを入力することなく指紋や顔などで認証が可能になり,大きな利便性をもたらしてくれます。

Web Authenticationについても,既に実際のプロダクトへの導入事例がいくつも存在します。GoogleやFacebookでも多要素認証のひとつとして採用されていますし,Yahoo! JAPANではサービスへのログイン機能にWeb Authenticationを導入することで,生体認証を使ったパスワードが不要なログイン体験を実現しています。

認証器については,iPhoneやPixel,MacBookのようにデバイスに生体認証のセンサーが同梱されているケースも多く,意識しないうちに普及が進んでいます。また,ビジネスシーンにおいてもセキュリティ強化の動きに伴い企業としてセキュリティキーを導入する事例も聞くようになりました。Googleでは社員全員にセキュリティキーを配布し,各種ログインにセキュリティキーの使用を義務付けることでフィッシング被害をゼロにしたそうです。みなさんも,認証の選択肢としてWeb Authenticationを検討して,より安全で便利なWebの未来を模索してみてはいかがでしょうか。

関連記事

著者プロフィール

泉水翔吾(せんすいしょうご)

SIerでのプログラマーを経てWeb業界に転職して以来,Web技術に没頭する日々を送っています。Web標準の動向やアーキテクチャの流行を追いかけつつ,技術啓蒙やOSS活動に励んでいます。共著に『超速! Webページ速度改善ガイド』があります。

Twitter:@1000ch
GitHub:1000ch
URL:https://1000ch.net/