teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

悪意のある場合に偏りすぎた内容になっていたので、意図しない場合のコメントを追記

2017/02/22 03:52

投稿

nayuneko
nayuneko

スコア133

answer CHANGED
@@ -1,11 +1,11 @@
1
1
  SPAに限らず、Webアプリケーション全般に言えるのですが、大前提として「フロントエンドから送られてくるデータは信用するな」「バックエンドの処理は絶対」というのがあります。
2
2
 
3
- フロントエンドは様々な環境(OSやブラウザ、通信環境など)から利用される可能性があるので、正常なデータが送られてくる保証はどこにもありません。悪意を持った人が改ざんしたデータやセキュリティホールをつくデータ(SQLインジェクションなど)を送ってくる可能性もあります。
3
+ フロントエンドは様々な環境(OSやWebブラウザ、通信環境など)から利用される可能性があるので、正常なデータが送られてくる保証はどこにもありません。悪意を持った人が改ざんしたデータやセキュリティホールをつくデータ(SQLインジェクションなど)を送ってくる可能性もあります。悪意がなくとも全環境で検証するのは不可能なので、意図しないデータが送られてくる可能性は大いにありえます。
4
4
  逆にバックエンドは環境が一定ですので、同じ入力値だったら同じ結果が返ってくることが期待できます。
5
5
 
6
6
  ### フロントエンド -> バックエンド
7
7
 
8
- フロントエンドから送られてくるデータはユーザが自由に入力でき、極端に言えばバリデーション処理そのものを無効化したり、データが改ざんされて送られてくる可能性も大いにあり得ます。
8
+ フロントエンドから送られてくるデータはユーザが自由に入力でき、極端に言えばバリデーション処理そのものを無効化したり、データが改ざんされて送られてくる可能性も大いにあり得ます。JavaScriptの場合、Webブラウザによって対応状況がまちまちなので加工したデータが意図しないデータになる可能性も捨てきれません。
9
9
  特にデータベースにデータを登録する際にはバックエンド側で**必ず**バリデーション処理を行うので、フロントエンドから送られてくるデータは無加工のデータの方がバリデーション処理やデータ整形がやりやすいと思います。
10
10
 
11
11
  フロントエンドでバリデーション処理を実装するな、という意味ではありません。通常利用する場合は、クライアントサイドでバリデーション処理した方が無駄な通信が発生しませんし、ユーザ的にも優しいです。(せっかく色々入力し終えて送信ボタンを押したら入力エラーって出て来たらイラっとしますよね?)
@@ -17,4 +17,4 @@
17
17
 
18
18
  何かしらのフレームワーク(AngularやReactなど)を使っている場合、フロントエンドでのデータ整形は比較的簡単だと思われますので、フロントエンドで整形します。
19
19
  jQueryで自力でDOM操作する場合は無加工のデータだとしんどいのである程度バックエンドで加工した方がいいと思いますが…
20
- またフロントエンドで展開するのがしんどいデータ(例えばforが何重にも重なっていたりするデータ)ですと端末のスペック依存となり表示速度にも関わりますので、そういう場合はある程度バックエンド加工した方がよいと思います。
20
+ またフロントエンドで展開するのがしんどいデータ(例えばforが何重にも重なっていたりするデータ)や複雑なデータは端末のスペック依存となり表示速度にも関わりますので、そういう場合はある程度バックエンド加工した方がよいと思います。