エンジニアのひよこ_level10

【毎日更新!】新卒4年目エンジニアブログです!

【HTML】inputタグのhiddenは使ってはいけない???【917日目】

inputタグのtype="hidden"

<input type="hidden" name="id" value="1">

このように、inputタグには、hiddenというtypeがあります。
formタグでsubmitするときに、画面には表示されないけど、一緒にデータを飛ばすことが出来るものです。

ユーザーには入力させたくないけど、でもデータは送ってほしい。
入力→確認→完了の流れのときに、裏でデータを持ってほしい。

そんなときに使いたいと思います。

使ってはいけない?

でも、セキュリティ的に良くないから、使ってはいけないとも言われています。

それは、inputタグの内容は、ユーザーが簡単に書き換える事ができるからです。
ブラウザの検証機能とかで、HTMLを書き換えることが出来るので、valueの値を書き換えてしまえば良いわけで。

なので、そこからセキュリティの問題が発生したというものがあります。

それ全部のinputに言えるんじゃないか?

でも、改ざんされるのは全部のinputに言えるのではないか。
私もそう思いました。

ところが、事例を見ていくと、また話が変わってきます。

1.作成時は無関係でhiddenに入っていたものが、
   機能追加によって重要な意味を持つようになってしまい、情報漏洩が発生した(ベネッセ)
2.そもそも、人数が多い中で知られていけないもの知られていいものという線引きを全体で事前確認せずに行った結果、
 個人の住所だからいいでしょう。改ざんされても当人にメリットがない。と判断してしまい、
 ピザの配達先が中間者攻撃によって変えられ、嫌がらせに利用された。(ピザハット)

これを見ていくと、hiddenを扱うときに上手く扱えきれない、改ざんされてはいけないものを気にせずフロントに持たせるといった、
何も考えずに使ってしまい、問題が発生している例だということがわかります。

このように、本質は改ざんされて困るのをフロントに置くなと言う話ですが、
その危険性がより増してしまうので、hiddenを使わないルールにした方が、
よりリスクを下げられるよというお話でした。

じゃあどうする?セッションに持たせる

ではどうするか。データを引き継ぎたいとかがhiddenタグに使われる用途で多いと思いますので、
セッションの情報を元に、サーバー側で詳細な情報を持ちましょう。

フロントにデータを持たせない、hiddenタグを使わないで実装する方法があれば、
その方法を優先しましょう。

とはいえ、必要なときも。

とはいえ、フロントに持たせたいときもあります。

例えば、csrfトークンはユーザー側に正しいデータをもう一度送信させることで、
クロスサイトリクエストフォージェリを防ぐというものです。

これは、ユーザー側にデータをもたせて送信させる必要があるので、hiddenタグに持たせる必要があります。

このように、『hiddenタグは悪だ!』というのではないのを頭に入れつつ、
リスク回避のためのルールとして採用するのは、1つの選択肢だと覚えておくと良さそうですφ(・

参考

https://www.ipa.go.jp/security/awareness/vendor/programmingv1/pdf/a01_05.pdf