[解決済み] JavaScript: クライアントサイドとサーバーサイドの検証
質問
クライアントサイドとサーバーサイドのどちらで検証を行うのが良いですか?
私たちの状況では
- jQueryとMVCです。
- ViewとControllerの間で渡すJSONデータ。
私が行っているバリデーションの多くは、ユーザーがデータを入力する際に検証するものです。
例えば、私は
keypress
イベントを使って、テキストボックスに文字が入らないようにしたり、最大文字数を設定したり、数値が範囲内であることを確認したりします。
クライアントサイドよりもサーバーサイドで検証を行うことにメリットはあるのでしょうか?
皆さん、素晴らしい回答です。私たちが持っているウェブサイトは、パスワードで保護されており、小さなユーザーベース(<50)用です。もし彼らがJavaScriptを実行していないなら、私たちは忍者を送ります。しかし、我々はすべての人のためのサイトを設計していた場合、私は両側で検証を行うことに同意するだろう。
解決方法は?
他の方もおっしゃっているように、両方やったほうがいいです。その理由は以下の通りです。
クライアント側
入力の検証は、まずクライアント側で行いたいものです。 平均的なユーザーに対するより良いフィードバック . 例えば、無効なメールアドレスを入力して次のフィールドに移動した場合、すぐにエラーメッセージを表示することができます。そうすれば、ユーザーはすべてのフィールドを修正することができます 前に フォームを送信します。
サーバー上で検証するだけなら、ユーザーはフォームを送信してエラーメッセージを受け取り、問題を突き止めようとしなければなりません。
(この苦痛は、サーバーがユーザーの元の入力を記入したフォームを再描画することで軽減できますが、クライアントサイドの検証の方がまだ速いです)。
サーバーサイド
サーバーサイドでバリデーションを行いたいのは 悪意のあるユーザーから保護する JavaScriptを回避して危険な入力をサーバーに送信することができます。
UIを信用するのは非常に危険です。
UIを悪用されるだけでなく、UIを全く使っていない、あるいはブラウザすら使っていない可能性があります
. ユーザーが手動でURLを編集したり、独自のJavascriptを実行したり、他のツールでHTTPリクエストをいじったりしたらどうでしょうか?もし、ユーザーが
curl
またはスクリプトから、などでしょうか。
(
これは理論的なことではありません。例えば、私は旅行検索エンジンに携わっていましたが、ユーザーの検索結果を多くの提携航空会社やバス会社などに再送信するため、ユーザーに対して
POST
を、あたかもユーザーが各社の検索フォームに入力し、その結果をすべて集めて並べ替えたかのように表示します。これらの会社のフォームJSが実行されることはなく、返されるHTMLにエラーメッセージが表示されることが重要でした。もちろん、APIがあればいいのですが、これは仕方がないことでした。
)
クライアントが望む手段でHTTPを送信することは許されるべきであり、あなたは正しく応答すべきなのです。クライアントが望む手段でHTTPを送信することは許されるべきであり、あなたは正しく応答すべきです。それは検証を含みます。
サーバーサイドの検証は、次のような場合にも重要です。 互換性 - は、たとえブラウザを使っていても、すべてのユーザーがJavaScriptを有効にしているとは限りません。
追記 - 2016年12月
というバリデーションがあります。 は、サーバーサイドのアプリケーションコードでさえ適切に行うことができず、クライアントサイドのコードではまったく不可能です。 なぜなら、それらはデータベースの現在の状態に依存しているからです。例えば、"そのユーザーネームは誰も登録していないとか、"あなたがコメントしようとしているブログ記事はまだ存在しているとか、"あなたがリクエストした日付と重なる予約はないとか、"あなたのアカウント残高がまだその購入をカバーするのに十分だとか、"。 関連データに依存するデータを確実に検証できるのは、データベースだけです。 デベロッパー いつも失敗する しかし PostgreSQL はいくつかの良い解決策を提供しています。 .
関連
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
fetch ネットワークリクエストラッパーの説明例
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
Vueのクラススタイルの使い方の詳細
-
[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
JavaScriptのStringに関する共通メソッド