フロントエンドにおけるセキュリティ対策
今回は、フロントエンドに焦点を絞った、セキュリティ対策の方法を解説していきます。
セキュリティ対策を怠ると、重大な過失に繋がる可能性があります。
なので、この機会にセキュリティについて学びましょう。
HTTPS
まずは、HTTPSについて解説していきます。
これはセキュリティ対策の基本中の基本になります。
普通のHTTP通信だと、以下のような脆弱性があります。
- 盗聴
- なりすまし
- データの改竄
そして、これらを防げぐために開発されたのがHTTPSです。
HTTPSは、TLSという通信プロトコルを使用して、HTTPデータを暗号化して通信する仕組みです。
具体的には以下のような特徴があります。
- 通信データの暗号化
- 通信相手の検証
- 通信データの改竄チェック
この特徴から、先ほど述べたHTTPの弱点をなくすことができます。
HSTS
ついでに、HSTSという仕組みについて解説していきます。
これはHTTP Strict Transport Securityの略で、簡単に言うとクライアントにHTTPS通信を強制させる仕組みになります。
一般的なWebサイトは、HTTPのサイトにアクセスがきたら、HTTPSにリダイレクトされるようになっています。
実際に、このZennもそのような仕組みとなっています。
しかし、最初のhttp通信でのリクエストやレスポンスを悪い人に傍受されてしまった場合、別のコンテンツなどに改竄されたとしても気付けないです。
それを防ぐための仕組みが、このHSTSになります。
仕組みは簡単で、レスポンスヘッダーにstrict-transport-securityという情報を付与するだけです。
これには有効期限が設定されており、その期間中ブラウザにキャッシュされます。
そして、キャッシュされている期間に、また同じサイトにhttp通信しようとした際にhttps通信を強制させることができます。
この仕組みがあることで、先ほど述べた脆弱性を防ぐことができます。
同一オリジンポリシー
次に、同一オリジンポリシーについて解説していきます。
Webブラウザは、Webアプリケーションに「オリジン」という境界を設けて、リソースへのアクセスを制限しています。
オリジンとはスキーム名、ホスト名、ポート番号の組み合わせになります。
この組み合わせが同じことを同一オリジン、異なることをクロスオリジンと呼びます。
そして、このクロスオリジンのリソースへのアクセスを制限する仕組みを「同一オリジンポリシー」と呼びます。
具体的には、クロスオリジンへのJavaScriptを使ったアクセスや、ブラウザのstorageに保存されたデータへのアクセスを制限しています。
だた、逆にこの同一オリジンポリシーがあるせいで、アクセスしたいリソースにアクセスできなくなってしまい不便です。
それを解決する方法も用意されており、それがCORSになります。
CORS
CORSはCross-Origin Recourse Sharingの略になります。
これは、クロスオリジンへのリクエストを可能にする仕組みです。
こちらも仕組みは簡単で、サーバー側でAccsess-Control-Arrow-Originというのを設定しているだけです。
要は、リクエストを受け付けるオリジンをサーバー側で設定しているわけです。
この仕組みがあることで、許可されているオリジンからは同一オリジンポリーを無視してのやりとりが可能になるわけです。
様々なセキュリティ対策
Webアプリケーションの攻撃には受動的攻撃と、能動的攻撃があります。
能動的攻撃は、攻撃者が直接アプリにコードを送るタイプの攻撃です。
例えば、SQLインジェクションなどが挙げられます。
逆に受動的攻撃とは、攻撃者が用意した罠を利用して、Webアプリに訪れたユーザー自身に攻撃用のコードを実行させる手法です。
こちらは例えば、クロスサイトスプリクティングなどがあります。
能動的攻撃はサーバーが直接攻撃されるため、サーバー側で対策する必要があります。
けれど、受動的攻撃にはフロントエンドだけで完結するものがいくつかあります。
なので、今回はその攻撃手法に絞って対策などを解説していきます。
XSS
まずは、XSS(クロスサイトスクリプティング）について解説していきます。
これは簡単に言うと、攻撃用のスクリプトを埋め込む手法になります。
例えば、フォームで入力した値をDOMに追加するようなサイトがあったとします。
その場合、フォームにスクリプトタグで攻撃を記述した場合、そのScriptがDOMに反映されてしまいます。
なので、そのような処理をする場合は、サニタイズをしたり引用符で囲んだりする必要があります。
ただ、XSSの対策は自力でやるのは大変ですし、穴がある可能性もあります。
なので、できればライブラリを使用した方が安全ではあります。
CSRF
次にCSRF(クロスサイトリクエストフォージェリ）について解説していきます。
こちらはサイトを跨いでリクエストを偽造する攻撃手法になります。
例えば、ショッピングサイトにログインした時は、そのログイン情報がクッキーで保存されます。
そして、他の悪いサイトに訪れた時に、そのクッキーを使って勝手に購入などの操作をさせられたりします。
この対策としては、CSRFトークンというのをサーバー側で発行してもらい、それをリクエストに乗せるようにすればOKです。
クリックジャッキング
クリックジャッキングは、よくアダルトサイトなど使用される手法になります。
簡単に言うと、透明なクリックできる要素を他のボタン要素に被せる方法です。
さらに、その透明な要素にiframeを使った攻撃対象のサイトを設定することで、そのサイトに対して何か操作させることができます。
これはユーザーが気をつける以外に、攻撃される側でできる対策もあります。
それは、レスポンスヘッダーに、X-Frame-Optionsを付与するという方法です。
こうすることで、iframeへの埋め込みを制限することができます。
まとめ
今回は、フロントエンドにおけるセキュリティ対策の方法について解説してきました。
セキュリティ周りはとっつきにくいところもありますが、とても大事な部分なのでぜひこの機会に身につけましょう。
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion