フロントエンドエンジニアがこれだけは知っておいて欲しい ~認証について~

はじめに

ユーザー認証があるサービスが多いかと思います。
個人情報に直結するところなので、エンジニアが気を張り巡らせないといけないところですよね。

最近はバックエンドやブラウザ、サーバーの仕組みを知らなくてもサイトが作れちゃったりするので、認証みたいな難しいことはちょっと苦手、、と思っている方もいるかと思います。

でもやっぱり、認証処理ってフロントエンドも関わってくるのでフロントエンドエンジニアは知っておくべきだと思うんです。

なので今回は重要な部分に絞ってお話しできればと思います。

トークンについて

認証に必要なトークン。
多くの場合jwtというものを用いてバックエンドとやり取りを行います。
でも、このjwtという正体がわからないんですね、、

フロントエンドエンジニアが知っておくべきなのは、以下のようなことかなと思います。

• [ヘッダ].[ペイロード].[署名]という情報がBase64でエンコードされている
• Base64というのはただのencodeなので、jwt.ioなどで簡単にdecodeできる
• ヘッダーというところに暗号化方式などの情報が入っている
• ペイロードというところにユーザーの情報が入っている
• 署名が秘密鍵で暗号化されたもので、キーを持たないと復号はできない
• 署名の部分はフロントエンドでは、復号はできないものの、暗号化方式によっては、公開鍵があれば、値の検証はできる場合がある

一番下の、暗号化方式みたいな話は難しいかと思いますが、いちいちサーバーサイドにverifyTokenをしにいかなくても、公開鍵さえフロントエンドに持っていればユーザーの検証が行えるよ
というものですので、できれば知っておいて欲しいなと思います。

通信方法

トークンというものの正体がなんとなくわかれば、あとはどうやってバックエンドに渡すのかという話ですね。
jwtをHTTP通信のリクエストヘッダーに付与するのが一般的かと思います。

これはバックエンド側の要件によるのですが、多くのAPIでは

Authorization: Bearer <token>

のように付与することが多いかと思います。
tokenのところは先程のjwtを指定することが多いですね。

保存場所

いくつか保存場所はあるのですが、セキュリティ要件によって保存できる場所が違ったりします

• Indexed DB、Local Storage
• Session Storage
• On memory
• Cookie

一番おすすめなのはhttponlyなCookieに保存してしまうことです。

httponlyなCookieとは？

Cookieというのはなんとなくわかるので割愛しますが、Cookieに値を格納する際、httponlyというオプションをつけることができます。
名前からはhttp通信で使えるのかなとか思ってしまいますが、これはJavaScriptからのアクセスを禁じるというオプションになります。

JavaScriptからのアクセスを禁じるということは、つまり、サーバーサイドでのみアクセスができるCookieということですね。
クライアントサイドではアクセスできなくなるため、XSS（クロスサイトスクリプティング）による攻撃をされてしまった場合の予防になるということです。

JavaScript側でアクセスできないとなると、クライアントサイドでは認証情報を入手できないの？

SSRしている場合はサーバーサイドで認証を処理して、必要なものをクライアントサイドに渡す。
ということをする必要があります。

Next.jsなどを使っているのであれば、getServerSidePropsなどで処理して、propsとして渡します。

ただし、tokenを直接渡してしまうというのは、結果XSSなどによる抜き取りを許容しているのに近い状態になってしまうため、データフェッチなどはサーバーサイドで行い、必要なデータのみ渡すのが一番良いかなと思います。

まとめ

今回はフロントエンドエンジニアが知っておいて欲しい認証の仕組みみたいなところを記事にしました。

フロントエンドからエンジニアになった人にはこの辺りは結構難しいと思いますが、ぜひ頑張ってチャレンジしてみてください