security 2022.11.09 honda

こんにちは、フロントエンドエンジニアの本田です。

今回はフロントエンドエンジニアが対策するべきセキュリティ項目について、対策をしなかった場合に起きる問題と、対策方法の一例を交えながら紹介します。

クロスサイト・スクリプティング（XSS）

▼クロスサイト・スクリプティングで起きる問題

Webアプリケーションにスクリプトを埋め込むことが可能な脆弱性がある場合、これを悪用した攻撃によって利用者のブラウザ上で不正なスクリプトが実行されてしまう可能性があります。

▼発生する脅威

クロスサイト・スクリプティング攻撃で発生する可能性のある脅威は下記のとおりです。

• 本物サイト上に偽のページが表示される
  • 偽情報の流布によって混乱が起きる
  • フィッシング詐欺による情報漏洩が起きる など
• ブラウザが保存しているCookieを取得される
  • CookieにセッションIDが格納されている場合、利用者になりすまされる可能性がある
  • Cookieに個人情報等が格納されている場合、その情報が漏洩する
• 任意のCookieをブラウザに保存させられる
  • セッションIDが利用者に送り込まれ、「セッションIDの固定化」攻撃に悪用される
    
    

▼対策方法

<や>、&など、Webページの表示に影響する特別な記号文字をHTMLタグの一部として使用できると、そこから攻撃される可能性があります。
そのため、< > &などのようなHTMLエンティティに置換する、inputから入力された内容はHTMLタグの一部としてではなくテキストとしてUIに表示するなどの対策を行いましょう。

また、URLを出力する際にはhttp://やhttps://で始まるURLのみを許可する「ホワイトリスト方式」で実装してください。
javascript:の形式から始まるものもありますが、Webページに出力するリンク先や画像のURLが外部からの入力に依存する形で動的 に生成される場合、その URL にスクリプトが含まれていると、クロスサイト・スクリプティング攻撃が可能となる場合があります。

evalインジェクション対策

▼evalインジェクションで起きる問題

evalとは、引数に指定した文字列をJavaScriptプログラムコードとして評価・実行する機能をもつ関数のことです。
eval関数の使い方に問題がある場合、外部から送り込んだスクリプトを実行することによって、本来意図しない不正な処理を実行されてしまいます。

▼発生する脅威

evalの使い方に問題があると、下記のような脅威が発生します。

• 情報漏洩
• サイトを改ざんされる
• 不正な機能を実行される
• 他サイトへの攻撃の踏み台にされる
• 暗号通貨の採掘（マイニング）に利用される
  
  

▼対策方法

基本的には、eval関数を使わずに実装できないかを検討しましょう。
もしどうしても使用しなければならない場合があれば、下記のどちらかを用いて対策してください。

• 関数の引数を構成する変数にWebアプリに渡されるパラメータを直接出力しない
• 関数の引数を構成する全ての変数をチェックし、予め許可した処理のみが実行されるようにする
  
  
  

フィッシング対策

▼フィッシングで起きる問題

悪意のある人が金融サイトやショッピングサイト等を装った偽のウェブサイトを作成して、利用者を巧みにそこへ誘導し、利用者の認証情報やクレジットカード番号等を不正に取得されてしまいます。

▼対策方法

フィッシングには、ドメイン名にユーザの認知しているサービス事業者名称、サービス名などから連想しやすいようなドメイン名を設定する、アドレスバーを隠さないなどの対策が有効です。
また、リダイレクト機能を実装する場合、リダイレクト先のURLはあらかじめ想定しているURLとなるように制限し、別ドメインに遷移する場合はクッションページを設けるようにしましょう。

その他のセキュリティ対策

データの取り扱い

Webアプリケーションで個人情報などの重要情報を取り扱う場合は、特にデータの取り扱いに注意する必要があります。

▼対策方法

HTML、パラメータ、Cookie、エラーメッセージ、メール、画像等、Webアプリからの出力には不必要な重要情報を含めないようにし、API通信を行う場合は、GETメソッドを用いるとURLパラメータに格納されてしまうため、POSTメソッドを用いて送信するようにしましょう。

パスワードやクレジットカード番号などの重要情報を表示する必要がある場合には、桁数がわからないように一定個数の*等で表示し、クレジットカード番号は最後の4桁以外はマスク表示にしましょう。
パスワードやクレジットカードのセキュリティコードをユーザが入力する場合にも、入力欄のinput要素にはtype属性にpasswordを指定し、マスク表示になるようにしましょう。

また、入力フォームを使用するWebサイトでは、ユーザがフォームに入力したデータに誤りや不足によって再入力が必要な場合でも、パスワード等の重要情報は再表示せず、ユーザに再入力させるようにしましょう。

不要情報の隠蔽

不要な情報はできるだけ隠蔽するようにしましょう。

▼対策方法

デバッグ用のメッセージを画面上に出力しない、HTMLコメントに開発者名等の利用者に不要な情報は記載しないようにしましょう。

推奨関数の利用

脆弱性の存在する関数は利用を避けましょう。

▼対策方法

JavaScriptのgetYearとsetYear、PHP5.3.0以降のereg関数など、プログラム言語での利用非推奨関数は利用しないようにしましょう。

認証処理

正当な利用者が正しく認証を行い、パスワードリスト攻撃、総当たり攻撃などに対抗できるようにしましょう。

▼対策方法

ログイン後に前回ログイン日時を表示したり、ログイン時にメールでログインしたことを連絡する機能を実装することで、利用者が不正アクセスされていないか確認できるようになります。
また、パスワード変更時には変更前のパスワードを入力させることで本人確認を行いましょう。

汎用ライブラリの使用への対応

汎用ライブラリを利用する場合、既知の脆弱性がないことを確認してから使用しましょう。

▼対策方法

jQueryなどの汎用ライブラリだけでなく、フレームワークやCMSパッケージを使用する場合にも、利用する際にはリリース時にサポートが行われており、既知の脆弱性が存在しないバージョンを使用するようにしましょう。

まとめ

いかがでしたでしょうか？
今回はセキュリティを向上させるための対策方法の一部を紹介しましたが、他にもたくさん対策できる項目があります。
誰でも安全に利用できるWebサイトを開発するために、セキュリティ対策を導入してみてはいかがでしょうか？


参考： 安全なウェブサイトの作り方