フロントエンド開発で考慮する必要がある一般的な Web セキュリティの問題、攻撃の原則、および予防策

インターネットの発展に伴い、Web アプリケーションの人気はますます高まっていますが、Web セキュリティの問題も増加しています。フロントエンド開発者は、Web アプリケーションの構築者の 1 人として、Web セキュリティの基本的な知識とソリューションを理解し、習得する必要があります。この記事では、フロントエンド開発者が知っておくべきWebセキュリティの問題と予防策を紹介します。

1.XSS攻撃

XSS 攻撃とは、コード インジェクション攻撃であるクロスサイト スクリプティング攻撃を指します。攻撃者は Web 開発中に残された脆弱性を悪用し、巧妙な方法を使用して悪意のある命令コードを Web ページに挿入し、攻撃者が悪意を持って作成した Web プログラムをユーザーが読み込んで実行できるようにします。これらの悪意のある Web プログラムは通常 JavaScript ですが、Java、VBScript、ActiveX、Flash、さらにはプレーン HTML が含まれる場合もあります。攻撃が成功すると、攻撃者は、より高い権限 (一部の操作の実行など)、プライベート Web コンテンツ、セッション、Cookie などを含む (ただしこれらに限定されない) さまざまなコンテンツを取得する可能性があります。

XSS 攻撃の種類:

1. 反映された XSS

ユーザーが悪意のあるリンクをクリックするか、フォームを送信するか、悪意のある Web サイトにアクセスすると、挿入されたスクリプトが攻撃者の Web サイトに侵入します。Web サーバーは、エラー メッセージ、検索結果などのスクリプトを挿入し、フィルタリングせずにユーザーのブラウザに直接返します。

攻撃原理

• 攻撃者は、悪意のあるコードを含む特別な URL を作成します。
• ユーザーが悪意のあるコードを含む URL を開くと、Web サイトサーバーは URL から悪意のあるコードを取り出し、HTML に結合してユーザーに返します。
• ユーザーのブラウザは応答を受信すると、それを解析して実行し、それに混ざった悪意のあるコードも実行されます。
• 悪意のあるコードは、ユーザー データを盗んで攻撃者の Web サイトに送信するか、ユーザーの動作を偽装してターゲット Web サイトのインターフェイスを呼び出し、攻撃者が指定した操作を実行します。

2.DOM型XSS

DOM タイプの XSS 攻撃は、実際には、フロントエンドの JavaScript コードが十分に厳密ではなく、信頼できないコンテンツがページに挿入されることを意味します。.innerHTML、.outerHTML、.appendChild、document.write() およびその他の API を使用する場合は特に注意してください。信頼できないデータを HTML としてページに挿入しないでください。.innerText、.textContent、.setAttribute() などを使用するようにしてください。

攻撃原理

• 攻撃者は、悪意のあるコードを含む特別なデータを作成します。
• ユーザーのブラウザが悪意のあるコードを実行しました。
• 悪意のあるコードは、ユーザー データを盗んで攻撃者の Web サイトに送信するか、ユーザーの動作を偽装してターゲット Web サイトのインターフェイスを呼び出し、攻撃者が指定した操作を実行します。

3. 保存された XSS

悪意のあるスクリプトはターゲット サーバーに永続的に保存されます。ブラウザがデータを要求するとサーバーからスクリプトが返されて実行されるため、影響範囲は反映型XSSやDOM型XSSよりも大きくなります。保存型 XSS 攻撃の原因は依然としてデータ フィルタリングの欠如です。フロントエンドがデータをサーバーに送信するときにフィルタリングしません。サーバーがデータを受信するときに、保存する前にフィルタリングしません。 end はサーバーからのデータを要求します。フィルターされた出力はありません。

攻撃原理

• 攻撃者は、悪意のあるコードをターゲット Web サイトのデータベースに送信します。
• ユーザーがターゲット Web サイトを開くと、Web サイトサーバーはデータベースから悪意のあるコードを取り出し、それを HTML につなぎ合わせてブラウザーに返します。
• ユーザーのブラウザは応答を受信すると、それを解析して実行し、それに混ざった悪意のあるコードも実行されます。
• 悪意のあるコードは、ユーザー データを盗んで攻撃者の Web サイトに送信するか、ユーザーの動作を偽装してターゲット Web サイトのインターフェイスを呼び出し、攻撃者が指定した操作を実行します。

予防

• 入力チェックとフィルタリング: すべてのユーザー入力を厳密にチェックしてフィルタリングし、悪意のあるコードの挿入を防ぎます。これには、フォーム入力、URL パラメーター、Cookie などのチェックが含まれます。特に特殊文字をエスケープする必要がある HTML では、ユーザーが送信したデータをページに直接出力できないようにしてください。

• GET の代わりに POST を使用する: GET リクエストはデータを URL に入れるため、悪意のあるユーザーが XSS 攻撃を実行するために簡単に使用できます。POST リクエストはリクエスト本文にデータを入れるため、より安全です。

• 電子メール、パスワードなどのユーザーのプライバシーを Cookie で直接開示することは避けてください。次に、Cookie をシステム IP にバインドすることで、Cookie 漏洩のリスクを軽減します。

• 検証コード: スクリプトがユーザーになりすまして危険な操作を送信することを防止します。

• HTTPOnly タグを使用して、Cookie へのアクセスを制限し、Cookie の盗難を防ぎます。
  ユーザーのログイン認証情報がサーバーのセッションに保存されると、Cookie の形式でブラウザーに保存されます。多くの XSS 攻撃の目的は、ユーザーの Cookie を盗み、ID 認証を偽造することです。Cookie に HttpOnly 属性を設定すると、js スクリプトは Cookie 情報を読み取ることができなくなります。

  cookies.set(name, value, {
      httpOnly: true // 默认为 true
  })
  

• コンテンツ セキュリティ ポリシー (CSP): XSS やその他の攻撃を防ぐ強力なツール。CSP の本質はホワイトリスト システムであり、開発者はクライアントにどの外部リソースをロードして実行できるかを明確に通知します。これはホワイトリストを提供することに相当します。その実装と実行はすべてブラウザによって完了し、開発者は構成を提供するだけで済みます。CSP は Web ページのセキュリティを大幅に強化します。攻撃者が脆弱性を発見したとしても、ホワイトリストに登録された信頼できるホストも制御していない限り、スクリプトを挿入することはできません。

  • HTTP ヘッダー情報の Content-Security-Policy フィールドを通じて

    //该页面只允许当前源和https://apis.example.com 这 2 个源的脚本加载和执行
    Content-Security-Policy: script-src 'self' https://apis.example.com
    

  • ウェブタグを通じて

    //该页面只允许当前源和https://apis.example.com 这 2 个源的脚本加载和执行
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://apis.example.com">
    

2.CSRF攻撃

クロスサイト リクエスト フォージェリ (CSRF) は、攻撃者が信頼できるユーザーからのリクエストを偽装して信頼できる Web サイトを攻撃し、ユーザーの Web ブラウザーに対する Web サイトの信頼性を利用して、ユーザーが現在ログインしている Web アプリケーションをハイジャックするハッキング手法です。ユーザーが意図しない動作を実行するプログラム。

攻撃原理：

• ユーザーは通常の Web サイト WebA にログインし、閲覧して信頼しますが、同時に WebA はユーザーの検証に合格し、ユーザーのブラウザに Cookie を生成します。

• 攻撃者 WebB は、WebA に画像リンクを追加することで、ユーザーを Web サイト WebB にアクセスするように誘導します。

• ユーザーが WebB にアクセスするように誘導された後、WebB はユーザーのブラウザを使用してサードパーティの Web サイト WebA にアクセスし、操作リクエストを発行します。

• ユーザーのブラウザは、WebB の要件に従って手順 1 で生成された Cookie を使用して WebA にアクセスします。

予防：

• ランダム トークンを使用して、ユーザー リクエストの正当性を検証します。
  サーバーはユーザーのトークンを生成し、暗号化してユーザーに渡します。ユーザーはリクエストを送信するときにこのトークンを携帯する必要があり、サーバーはトークンが正しいかどうかを検証します。

• 同一オリジン検出：異なるドメインからのアクセスを防ぎ、
  リクエスト元を制限する この方法はコストが最も低いですが、サーバーがリファラーを常に取得できるわけではなく、リファラーを偽造されるリスクがあるため、100％の効果を保証することはできません。バージョンの低いブラウザ。

• データ変更操作に関しては、get リクエストではなく post リクエストを厳密に使用してください。get
  の URL はブラウザの履歴と WEB サーバーのログに記録されます。get に重要なデータが配置され、誰かがブラウザを覗いた場合、データ漏洩の原因となります。投稿ログには記録が残らず、URLも保持されないため、データベースサーバーに侵入されない限り基本的には安全です。

• CAPTCHA を使用して、
  最終リクエストを完了するためにユーザーにアプリとの対話を強制します。この方法は CSRF を効果的に封じ込めることができますが、ユーザー エクスペリエンスは比較的劣ります。

3. 「ハイジャック」をクリックします

クリック ハイジャックは、UI オーバーレイ攻撃とも呼ばれます。一部のコンテンツ (ゲームなど) を使用して攻撃者にクリックを誘導し、攻撃者は表示されている Web ページをクリックしますが、実際には元の Web ページの上に配置された別の透明なページをクリックします。

攻撃原理：

• 攻撃者は非常に魅力的な Web ページを作成しました

• 攻撃されたページを現在のページの iframe に配置します

• スタイルを使用して、非常に魅力的なコンテンツの上に iframe をオーバーレイします

• iframe を 100% 透明に設定します

• ユーザーが知らずにボタンをクリックすると、他のコマンドの実行がトリガーされます。

予防：

• X-Frame-Options を使用して、Web ページが iframe されるのを防ぎます。X-FRAME-OPTIONS は、Microsoft によって提案された http ヘッダーであり、特に iframe ネストを使用したクリック ハイジャック攻撃を防御するために使用されます。

  • DENY // ドメインの読み込みを拒否します
  • SAMEORIGIN // 同一オリジン ドメインでの読み込みを許可します
  • ALLOW-FROM // フレームロードを許可するページアドレスを定義できます

• 現在のページが iframe に埋め込まれているかどうかを判断します。

  if(top.location != self.location){
    top.location = window.location;
  }
  

4. プロジェクトにおける安全上の問題を防ぐ方法

• 安全意識の強化：プロジェクト立ち上げ段階では、安全問題の重要性を強調し、プロジェクトメンバー全員の安全意識を強化する必要があります。全員がプロジェクトの安全を確保する上での責任を理解し、安全作業に積極的に参加しましょう。

• 安全管理体制の確立：万全な安全管理体制を整備し、各種安全管理要求事項と安全管理基準を明確にします。あらゆるリンクが効果的に管理されることを保証するための安全トレーニングシステム、安全操作手順、安全検査システムなどが含まれます。

• セキュリティ設計の実装: 設計段階からセキュリティ設計に注意を払う必要があります。セキュリティ設計の原則と標準に従い、起こり得る攻撃と脆弱性を考慮し、適切な予防措置を講じてください。同時に、データ暗号化、アクセス制御、権限管理などの主要な側面のセキュリティ設計を強化する必要があります。

• コードレビューの強化: コードの品質とセキュリティを確保するためのコードレビューメカニズムを確立します。定期的なコードレビューを通じて、潜在的なセキュリティホールやエラーを発見して修正できます。同時に、最新のセキュリティの脆弱性とパッチに注意を払い、適時にシステムを修復およびアップグレードする必要があります。

• 安全研修の実施：プロジェクトメンバーの安全意識と安全スキルの向上を目的とした安全研修を実施します。研修内容は、セキュリティの基礎知識、セキュリティ脆弱性の予防、緊急時対応などです。安全に関するトレーニングや訓練を定期的に開催し、プロジェクトメンバーの安全意識と対応能力を向上させます。

• セキュリティ テスト メカニズムを確立する: プロジェクト開発プロセス中に、セキュリティ テスト メカニズムを確立します。セキュリティテスト、信頼性テスト、パフォーマンステストなどが含まれます。さまざまな攻撃シナリオや脆弱性悪用方法をシミュレートすることで、潜在的なセキュリティ問題を発見して修正します。同時に、最新の脆弱性の悪用方法や攻撃方法に注意を払い、テスト戦略をタイムリーに調整する必要があります。

• データ保護を適切に行う: プロジェクト内の機密データを保護することは、セキュリティの問題を防ぐための鍵の 1 つです。データの機密性と整合性を確保するために、暗号化、アクセス制御、データのバックアップ、その他の手段を採用します。同時に、データセキュリティの監査と監視に注意を払い、データセキュリティインシデントを迅速に検出して対応する必要があります。

• 定期的なレビューと更新: プロジェクトのセキュリティ ポリシーと手順を定期的にレビューして更新し、新しいセキュリティの脅威やビジネス ニーズに適応します。同時に、最新のセキュリティの脆弱性とパッチに注意を払い、適時にシステムを修復およびアップグレードする必要があります。