# はじめに こんばんは、エンジニアのおうちでまったり。 政商務省ラジオのニューブルーです。 この番組は、エンジニアだからお伝えできることや、 響きになったことなど、楽しくITを学べるチャンネルです。 聞きに来てくださってありがとうございます。 12月、一人アドベントカレンダーをやっております。 今日のテーマは、 デイリートークテーマをやろうかと思ったんですけど、 ちょっとXのタイムラインを見ていて、 面白い企画をやられている方がいらっしゃったので、 皆さん、Voicy聴かれている方はご存知だと思われる、 Voicyパーソナリティのパパ丸山さんが、 24時間連続、24人のパーソナリティさんかな? ちょっと詳細見てないのであれなんですが、 24時間ぶっ続けでリレーするという形で、 24時間まるまる、これ確か生放送されるんですかね? という感じの、24時間Voicyという企画を立ち上げられております。 これは年末、12月30日の12時、 お昼の12時ですかね?からスタートして、 次の日の12月31日の12時まで、 24時間24番組が行われるそうです。 結構本当にすごいですよね。 こういう企画能力というのか、企画魂というのか、 すごい尊敬する方なんですが、 今回ちょっと気になったのが、 そのXのポストに、今回の企画24項を スタンプラリーという形で、 ウェブサイトを作って、盛り上げていこう みたいな企画をされていて、 そういうウェブサイトを作られるということで、 そういうのを見てしまうと、 私のエンジニア魂というか、 あらさかし魂といいますか、 というのに火がついて、ちょっと見させていただいて、 ちょっと気になる点が何点かあったので、 今回のいろいろ聞いたというか、 ノートとか見させていただいたら、 Viveコーディングを使って、いろいろプロンプトを 投げられて作られているということなので、 その辺のエンジニアじゃない方が、 そのViveコーディングを使って作ると、 やっぱりこうなるんだなというお話も ちょっと混ぜながら、私が何をしたのかという、 簡単に言うとウェブサービスの ハックなんですけど、 ハックって、悪い言い方で使うと、 よくない行為だと思うんですけど、 結構、このウェブサービスをどうやって使うかとか、 抜け道はないかですとか、 脆弱性を突き詰める、突き止める、 突き止めるか、ちょっと悪い言葉があるですが、 そういうのを探したりとか、脆弱性については、 ネット上に公開されているものに対して、 脆弱性診断的なことをやるのはやめましょう。 そういうのを楽し勝手な行動でやってはいけない、 ご迷惑かかるので、 そこまではやってないですけど、 ちょっと触ってみたというのを、 お話していきたいと思います。 # Webサービスをエンジニア視点から見ると はい、ということで、このチャプターにそのスタンプラリー、今はちょっとバージョンが上がって、スタンプラリーからビンゴカードになったようですが、 そのサイトのURLはこのチャプターに貼っておこうかなと思うんですが、私のこのチャンネルを最初の方から聞いていただけている方はどうやって、私が何をやったのかはちょっと想像つくかもしれないですけど、 ブラウザのF12キーですね、パソコンにはなってしまうので、このチャプターのリンクを実際にパソコンのブラウザで開いて、今回は私はChromeでお話しさせていただこうと思いますが、 他のEdgeとかFirefoxとか、他でもほぼほぼ一緒なので、ちょっと見て聞いていただければと思います。一緒にやりながらですけど、あまり触らない方がいいのかもしれないですね。 今回、F12キー、デベロッパーツール、開発者ツールとかと呼ばれますが、これを使うことによって、ローカル上のものは言ったら何でもできます。 ちょっとスキルというか知識のある方だったら、多分Web系のエンジニアだったら、このぐらいのサイトだったらすぐにどうやったらハックできるのか。 今回はスタンプラリーなので、24個のスタンプがあります。それをすべてを、今回は合言葉をチェックされていて、合言葉があったらその1時間の放送を1個ずつスタンプが押されるっていう仕様みたいなんですけど、 それを合言葉を知らなくてもスタンプを全部押すっていうことがエンジニアならできるので、その辺りをお話ししていこうかなと思います。 最初にちょっと言った通り、今バージョンが2になってるんですかね。ちょっとバージョン管理がわからないですけど、ビンゴカートになってます。 一番最初、初期に公開されてたときは単純なスタンプラリーになってました。そのときにF12を見たらすぐ押したくなるので、どんなサイトでも押したくなるんですけど、 F12キー大好きなので、F12キーを押していただくと、ソースがJavaScriptで作られてたので、ソースが丸見え。ソースJavaScriptはローカルで動くものなので、ソースは丸見えなのが当たり前なんですよね。 そのソースを見てると、先頭のほうに合言葉らしきものが24個並んでました。もうカンニングというか、その言葉を順番に合言葉入力してくださいのところに打っていけば、合ってますよという形で、全部スタンプがどんどん押されていくというような形になってました。 これは今、バージョン2になって、ビンゴカードになったときに改善されて、どうやら一番最初はバックエンドなどを使わずに、バックエンドのサーバーとか借りずに、もう本当にシンプルな画面で全てローカルで動かすという形にされてたので、今、今度のビンゴカードになるとバックエンドもどうやら導入されたようで、ガスで作られてるようなんですけど、そちらで合言葉のチェックはする形になったので、 その合言葉がベタ書きされているという問題は解消されて、合言葉はサーバー上、ガスのサーバー上、バックエンドのサーバー上にいるので、こちらからは皆さんがアクセスしてみることはできないという形になっております。 ただ、まだちょっと抜け道はあるので、それももうちょっとアーケードに話しますが、なので、まず一番最初に言っておきたいというか、今回ローカルストレージを使うという、ローカルで全てを管理されるということで、そういうバイブコーディングとかAIにローカルで全部したいで、データとかはローカルストレージ。 ローカルストレージっていう、そのまま名前の通りなんですけど、ローカルにデータベースを持たせるような形のことがブラウザ上できるんですけど、それを使ってそのスタンプの状態を管理するみたいな形で、今回バイブコーディングをされたと思うんですけど、 間違ってると言うと語弊があるんですが、ローカルで何かを全てをする、ローカルで処理をさせるっていうことは、もう管理をそのウェブサービスにアクセスしている、もうあなた自身に全てあげますって言ってるのと同じになるんですよね。 なので、バイブコーディングを使って、一番最初にローカルで全部やります、ローカルストレージを使いますみたいなプロンプトにしてしまうと、もうその時点で脆弱性ではないんですけど、もうハックされるというか、好きに使われちゃうっていう状態がもう決まってしまいます。 なので、ローカルで動くものを作るっていうのがダメというわけではなくて、この辺りはトレードオフというか、何を取って何をダメにするのかみたいな、その辺の考え方になっていくので、その辺りは良し悪しがあるので、その辺りは考えてバイブコーディングAIのほうにプロンプトを投げればいいと思うんですけど。 なので、その辺りをローカルだから、そういうセキュリティ上というか、見てる人に全部情報を与えてるっていう認識をITエンジニア、Webサービスを作ってるエンジニアだったら、もうその認識は皆さん持たれているので、一番最初にもし、先ほど言ったようにトレードオフの関係なので絶対ではないかもしれないですけど、 今回のように隠したい情報、合言葉の情報とか隠したい場合は、全てローカルでやるってことはまずないのかなと。 ローカルストレージにスタンプの情報とか、後で話すんですけど、スタンプの情報を保存するっていうのもしないかなっていうのが正直なところですね。 なので、全て情報はバックグラウンドのほうに。 なので、今回とかそのほうに持たせる形になるのかなと思ってます。 ユーザー情報だけをローカルストレージに保存させて、クッキーでもいいんですけどね。 そこにユーザー情報のハッシュ値を保存しておいて、そのハッシュ値とバックエンドのハッシュ値を付き合わせて、見てる人があなたはこんだけ進捗スタンプをされてますよって情報を返すみたいな。 そんな感じにするのがいいのかなとは思います。 今ここから第2弾のウェブサイト、今のBingoカードを見てるときに何をしたのかっていうと、これも同じでF12キーを押します。 F12キーを押すと全ての情報が見れますって言ったんですけど、まず一番最初に表示して、いきなりソースを見れば、 エンジニアの方だったらソースを見ればどこにどんなロジックがあって、どこで合言葉のチェックをしていて、その結果どうなるのかみたいなのは、 見て追っかけていけば、ソースを順番に追っていけば分かります。 その状態で、私が一番最初にやったのは、それでまず合言葉をチェックしているところを特定します。 特定すると、そこのJavaScriptのソースって、これ実はF12の開発者ツールってデバッグ機能が付いているんですよね。 デバッグ機能って、ブレイクポイントっていう機能があります。 この行で止めたい、ブレイクしたいみたいなポイントにチェックを入れることができる。 チェックとかマークが入れれるんですけど、それを入れた状態で画面の操作をします。 すると、そのチェックを入れたところで、まだ処理が来たら一時停止します。 その状態で、やってきた値、リクエスト、レスポンス、すべて操作、改ざんというか、 改ざんって言ったら言葉が大げさかもしれないですけど、変更することができます。 今回、ガスにチェックいって、ガスに合言葉を投げて、合ってるか合ってないかっていうのを返すっていうロジックになっているようでして、 なので、間違ってますよって返ってきてます。普通にやると。 でも、その間違ってますっていうのをデバッグで止めておいてる間に、合ってますよっていうふうに無理やり書き換えることができます。 これもデータ、合ってます、間違ってますっていう情報をローカルに返してるがために起きる抜け道というか形になるんですけど、 これによってデバッグで止めてる最中に間違ってますよ、合ってますよに書き換えて、そこからデバッグモードをまた再開。 次の処理進めていきますよって再開をすると、あら不思議。すべてが合ってます。 間違ってるのに合ってますで進んでいくので、スタンプがどんどん押されていくっていうようなイメージになります。 これ1個、とりあえず通過させるじゃないですか。そうすると、スタンプを押すロジックまでたどり着きます。 そうすると、どういう形でスタンプが押されたのかっていう情報と、あとは今回ローカルストレージを使ってるようなので、 ローカルストレージもこれ実は開発者ツールで見れるんですけど、開発者ツールを立ち上げてる状態で、アプリケーションタブですね。 ここを開いてもらうと左にたくさんのストレージが、ローカルストレージからクッキーなり、有名なのでいうとその2つかもしれないですけど、 そのメニューが表示されます。それを開いていくと、実際にどんな値がローカルストレージだったらローカルストレージの中に保存されているのかっていう情報が見れて、 見れるだけじゃなくて、これ実は中身も変更できます。一番最初に言ったんですけど、ローカルの情報なので、ローカルの持ち主はこれを聞きのあなた自身なので、 あなたが自由に変更できますという形で、スタンプが1個押されてるっていう状態におそらく今なってると思います。 それを1個だったらちょっとわからないかもしれないですけど、2個、3個押していくと、そのスタンプが押されている法則がわかってくると思います。 ちょっと時間があれなので、チャプター次に行きたいと思います。 # 続き というような感じで、開発者ツールで動くと何でもできるようになっていきます。 この状態で1個、2個、3個というふうにスタンプをどんどん押していくと、 ローカルストレージの中のスタンプの状態を保持している値というか、 その部分がどういうルールで作られているのかというのが分かるので、 そうなると24個全てを押された状態にするにはどうすればいいのかというのは、 今度は謎などじゃないかもしれないですけど、そういう形になっていくので、 それを解いた形の値に編集をすることによって、 編集しただけじゃすぐ出てこないんですけど、編集して画面をもう一回読み込み直し、 F5とかで読み込み直しをすると、またあら不思議ですよね。 いきなり全部のスタンプが押された状態でクリアした状態が、 まだ放送もされていないのに出来上がるというような感じになります。 ということで、そんなことをWeb系のITエンジニアだったらすぐできちゃうんですけど、 これ結構多分、AIにこのWebサイトを解析してみたいなのを頼んだら、 それでも多分できちゃうんだと思うんですけど、 そういう結構危険ではないですけど、危険は危険な部分もあったりなので、 あんまり運用ちゃんとしたWebサービスとしては使えないというか、 やっぱり日頃も言ってますけど、バイブコーディングって便利は便利なんですけど、 やっぱり使う人の指示によっては、こういう状態が出来上がってしまうので、 すべてローカルで作るWebサービスなんていうのは、 本物のというか、お金が絡んできたものとかのWebサービスでは絶対使わないですし、 そういうのを気にするというか、最初に分かってるからプロンプトに入れれるみたいな感じになっていくので、 簡単に作れるバイブコーディングを使うことによって、 誰にでも簡単に作れるけども、やっぱりどういう対応をしなきゃいけないのかっていうのを知っておかないといけないので、 バイブコーディングが私があまり好きじゃない理由の一つではあるんですけど、 そういう話を今日は良い題材だったので、パパもマリオさんには頑張っていったら光栄ありますね。 ぜひこの企画成功してほしいです。 有名な方なので、底辺パーソナリティの私が言っても何も変わらないと思いますが、 ぜひ楽しい企画を、私も楽しみに待っておりますので、今回はありがとうございましたということで、 最後になってしまって申し訳ないですけど、今回この企画をどうこうしたいというつもりは全然なくて、 先ほども言った通り、バイブコーディングでエンジニアじゃない人が作るとこうなるんだなっていうお話をしたかったのと、 さらに今後いろんなところでバイブコーディングすごいすごいって盛り上がっていくと思うので、 そのあたりでエンジニアじゃない方が気をつけるべきものを、 言葉を選ばずに言うと、今回の件を使わせていただいていい説明する機会だなと思ったので、 勝手に使わせてもらって、本当に申し訳ないというかありがとうございますという気持ちで。 という感じで、今日の放送はつらつらとお話しさせていただきましたが、 いろんなことができるんだよという、ローカルで動かすということをしてしまうと、 バイブコーディングを使っている人には何でもかんでもできる形になるので、 そのあたりは注意してバイブコーディングを使う必要があるのかなという一例をお話しさせていただきました。 先ほど最初にも言ったんですけど、 これを面白がって脆弱性をついたような攻撃をしたりするのは絶対やめていただきたいので、 脆弱性を助長する放送ではないというのも、今回最後にはなってしまったんですが、 重ねて皆さんにお願いさせていただきたいと思っております。 最後まで聞いていただきありがとうございました。 # おわりに はい、最後までお聞きいただきありがとうございました。 当チャンネルでは、今更聞かないIT用語シリーズとして、 身近でよく聞くIT用語だけど、何それってなるような用語を 誰にでも分かる形でお話しさせていただいております。 またプレミアム放送もやっております。 プレミアム放送では公開できないプライベートなお話ですとか、 一般放送よりも先に情報公開するなど、 プレミアムの方だけ限定のお話をさせていただいております。 ぜひ興味のある方は登録いただければと思います。 その他、各種SNSでも発信活動を行っておりますので、 フォローいただければと思います。 はい、ということで今回は、ちょっといい感じの企画をいただいて、 企画いただいてって変ですね、記録を見つけて、 利用させていただいたというか、 ちょっと注意喚起の放送もさせていただきました。 本当に、また最後で重ね重ねにはなりますが、 パパマーリアマさん、本当に利用させていただいて、 語弊があるな。 本当に、Xの方でもいろいろコメントいただいてありがとうございました。 はい、ということで、 それでは今日も適当にまったりお過ごしください。 ありがとうございました。