APIキーをフロントエンドに置くな

さて、今回は APIキー はどこに置くべきか、特に、なぜフロントエンドに置いてはいけないのか という、開発の基本中の基本について深く掘り下げていきたいと思います。 これって、普段僕らが何気なく使ってるサービスの裏側で、大事な情報がどう守られてるのか、その仕組みがわかるすごく面白い話だと思うんですよね。 ええ、そうですね。 デジタル の世界って、突き詰めると 「何を見せるか」と「何を隠すか」、このメリハリが全てと言ってもいいかもしれません。 今日はその基本原則を見ていきましょう。はい、では早速核心から行きたいんですが、資料にあったこの警告、かなりインパクトありますよね。 フロントエンドにキーを置くのは、家の鍵をドアに貼り付けておくのと同じです って。いや、もう本当にその通りなんですよ。 ちょっとドキッとしますよね。 フロントエンド 、つまり ブラウザ で動く コード っていうのは、言ってみれば 「丸見え」の状態 なんです。 誰でもその気になれば中身を覗けてしまう。そこにサービスの合鍵である APIキー があったらどうなるか。それはもう、どうぞ使ってくださいって言ってるようなもんですね。 まさに。悪意のある人が簡単にそれをコピーして 不正利用できてしまう 。これが一番の危険性なわけです。 なるほど。 フロントエンド という言葉が出てきましたが、これは クライアントサイド と サーバーサイド の対比で考えると分かりやすいですか？ おっしゃる通りです。まず クライアントサイド は、いわばユーザーの手元、誰でもアクセスできる 公開された場所 です。 一方で サーバーサイド 。これは開発者だけが管理する、いわば 秘密の部屋 なんです。公開の場所と秘密の部屋、分かりやすいです。 そうです。で、言うまでもなく、大切な鍵はこの 秘密の部屋に厳重に保管するべき だということなんですね。 では具体的にその「秘密の部屋」に保管するって、どうやればいいんでしょうか？何か良い方法はありますか？ はい、あります。例えば Google Apps Script 、通称 GAS なんかには、すごく便利な機能があるんですよ。 スクリプトプロパティ という仕組みなんですが、これのすごいところは、なんと コードの中にすらキーを書かなくて済む んです。 キーの情報を コード から完全に分離させて、裏側の設定として管理できる。これなら万が一 コード が漏れても、キーそのものは安全です。 セキュリティ が一段と高まりますよね。まとめますと、 APIキー は クライアントサイド じゃなく サーバーサイドに保管しましょう と。 管理者の 鍵のかかった部屋にちゃんと保管する 。これがもう鉄則だということですね。ええ、その通りです。 最後にひとつ、あなたが普段使っているアプリやサービスは、あなたの 個人情報 をどこでどうやって管理しているんでしょうか？ そのサービスの裏側にある 公開と隠蔽の設計 に、少しだけ思いを馳せてみるのも面白いかもしれませんよ。