Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

ポートフォリオのアプリを公開したらイタズラされまくった話

はじめに

私はこれまで開発未経験からサーバーサイドエンジニア転職を目指しており、
Laravel等の技術を使用して「朝活SNS」アプリを個人開発し、
AWSのEC2上で、一般公開していました。

アプリの紹介記事をQiitaにも投稿したところ、
AWS, Docker, CircleCI, Laravelでポートフォリオを作成してみた【参考リンク付き】
有難いことに300LGTMもいただくことができ、多くの方に
実際にポートフォリオアプリを触ってもらえたものの、結構いろんなイタズラもされしまっておりました。^^;

実装の詰めが甘かったところもあり、その脆弱性を突かれたイタズラ等もあったので、
アプリはデプロイして終わりなのではなく、運用フェーズに入ってからも気を抜いてはいけないのだと実感しましたね。。

こちらの記事では、そんなイタズラの数々や、それに対策できた部分について簡単にご紹介できればと思います。

1.下ネタ投稿をされまくる

これは予想はしていました・・笑
投稿機能のあるアプリなら、ありがちなイタズラかもしれませんね。
ちなみに次のような下ネタ投稿をされていました↓

スクリーンショット 2020-11-24 23.54.42.png

スクリーンショット 2020-11-25 23.33.27.png

スクリーンショット 2020-11-25 23.35.18.png

ザ・下ネタの帝王!ばりの単語が連呼されていますが、1日平均3回くらいは書き込まれていたので、毎日ちょいちょいパトロールを実施。。
書き込みを見つけては、トイレ掃除をするような心境でDBから投稿を削除していました。(´・_・`)笑

LaravelでNGワード機能を実装してみようと試みたものの、不具合があったため現在この辺は検討中です。

2.クロスサイトスクリプティングを狙われる(XSS)

Webアプリ等の脆弱性を狙って、悪意のあるスクリプトを実行させたりする攻撃としても有名なXSS。
今回はそれに近いような投稿も見られました。

スクリーンショット 2020-11-26 17.14.23.png

<script>alert("Test")</script>

思いっきりJavaScriptらしきメッセージが投稿されていますね。^^;
コードの内容としては、「Test」という文字列をダイアログボックスに表示するだけのものですが、
投稿したメッセージの「<」や「>」を無害化する処理を実装済みであるため
特に何も実行はされませんでした。

3.ゲストログイン機能のゲストユーザー情報を書き換えられる

今回作ったアプリには、「かんたんログイン」ボタンを押すと、予め用意されている
「ゲストユーザー」としてログインできるような機能があります。
(ユーザー名、メールアドレス等を入力しなくても簡単にログインできる)

イメージはこちらです↓

guestlogin_image.gif

この機能の使用上、ゲストユーザーのユーザー名メールアドレスを変更されると、ゲストログイン機能が動かなくなってしまいます。

そこで、ユーザープロフィール編集機能では、ゲストユーザーでログインしている時だけ
ユーザー名メールアドレスを変更できないように工夫しました。

スクリーンショット 2021-01-13 20.49.38.png

仕組みとしては、ゲストユーザーでログインしている時だけ、Viewの
< input >タグにreadonly属性が付与されたものが表示され、テキストボックスが灰色になって入力できなくなるようにしていました。

しかし、この対策だけでは結構マズくて、いとも簡単にゲストユーザーのユーザー名やメールアドレスを書き換えられてしまいました。
ある日ゲストログインしたら、ユーザー名が突然「にゃ〜ん」というものに変えられていて、めちゃめちゃ焦りました!!!^^;  笑

おそらくChrome等のデベロッパーツールを使ってHTMLを改ざんされてしまったのだと考えられます。
スクリーンショット 2021-01-13 20.55.16.png

デベロッパーツールで< input >タグのreadonly="readonly"を削除すると、ただのテキストボックスになり
ユーザー名やメールアドレスが普通に変更できるようになってしまいます↓

スクリーンショット 2021-01-13 20.58.02.png

デベロッパーツールって万能ですね・・
この時フロントエンド側だけでの対策がいかにマズイのかを学びました^^;
したがって、取り急ぎバックエンド側でも、ゲストユーザーのメールアドレス等を変更できないようにセキュリティ対策の実装をしたところ、
今回の問題は無事に解決しました。
その時の対策方法は、こちらの記事にまとめています。
 Laravel6系でゲストログイン機能(かんたんログイン)の実装

最後に

今回はざっと、公開したポートフォリオアプリへのイタズラをまとめてみましたが、
実務未経験ながらこのような体験ができて学びも多かったです。
セキュリティ面の実装の甘さに気付けたり、NGワード機能を追加してみようかな?と新たなアイディアが浮かんだり等々。。
今後は運用フェーズを意識して、セキュリティ面を強化した実装等をより心がけていきたく思います!
(まだ入社して日が浅く、実務では今は実装やセキュリティ分野は担当していませんのでご安心ださい^^;)

nasuB7373
2020年12月末にサーバーサイドエンジニアデビューしました。 これからどんどん学んだことをアウトプットしていきたく思います🍆
https://github.com/ngsw877
arsagapartners
最高品質を最速で。 業務未経験でも最速最高の成長を!
https://www.arsaga.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away