こんにちは。開発担当のマットです。
私はオーストラリア生まれ育ちで、18歳の時に日本に移住しました。

もう少ししたら、人生の半分ぐらいは日本になりますので、日本とオーストラリアの似ているところ、異なっているところについて詳しいのかなと思います。
ところで、僕に聞かなくても、AIに聞ける時代になってきましたので、やってみました。

文化の違いを画像生成AIに聞いてみて、合っているかどうかを評価して見たいと思います。

食文化

まずは、食べ物の違いについて聞いてみました。
AI に「Japanese Food」を訪ねたら、何が出力されるでしょう？

Japanese Food

本当にビックリしました。
日本の料理店で出される料理そっくりです。AIの力に驚きますね。
次はオーストラリアの料理を見てみたいです。

Australian Food

この結果も素晴らしい。オーストラリアのカフェで出されそうな画像ばっかりです。

評価： 10/10

リビング

日常生活で一番重要のは、リビングの部屋かもしれませんね。
家族が集まって、一緒にご飯を食べて、テレビを見て、話し合うところです。

日本では、木材の床または畳で、こたつや食卓が主役のイメージですかな…
オーストラリアでは、絨毯で、ソーファーが主役のかな…

Japanese Living Room

思ったより「和」ですね。

Australian Living Room

いろいろとオッシャレなリビングですね。
実際にオーストラリアに絶対ありそうです。

評価： 10/10

スポーツ

スポーツはどうでしょう？
日本なら、野球や相撲のかな？

Japanese Sport

なるほどですね。
「日本のスポーツ」といえば、確かに室内スポーツが多いですね。
空手やバレーボールなど、体育館や武道館で行えるスポーツですね。

オーストラリアなら野外スポーツの方が人気のイメージありますね。
ラグビーやクリケットのかな？

Australian Sport

なんじゃこれ！w

完全にお化けになっていますね。
３脚でサッカーをするイメージは流石にない…
でも、日本のスポーツはイメージ通りですね。

評価： 6/10

自然

最後に、日本とオーストラリアの自然を試してみましょう。

日本なら、山と小川が多く、緑のイメージがあります。

Japanese Nature

まさに、イメージ通りです。
しかも、キャンピング行きたくなるぐらいのリアルさ。

オーストラリアは日本より乾燥して、広くて赤色の平地にユーカリの森または砂漠のイメージです。

Australian Nature

これも、まさにイメージ通りです。
AIは本当に素晴らしいものになってきましたね。

もう少し、砂漠っぽい画像も交じるかと思いましたけど、もしかしたら、オーストラリアの砂漠に住んでいる人が少ないので、ネットに写真データも少なくて、AIが写真が多いところ（比較的に人口が多い、森林がある地方）の写真データに影響されているのでしょう？

でも、どれも本当にオーストラリアにありそうな画像ですね。

評価： 10/10

まとめ

最近、AIは遥かに進化してきています。

文章を与えるだけで、こんなに素晴らしいものを生成できるなんって驚きますね。

今回、私は DALL·E 2 という画像生成AIを使っていました。
ご興味がある方は是非、アカウントを登録してみてください。

はじめに

2022年12月に Chrome でパスキーが利用できるようになりました。
そのことを伝えるネット記事をいくつか読んだときには、パスキーを使った認証の全体像というか仕組みというかそういうものがいまいちピンと来なかったので、もう少し詳しいことを調べつつデモサイトでその動作を体験してみました。

WebAuthn とパスキー

WebAuthn (Web Authentication)

WebAuthn は認証に関するウェブ標準の1つで、いわゆる「パスワード不要の認証」を実現する FIDO2 認証をウェブブラウザ上で実現するためのものです。

従来のIDとパスワードによる認証では、パスワード(あるいはパスワードのハッシュ)という秘密情報をサービスのサーバに預ける必要がありました。そのため漏洩のリスクがあり、漏洩してしまうと同じパスワードを使う別のサービスでも使われてしまうという問題を抱えています。

WebAuthn による認証は次のような特徴を持っています。

• 秘密情報はユーザの手元のデバイスで保持する(漏洩のリスクが非常に低い)
• 認証に使うクレデンシャルはサービスのドメインと紐付けられているのでフィッシングに強い
• 従来型のログインで必要だったID・パスワードの入力や、ワンタイムパスワードの入力などが不要で、利便性が高い

WebAuthn によるユーザ登録の大まかな流れは以下の通りです。

1. ウェブブラウザがサーバにユーザIDを送り、登録を要求する
2. サーバがチャレンジ(検証に利用するランダムな数値列)を生成してブラウザに返す
3. ブラウザは認証器にチャレンジを渡す
4. 認証器は鍵ペアの生成承認を得るために、ユーザに生体認証を求める
5. 生体認証がOKならば、認証器は秘密鍵と公開鍵のペアを生成する
6. 認証器は秘密鍵を使ってチャレンジに署名し、署名付チャレンジ・公開鍵・クレデンシャルID(秘密鍵に紐付いたID)をウェブブラウザに返す
7. ウェブブラウザは署名付チャレンジ・公開鍵・クレデンシャルIDをサーバに送る
8. サーバは公開鍵を使って署名付チャレンジを検証する
9. チャレンジの検証結果とその他のチェック(ドメインなど)がOKならユーザの公開鍵・クレデンシャルIDをユーザIDに対応付けて保存する

WebAuthn による認証の大まかな流れは以下の通りです。

1. ウェブブラウザがサーバにユーザIDを送り、チャレンジを要求する
2. サーバはユーザIDに紐付いたクレデンシャルIDと共にチャレンジをブラウザに返す
3. ブラウザは認証器にチャレンジ・クレデンシャルIDを渡す
4. 認証器は秘密鍵の利用承認を得るために、ユーザに生体認証を求める
5. 生体認証がOKならば、認証器はクレデンシャルIDに対応した秘密鍵を使ってチャレンジに署名してウェブブラウザに返す
6. ウェブブラウザは署名付チャレンジ・クレデンシャルIDをサーバに返す
7. サーバは公開鍵を使って署名付チャレンジを検証する
8. チャレンジの検証結果とその他のチェック(ドメインなど)がOKならログイン成功

重要なのは以下の点です。

• 秘密鍵はサーバに送られず、ローカルの認証器に保存される
• 生体認証の情報はサーバに送られず、ローカルの認証器で秘密鍵を利用するときのユーザ確認として利用される

重要な情報はローカルに有り、サーバ側で保存している情報(公開鍵やクレデンシャルID)が漏れたとしても攻撃には利用できない訳です。

パスキー

WebAuthn では基本的にウェブブラウザと認証器は同じ機器で動いていることが想定されていました(スマートフォン内蔵の指紋認証や PC の USB ポートに接続されたセキュリティキーなど)。スマートフォンで WebAuthn のクレデンシャルを生成し、記録したとします。買い替えや紛失でそのスマートフォンが使えなくなったら登録をやり直さなければなりません。また、異なる端末からログインする場合には同じサービスであってもそれぞれの端末で登録する必要がありました。

パスキーは WebAuthn のそういった課題を解決して使い勝手を向上させるための拡張です。

• ウェブブラウザと認証器が別々の機器であっても動くようにした
• 複数の認証器でクレデンシャルを同期できるようにした

パスキーによる認証を体験する

https://webauthn.io/ というデモサイトでパスキーによる認証を体験してみます。

登録

ユーザ名を入力して”Register”を押します。

今回はスマートフォンを利用するので「別のデバイス」を選びます。

QR コードが表示されるのでスマートフォンで読み込んで FIDO: で始まる URL にアクセスします。

パスキーの作成について確認されるので「続行」します。

スマートフォン側で生体認証を要求されます。(この画面はスクリーンショットを撮れませんでした)

ここで「このパソコンの情報を保持する」にチェックを入れておくと、認証の際に QR コードの表示(PC側)と読み取り(スマートフォン側)のステップをスキップできます。

これで登録完了です。

認証

登録済のユーザ名を入力して”Authenticate”を押します。

先程登録に使ったスマートフォンを選びます。

スマートフォン側で生体認証を要求されます。(この画面はスクリーンショットを撮れませんでした)

ログイン完了。一旦登録が完了してしまえばログインは非常に簡単です。

ここまでの手順は Linux デスクトップで行いました。
Chrome でパスキーが使えるようになったというリリース情報では Linux 版の Chrome が対応しているのかどうかいまいちハッキリしないところがあったのですが、試してみるとあっさり動きました。

この状態で、たとえば別の Windows PC の Chrome で webauthn.io にアクセスしてスマートフォンを認証器として利用して splout01 で同じ手順でログインできます。

パスキーを利用する際に Bluetooth を使って機器同士の近接をチェックしているので、PC とスマートフォンの両方で Bluetooth が有効になっていないといけません。試しに PC とスマートフォンそれぞれで Bluetooth をオフにしたところ、どちらがオフの場合でも途中で認証失敗となりました。(Bluetooth をオンにするように促される)

おわりに

従来よりも安全でパスワードの煩わしさからも解放されるパスキーには大いに期待しています。
これから対応サービスが増えていくのが楽しみです。

ES2022 で Error に cause がオプションとして追加され、再スローするときに元のエラーを渡すことができます。

以下、MDNのドキュメントより。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause

サンプル

fetch でエラーになるサンプルを作りました。

function UserException(message, options) {
	this.message = message;
	this.name = 'UserException';
	this.cause = options.cause;
}

async function test() {
	try {
		const response1 = await fetch('http://example.co.jp/')
			.catch(err => {
				throw new UserException('fetch1回目でエラー', { cause: err });
			});
		const text1 = response1.text();

		const response2 = await fetch('http://example.co.jp/', { method: 'POST', body: text1 })
			.catch(err => {
				throw new UserException('fetch2回目でエラー', { cause: err });
			});
		return response2.json().catch(err => {
			throw new UserException('json()でエラー', { cause: err });
		});
	} catch (err) {
		throw new Error('エラーです', { cause: err } );
	}
}

test().catch(err => {
	console.log(err);
	console.log(err.cause);
})

console.log に出力された内容

fetch2回目でエラーになった場合の Devtools の表示

// Error: エラーです at test (sample:24:9)
// UserException {message: 'fetch2回目でエラー', name: 'UserException', cause: TypeError: Failed to fetch at test (sample:16:27)}

response2.json() で失敗した場合

// UserException {message: 'json()でエラー', name: 'UserException', cause: SyntaxError: Unexpected token 'T', "Text" is not valid JSON}
// SyntaxError: Unexpected token 'T', "Text" is not valid JSON

cause に渡すことで再スローされた先で簡単に元のエラーを受け取ることができました。

エラーの再スロー自体は一般的ですが、ES2022 以前には元のエラーを得る手段が標準で用意されていなかったのが不思議なくらいです。

エラー処理には悩まされることがよくあり、その場で処理することが難しい場合やまとめて処理しても問題ない場合などに使えそうです。

余談ですが、ブラウザによっては、cause とは別に stack が実装されているようですが、こちらは標準化はされなかったようです。stack という文字から Stack trace 的なものが格納されるのでしょうが、サーバーでの処理と違ってクライアント側なのでデバッグ後の消し忘れによる事故が多そうではあります。