目次

• フロントエンド（クライアントサイド）でできるセキュリティ対策

• サーバーサイドでできるセキュリティ対策

注意
この記事・勉強会では、インフラ周りで解決できる事象等については言及しません。

1. クライアントサイドでできるセキュリティ対策について

はじめに

Webアプリケーションにおいて、セキュリティは非常に重要な要素の一つであります。特に、フロントエンド（クライアントサイド）でできるXSSなどのセキュリティ対策は、重要かつ必須のものとなっています。ここでは、フロントエンドでできるXSSなどのセキュリティ対策について、より詳しく解説していきます。

クロスサイトスクリプティング（XSS）に対する対策

クロスサイトスクリプティング（XSS）は、攻撃者がWebサイト上に悪意のあるスクリプトを埋め込み、ユーザーのブラウザ上で実行させる攻撃です。これにより、機密情報が盗まれたり、不正な操作が行われたりする可能性があります。フロントエンド（クライアントサイド）でできるXSSに対する対策は、以下のようになります。

1. エスケープ処理の実施： ユーザーからの入力値をそのまま出力しないように、HTMLエンコードなどのエスケープ処理を実施することが大切です。エスケープ処理をすることで、不正なスクリプトを埋め込まれても、ブラウザがHTMLタグと認識し、そのまま出力することができます。

2. クッキーのsecure属性に設定する： secure属性を設定することで、クッキー情報が暗号化されて送信されるため、HTTP通信を傍受されることで情報が漏れることを防止できます。暗号化されたクッキー情報を傍受されても、復号するための鍵が必要であり、攻撃者にとって情報を盗むことが困難になります。

3. Content Security Policy（CSP）を実施する： CSPを実施することで、Webサイト内で許可されたコンテンツしかブラウザ上で実行されなくなります。これにより、攻撃者からの不正なスクリプトの実行を防止することができます。

エスケープ処理の実施

エスケープ処理は、ユーザーからの入力値をそのまま出力しないように、HTMLエンコードなどのエスケープ処理を実施することで、XSS攻撃を防止することができます。JavaScriptでエスケープ処理を実施するサンプルコードを以下に示します。

function escapeHTML(str) {
  return str.replace(/[&'`"<>]/g, function(match) {
    return {
      '&': '&amp;',
      "'": '&#x27;',
      '`': '&#x60;',
      '"': '&quot;',
      '<': '&lt;',
      '>': '&gt;',
    }[match];
  });
}

上記のコードでは、`&`, `'`, ```, `"` , `<`, `>` 等の特殊文字を、HTMLエンコードすることで、XSS攻撃を防止することができます。また、エスケープ処理をすることで、攻撃者が不正なスクリプトを埋め込んでも、そのスクリプトが実行されず、ユーザーが危険にさらされることを防止することができます。

cookieのsecure属性に指定する

以下は、クッキーのsecure属性を設定するサンプルコードです。

// クッキーのsecure属性を設定する
setcookie('name', 'value', time() + 3600, '/', 'example.com', true, true);