フロントエンド開発において、セキュリティ対策は非常に重要です。Webアプリケーションのセキュリティは、ユーザーのプライバシー保護や機密情報の漏洩を防ぐために欠かせません。本記事では、フロントエンド開発者が押さえておくべきセキュリティ対策について解説します。

XSS（クロスサイトスクリプティング）の防止

XSS（クロスサイトスクリプティング）は、Webアプリケーションにおいて最も一般的な脆弱性の一つです。ユーザーが入力したスクリプトをそのまま実行してしまうことで、悪意のあるコードを実行される可能性があります。XSS対策としては、ユーザー入力をエスケープする、CSP（Content Security Policy）を設定するなどの方法があります。

XSSの多くは、悪意を持ったユーザーがJavaScriptなどを送信して保存し、他のユーザーが閲覧することで発生します。そのため、ユーザー入力をエスケープすることが重要です。たとえば、HTMLエスケープやJavaScriptエスケープを行うことで、悪意のあるスクリプトが実行されるのを防ぐことができます。

XSSの種類

XSSには幾つかの種類があります。

• Reflected XSS（リフレクティブXSS）
  ユーザーが特定のリンクをクリックしたときに発生するXSS。攻撃者がリンクを送信し、ユーザーがクリックすることで悪意のあるスクリプトが実行されます。
• Stored XSS（ストアドXSS）
  攻撃者が悪意のあるスクリプトをデータベースに保存し、他のユーザーが閲覧した際に実行されるXSS。例えば、掲示板やコメント欄にスクリプトを埋め込むといった方法です。
• DOM-based XSS（DOMベースXSS）
  サーバー側ではなく、クライアント側で発生するXSS。攻撃者がURLのハッシュやクエリパラメータに悪意のあるスクリプトを埋め込み、ページを開いたときに実行されます。

XSS対策のベストプラクティス

XSS対策として、フロントエンド開発者が行うべきベストプラクティスを以下に示します。

• ユーザー入力をエスケープする（保存時）
  ユーザーが入力したデータを保存する際には、HTMLエスケープやJavaScriptエスケープを行うことで、悪意のあるスクリプトが実行されるのを防ぎます。
• ユーザー入力をエスケープする（表示時） ユーザーが入力したデータを表示する際にも、HTMLエスケープやJavaScriptエスケープを行うことで、XSS攻撃を防ぎます。
• CSP（Content Security Policy）の使用
  CSPを設定することで、外部スクリプトの実行やインラインスクリプトの使用を制限することができます。これにより、XSS攻撃を防ぐことができます。

CSRF（クロスサイトリクエストフォージェリ）対策

CSRF（クロスサイトリクエストフォージェリ）は、ユーザーが意図しないリクエストを送信させる攻撃です。攻撃者が悪意のあるリクエストを送信し、ユーザーがログイン済みの状態でそれをクリックすることで、リクエストが実行されます。CSRFトークンを使ってリクエストの正当性を検証することで、CSRF攻撃を防ぐことができます。

この攻撃はサービスのAPI利用増加に伴って増えています。サービス提供側では、意図したリクエストなのかどうかを判別し、不正なリクエストを防ぐ対策が必要です。

CSRFトークンとは

CSRFトークンは、Webアプリケーションのセキュリティ対策の一つです。ユーザーがリクエストを送信する際に、サーバーから発行されたトークンを含めることで、リクエストの正当性を検証します。攻撃者がトークンを知らない限り、リクエストは実行されません。

トークンはサーバーサイドで生成され、HTML中に埋め込んでおくのが一番の方法です。トークンをセッションごとに生成し、リクエストごとに変更させれば、多重送信を防ぐ効果もあります。

CSRF対策のベストプラクティス

CSRF対策として、フロントエンド開発者が行うべきベストプラクティスを以下に示します。

1. CSRFトークンの利用

CSRFトークンを使ってリクエストの正当性を検証することで、CSRF攻撃を防ぐことができます。トークンはサーバーサイドで生成し、HTML中に埋め込んでおくのが一般的です。リクエストの正当性が評価できれば良いので、ユニークなトークンを生成する必要があります。

生成したトークン文字列をCookieに保存し、リクエスト時にCookieからトークンを取得してリクエストヘッダに含めることで、CSRF攻撃を防ぐことができます。

2. セキュアフラグの設定

Cookieにセキュアフラグを設定することで、HTTPS経由での通信のみでCookieを送信するようになります。これにより、中間者攻撃を防ぐことができます。また、HttpOnly属性を設定することで、JavaScriptからCookieにアクセスできなくなり、XSS攻撃を防ぐことができます。

3. サーバーサイドでの対策

サーバーサイドでもCSRF対策を行うことが重要です。CSRFトークンの検証やリクエストの正当性を確認することで、CSRF攻撃を防ぐことができます。各プログラミング言語でランダムな文字列を生成できる機能がありますので、それを利用してトークンを生成しましょう。

4. CORS（Cross-Origin Resource Sharing）の設定

CORSは、クロスオリジンリクエストを制御するための仕組みです。CORSを設定すると、指定したドメインからのリクエストのみを許可できます。これにより、CSRF攻撃を防ぐことができます。

なお、CORSはブラウザ向けのアクセス制御であり、モバイルアプリやサーバーサイドからのアクセスには影響しません。

セキュアな認証とセッション管理

セキュアな認証とセッション管理は、Webアプリケーションのセキュリティにおいて重要な要素です。ユーザーの認証情報を保護し、不正なアクセスを防ぐためには、適切な認証プロセスとセッション管理が必要です。

1. パスワードのハッシュ化

ユーザーのパスワードは、平文で保存するのではなく、ハッシュ化して保存しなければなりません。ハッシュ化することで、その文字列が漏洩しても元のパスワードを取得されることがありません。また、ソルトを使ってパスワードをハッシュ化することで、辞書攻撃やレインボーテーブル攻撃を防ぐことができます。

2. 二要素認証（2FA）

二要素認証（2FA）は、パスワードだけでなく、別の認証要素（SMS、メール、アプリなど）を使ってユーザーを認証する仕組みです。2FAを導入することで、不正アクセスを防ぐことができます。ユーザーがログインする際に、パスワードと2FAコードの両方を入力する必要があります。

最近ではiOSがパスキーを提供し、パスワードレス認証を推し進めています。パスワードレス認証は、ユーザーがパスワードを覚える必要がなく、セキュリティを向上させることができます。

3. 認証回数制限

辞書攻撃や総当たり攻撃を防ぐために、認証回数制限を設定しましょう。ユーザーが一定回数以上認証に失敗した場合、アカウントをロックするなどの対策を取ることで、不正アクセスを防ぐことができます。

4. セッションIDの保護

セッションIDは、ユーザーのセッションを識別するための重要な情報です。セッションIDを盗まれると、不正なアクセスが可能になるため、セッションIDの保護が重要です。セキュアフラグを設定し、HTTPS経由での通信のみでCookieを送信できるようにし、セッションIDの盗難を防ぎましょう。

また、httpOnly属性を設定することで、JavaScriptからCookieにアクセスできないようにする工夫も必要です。

5. トークンの扱い

セッションIDの代わりにトークンを使ってAPIアクセスする場合、その扱いに注意が必要です。トークンをURLパラメータに含めることはセキュリティ上好ましくありません。代わりに、HTTPヘッダーにトークンを含めるなど、セキュアな方法でトークンを扱うようにしましょう。

HTTPSとデータの暗号化

HTTPSは、Webアプリケーションの通信を暗号化するためのプロトコルです。HTTPSを使うことで、ユーザーのプライバシーを保護し、機密情報の漏洩を防げます。また、データの暗号化は第三者からの盗聴や改ざんを防ぐのに役立ちます。

1. HTTPSの重要性とSSL/TLS証明書

HTTPSを使うことで、通信内容が暗号化され、盗聴や改ざんを防ぐことができます。また、Google Chromeなどのブラウザでは、HTTPSを使っていないサイトに対して警告を表示するようになっています。HTTPSを導入するためには、SSL/TLS証明書が必要です。Let's Encryptなどを使えば、無料でSSL証明書を取得できます。ただし有効期限が3ヶ月と短いため、定期的に更新する必要があります。

SSL証明書の中には「企業実在認証」や「EV認証」など、よりレベルの高い証明書があります。これらは、証明書の信頼性を高めるために利用されるものであり、セキュリティという観点だけで見れば無料の証明書と変わりません。用途や目的によって、適切な証明書を選択しましょう。

2. ブラウザAPIとHTTPS

ブラウザのAPIによっては、HTTPS以下でないと利用できないものが増えています。たとえば、Geolocation APIやService Worker APIなどがHTTPSでないと利用できません。

また、Webアプリケーションをデスクトップやモバイルアプリのように扱うPWA（Progressive Web Apps）もHTTPSでないと動作しません。PWAにするとWebプッシュ通知やオフライン対応などの機能を利用できるようになります。

3. Mixed Contentの問題と対策

Mixed Contentとは、HTTPSのページにHTTPのコンテンツが含まれた状態を意味します。Mixed Contentがあると、ページのセキュリティが脆弱になり、ブラウザが警告表示を行います。Mixed Contentを解消するためには、HTTPのコンテンツをHTTPSに変更するか、HTTPSのコンテンツをHTTPに変更するかのどちらかを行う必要があります。もちろん、お勧めは前者です。

良くあるのは、ユーザーが生成したコンテンツにHTTPの画像が含まれるケースです。画像を取得するプロキシサーバーを用意して、HTTPの画像をプロキシサーバー経由で取得すれば、Mixed Contentを解消できます。

セキュリティヘッダーの利用

セキュリティヘッダーは、Webアプリケーションのセキュリティを向上させるためのヘッダーです。CSP（Content Security Policy）、HSTS（HTTP Strict Transport Security）、X-Frame-Optionsなど、さまざまなセキュリティヘッダーがあります。これらのセキュリティヘッダーを適切に設定することで、XSSやクリックジャッキングなどの攻撃を防ぐことができます。

1. Content Security Policy（CSP）

CSPは、外部スクリプトの実行やインラインスクリプトの使用を制限することができるセキュリティヘッダーです。CSPを設定することで、XSS攻撃を防ぐことができます。CSPを使うことで、許可されたリソースのみが読み込まれるようになり、悪意のあるスクリプトの実行を防ぐことができます。

CSPは、サーバーから Content-Security-Policy ヘッダーを使って指定する方法と、HTMLの meta タグを使って指定する方法があります。CSPの設定には、default-src、script-src、style-src、img-src、connect-src、font-src、object-src、media-src、frame-src、sandbox などのディレクティブを使って、許可するリソースを指定します。

2. HTTP Strict Transport Security（HSTS）

HSTSは、HTTPS接続を強制するためのセキュリティヘッダーです。HSTSを使うことで、通信内容が暗号化され、盗聴や改ざんを防げます。また、ブラウザがHTTPをHTTPSにリダイレクトし、強制的にHTTPSを使うよう指示できます。

この問題は無料のアクセスポイントを利用しようとした際に、そのアクセスポイントが不正だった場合などの対策として有効です。初回のHTTPアクセスでHSTSヘッダーを受け取ったブラウザは、その後のアクセスではHTTPSを使うようになります。

3. X-Frame-Options

X-Frame-Optionsは、クリックジャッキング攻撃を防ぐためのセキュリティヘッダーです。クリックジャッキング攻撃とは、攻撃者が透明なフレームを使ってユーザーのクリックを偽装し、意図しない操作を行わせる攻撃です。X-Frame-Optionsを使うことで、外部サイトによるフレーム内での表示を制限することができます。

X-Frame-OptionsはHTTPヘッダーであり、iframeやframe、embed、objectなどの外部コンテンツ埋め込み用タグを使って外部サイトを表示する際、そのサイトが自身のフレーム内で表示されることを制限します。DENY、SAMEORIGIN、ALLOW-FROM の3つのオプションがあり、適切なオプションを選択して設定することで、クリックジャッキング攻撃を防ぐことができます。たとえば X-Frame-Options: DENY と設定することで、外部サイト（同じサイトも含む）をフレーム内に表示できなくなります。

4. ヘッダーの設定方法と推奨事項

これらのセキュリティヘッダーは、サーバーから送信するものなので、フロントエンド側で何か行える訳ではありません。Webサーバーの設定やアプリケーション側のコードでヘッダーを出力します。また、CSPやHSTSなどのセキュリティヘッダーを設定するのに役立つツールやライブラリがありますので、それらを利用しましょう。Ruby on RailsやLarabelといったWebアプリケーションフレームワークを利用すると、こうしたセキュリティ系の対策も簡単に行えます。

セキュリティのベストプラクティスとツール

セキュリティのベストプラクティスとツールを使って、Webアプリケーションのセキュリティを向上させることができます。以下に、セキュリティのベストプラクティスとツールを紹介します。

開発プロセスにおけるセキュリティの統合

開発時にはローカルコンピュータを利用することが多く、その際にはHTTP通信になっているケースがほとんどです。しかし、実際の運用ではHTTPS通信になるため、そこで差違が発生します。その場合、以下のようなツールが便利です。

• mkcert
  ローカルでHTTPS通信を行うためのツール
• dnsmasq
  小規模なDNSサーバー。ローカルでドメイン名を解決するためのツール

フロントエンド向けのセキュリティツール

フロントエンド開発においても、セキュリティを向上させられるツールがあります。コーディング中には、静的コード解析ツールを使って、可読性を維持したり、セキュリティホールになりかねないコードを発見できます。有名なものとしてはESLintなどがあります。

リリース前などは、本番サーバーに対してセキュリティスキャンをお勧めします。たとえばOWASP ZAPやNessus、Nmapなどのツールが有名です。

定期的なセキュリティチェックとアップデートの重要性

フロントエンド開発の進化は激しく、ブラウザも日々アップデートしています。それに伴ってセキュリティに関する課題も日々変化しています。そのため、定期的なセキュリティチェックとアップデートが重要です。セキュリティホールが見つかった場合は、速やかな修正が必要です。

まとめ

フロントエンド開発において、セキュリティ対策は非常に重要です。クライアントサイドだけでできること、サーバーとの連携が必要な部分など多様な知識が求められます。セキュリティ対策は、ユーザーのプライバシー保護や機密情報の漏洩を防ぐために欠かせませんので、常に最新情報を追いかけ、セキュリティ対策を行いましょう。

Hexabaseでは堅牢なサーバーサイドのバックエンドを提供しています。Hexabaseを利用することで、セキュアなWebアプリケーションを素早く開発できます。ぜひご利用ください。