バックエンドに実装するか、フロントエンドに実装するか

ウェブシステムというものは、大きく分けて2つのパーツに分けることができます。

それがこの、バックエンドとフロントエンドです。

バックエンドがサーバー側のことで、
フロントエンドが、ユーザー側の端末のブラウザ上で動くような部分のことですね。


ウェブシステムに対して何か機能を作るときには、このバックエンドとフロントエンドのどちらに処理を記述するのかを考えて、プログラムを書いていく必要があります。

この記事では、どういった機能をバックエンドに実装し、どういった機能をフロントエンドに実装するべきなのかということについて考えていきましょう。

データベースからのデータ取得

当然、データベースはサーバー側に存在するものですから、データ取得処理自体はサーバー側に実装する必要があります。

サーバーサイドプログラムからSQLを実行し、データベースの値を取得するのが一般的です。
そうやって取得した値をプログラム内で加工し、画面側に送信します。

入力チェック

入力チェックとは、画面上のフォーム等に入力された値を登録しようとしたときに、その値が正しい値であるかどうかをチェックする機能です。

例えば、必ず値を入力しなければいけないテキストボックスが空白のままになっていたり、電話番号の中にアルファベットが含まれていた場合、それらの値をそのままデータベースに登録するのではなく、間違った値が入力されていることをユーザに知らせる必要があります。

そういった時に、プログラム側で正しい値が入力されているかどうかのチェック処理を行います。

ではこのチェック処理は、フロントエンドとバックエンドのどちらに記述するべきなのでしょうか。



理想的な答えは、両方です。


なぜ両方に処理を記述するべきなのでしょうか。

フロントエンドに入力チェックを記述する理由

フロントエンド処理の特徴として、「ユーザがすぐに結果を参照できる」というものがあります。

サーバーとの通信には時間がかかるものですから、もしすべての処理をサーバー側に記述してしまったとしたら、ユーザはあらゆる動作を行うたびに、サーバー側との通信時間だけ待たされることになります。

少し入力をするたびにサーバー側との通信が発生し、毎回ユーザが待たなければいけないというのは、現実的ではない場合も多いでしょう。

フロントエンドに入力チェックを記述しておくことによって、サーバー側との通信をいちいち行うことなく、素早くユーザ側にエラーメッセージを表示することができます。

フロントエンドに入力チェック処理を記述することによって、ユーザビリティーを向上することができるのです。

バックエンドに入力チェックを記述する理由

フロントエンドに入力チェックを記述することによってユーザビリティーが向上する事はご説明しました。


ただ、これだけでは不十分なことがあります。

それはセキュリティーです。


実は、フロントエンドのプログラムと言うのは、いくらでも改ざんができてしまうものなのです。

少しプログラミングをやった人であれば、ウェブブラウザを使ってフロントエンドプログラムを改ざんする事は、そんなに難しいことではありません。

そのため、正常な値が入力されているのかというチェックは、サーバー側にも記述しておかないと、セキュリティー的に不十分なのです。

なぜなら、悪意を持ったユーザは、フロントエンドに記述された入力チェックはいくらでも変更することができるからです。


そのため、理想としては、フロントエンドとバックエンドの両方に入力チェックを記述する必要があります。

もし、どうしてもそういったことができない場合は、どちらかと言えばこのバックエンドの方が重要です。

なぜなら、このバックエンド側の入力チェックがないと、セキュリティー的に問題がある場合もあるからです。

例えば、もしデータベース上で100文字までしか想定していないような文字列に対して、200文字の文字列を保存しようとしてしまった場合、データベースからのシステム的なエラーがうまくハンドリングされるようになっていなければ、システムエラーの文言が、そのまま画面上に表示されてしまうようなことにもなりえます。

このようなシステム的な情報は、攻撃者に情報を与えてしまうことにもなるのです。


また、セキュリティだけでなく、システム障害を及ぼす可能性もありますね。

もちろん、フロント側の入力チェックがしっかり実装されていれば、悪意のないユーザーからのリクエストによって問題が生じることはほとんどないはずですが、それでもデータベース内に想定外の値を登録できるということは、予期せぬ障害を生む要因になりえます。


ですから、入力チェックを実装する際は、少なくともこのバックエンド側の入力チェックは忘れないようにしましょう。

画面の動きを伴う処理

例えば、画面上にメッセージをポップアップ表示したい場合や、画面上に表示された要素を動かしたい場合は、どこにプログラムを記述すれば良いのでしょうか。

基本的には、こういった画面上での動きを実装するためには、フロントエンド側でJavaScriptのプログラムを記述します。

CSSなどを使い、JavaScriptなしでアニメーションを表現する方法もありますが、どういった方法を取るにしても、フロントエンド側で実装を行うことには変わりありません。

ウェブブラウザ上で処理を行えるプログラムは、基本的にはJavaScriptしかありませんから、ブラウザ上での描画を用いたアニメーション等を作成したい際は、フロントエンド側でJavaScriptを記述する必要があります。

サニタイジング

サニタイジングとは、「消毒」を意味する英語ですが、
システム開発においては、クロスサイトスクリプティングやSQLインジェクションと呼ばれるような攻撃に対するセキュリティー対策のことです。

クロスサイトスクリプティング(XSS)に関してはこちらの過去記事をご参照下さい
クロスサイトスクリプティング(XSS)とは【仕組みと対策】>>


具体的には、データベースに値を登録する際に、その値に含まれる特殊な文字を置換するような処理です。

なぜ置換を行うのかと言えば、データベースに登録するための値に悪意を持ったプログラムが含まれていることがあるからです。

これは、悪意を持ったユーザが、画面上のフォーム等に対してプログラムを記述し、サーバー側に送信することによって発生します。

この時、適切にサニタイジングが行われていないと、悪意を持ったプログラムが動作できる状態になってしまいます。


そういった背景から、このサニタイジングという処理はウェブサービスにおいて重要な処理なのですが、これはフロントエンドとバックエンドのどちらに実装するべきなのでしょうか。


このサニタイジングはセキュリティーに関連する処理ですから、もちろん、バックエンドに実装する必要があります。

先ほども少し触れたように、フロントエンドのプログラムはいくらでも改ざんすることができてしまいますから、セキュリティー対策をフロントエンドで行う事にはあまり意味がありません。


基本的にはセキュリティー対策は、サーバーサイドでしっかりと行っておく必要があります。

外部APIへのHTTPリクエストの連携

ウェブサービスのすべての部分を自力で作るのではなく、外部のWeb APIを叩くことによって、便利な機能を使わせてもらいたい場合もあるでしょう。

そういった場合は、バックエンドとフロントエンドのどちらに連携処理を実装すべきなのでしょうか。


基本的には、APIを公開している側の仕様に従うことになります。

連携先のサービスがフロントエンドJavaScriptからの連携ように作られているのであれば、フロントエンド側に連携処理を記述することになりますし、

バックエンドからの連携が求められていれば、サーバー側に処理を記述することになります。


しかし、単純にHTTPリクエストを送ることによって連携が実現されるようなAPIであれば、フロントエンドJavaScriptからでも、サーバーサイドプログラムからでも連携を行えるような気がします。

確かに、ひと昔前であれば、フロントエンドからでも、HTTPリクエストを用いた外部APIとの連携を、問題なく実現できることも多かったと思います。

ただ、ここで気を付けてほしいのはウェブブラウザ側のクロスオリジンに対する扱いです。

どういうことかというと、ウェブブラウザが、複数のサーバーと同時にやり取りをすることを制限するような仕様になっていることが多いのです。

現在でも、古いInternet Explorerなどを利用している方であれば、こういった制約を受けないこともあるのですが、基本的に現在のブラウザは、一つのブラウザタブの中に表示されているページにおいて、複数のサーバーとの通信を行うことは、セキュリティ上の理由から制限しています。

したがって、外部サービスに対してHTTPリクエストを用いてフロントエンドJavaScript側から通信を行おうとしても、ウェブブラウザ側で制限がかかってしまう場合があるのです。


ですから、もしHTTPの形式でリクエストを受け付けるようなAPIを公開しているサービス側から特に指定がない場合は、サーバーサイドからAPIに連携する方が無難かもしれません。

バックエンドとフロントエンドに適切な処理を記述して、安全で使いやすいウェブサービスを作ろう！

いかがでしたでしょうか。

ウェブサービスの開発において、どういった処理をフロントエンドに記述し、どういった処理をバックエンドに記述するべきなのかということを、大まかに理解していただけたでしょうか。

ウェブサービスはとても便利なものですが、開発者側がなんとなく作ってしまうと、そのウェブサービスは攻撃者にとって格好の餌食になってしまうこともあり得ます。

そのため、サーバー側で適切なセキュリティー対策を行っておく必要があります。

ただ、それだけではなく、ユーザが使いやすいことも非常に重要なことですから、フロントエンドに処理を記述して、素晴らしいUIを構築していく必要もあります。


ぜひ、バックエンドとフロントエンドに適切な処理を記述することによって、使いやすく、安全なウェブサービスを構築していってください。

この記事が、あなたがウェブシステムを勉強するための助けになれば幸いです。

最後まで読んでくださり、ありがとうございました。