クロスサイトリクエストフォージェリからの保護

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Angularのセキュリティドキュメントでは、Angularがクロスサイトリクエストフォージェリ (CSRF、場合によってはXSRF) の試行から保護する方法について説明しています。

一般的な手法は、アプリケーション・サーバーがランダムに生成された認証トークンをCookieで送信することです。次に、クライアントコードはこのCookieを読み取り、後続のすべての要求にトークンを含むカスタム要求ヘッダーを追加します。サーバーは、受信したCookie値と要求ヘッダー値を比較し、値が欠落しているか一致しない場合は要求を拒否します。

SPEAK 3では、ユーザーがページをリクエストすると、SPEAK 3エントリポイントによって2つのCSRF対策Cookieが設定されます。クライアントは、次のいずれかのオプションを使用してトークンをサーバーに渡す必要があります。

サーバーコードは、Cookieに格納されている元のキーと、クライアントが渡すトークンがヘッダーまたは要求本文として対応していることを確認します。

要求ヘッダーとして送信する

このオプションをお勧めします。これは、Angularの一部として出荷されている組み込みのセキュリティ機能を使用するため、はるかに簡単なアプローチです。

このオプションは、ValidateHttpAntiForgeryToken属性とX-RequestVerificationTokenヘッダーを使用するWeb APIサービスに適用できます。

ただし、AngularはX-XSRF-TOKENという名前のヘッダーを設定します。

ヘッダー名は、バックエンドサービスで想定される名前と一致するように変更できます。

SPEAK 3エントリーポイントソリューションを使用する

@speak/ng-scからSciAntiCSRFModuleファイルをapp.module.tsファイルにインポートします。

import { SciAntiCSRFModule } from '@speak/ng-sc/anti-csrf';
@NgModule({
  imports: [
    SciAntiCSRFModule,
    ...
  ],
  ...
})

これにより、アプリケーションがAngular HTTPモジュールを使用してリクエストを行う限り、Anti-CSRFサポートが実装されます。

要求本文として送信する

このオプションは、ASP.NET MVCまたはASP.NET Web Formsサービスに使用します。

アクセスするサービスがValidateAntiForgeryToken属性を使用している場合、リクエストヘッダーとして送信オプションを使用することはできません。代わりに、アプリケーションは、HTTP要求ごとに __RequestVerificationToken要求本文キーでXSRF-TOKENトークンを渡す必要があります。

次のコードスニペットは、このオプションの使用方法を示しています。

import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { parseCookieValue } from '@speak/ng-sc/core';
@Injectable()
export class MyService {
  cookieName: string = 'XSRF-TOKEN';
  tokenKey: string = '__RequestVerificationToken';
  serviceUrl = '/path/to/my/service';
  myMethod() {
    const xsrfToken = parseCookieValue(document.cookie, this.cookieName);
    const body = new URLSearchParams();
    body.append(this.tokenKey, xsrfToken);
    const headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
    const options = new RequestOptions({ headers });
    this.http.post(this.serviceUrl, body.toString(), options)
      .subscribe(() => {
        // do your thing
      });
  }
}

アプリケーションでは、すべての要求にこのコードを含める必要があります。

メモ

詳細については、OWASPサイトで Cross-Site Request Forgery (CSRF) について説明しています。

Angularサイトでは、HTTPレベルの脆弱性について説明しています。

この記事を改善するための提案がある場合は、お知らせください!