日々更新中です!

Angularのセキュリティ!XSSやCSRFの対策は?

  • URLをコピーしました!
悩んでいる男の子

Angularのセキュリティについて教えてくれないかな?

こんな疑問にお答えします。

  • 本記事の内容
  • Angularのセキュリティについて
  • 本記事の執筆者
プロフィール
いずみん(どこの写真だよ)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 物販月利50万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、プログラミング、投資をやっています。
  • 物販は彼女と楽しみながらやっています!

今回は、Angularのセキュリティについて解説します。

いずみん

本記事を読めばAngularのセキュリティの基礎が理解できるので、是非最後まで読んでみてください!

目次

Angularのセキュリティ

Angularがデフォルトで対策しているものは以下の通りです。

  • XSS(クロスサイトスクリプティング)
  • CSRF(クロスサイトリクエストフォージェリ)
  • XSSI(クロスサイトスクリプトインクルージョン)

XSS(クロスサイトスクリプティング)

XSS対策において大切なことは、悪意のあるDOMを挿入されないようにすることです。

AngularにおけるXSS対策

Angularは、すべての入力を信頼できない値として処理します

つまり、DOMへの値挿入はすべて信頼できない値として処理し、サニタイズされます。

サニタイズは「無害化」という意味です。
<script>タグなど、特殊な文字列を無害化します。

サニタイズ例

<h3>Binding innerHTML</h3>
<p>Bound value:</p>
<p class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
<p>Result of binding to innerHTML:</p>
<p class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>
export class InnerHtmlBindingComponent {
  // For example, a user/attacker-controlled value from a URL.
  htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>';
}

上記は公式サイトに載っているソースコードです。

テンプレート補完({{}})は自動的に「htmlSnippet」の値をエスケープします。

innerHTMLでは、<script>タグはサニタイズされますが、<b>タグなどはサニタイズされません。

CSRF(クロスサイトリクエストフォージェリ)

Angularは、デフォルトでCSRFの対策がされています

HttpClientXsrfModuleのソースコード

/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
import { Injector, ModuleWithProviders } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpBackend, HttpHandler } from './backend';
import { HttpInterceptor } from './interceptor';
import { HttpRequest } from './request';
import { HttpEvent } from './response';
/**
 * An injectable `HttpHandler` that applies multiple interceptors
 * to a request before passing it to the given `HttpBackend`.
 *
 * The interceptors are loaded lazily from the injector, to allow
 * interceptors to themselves inject classes depending indirectly
 * on `HttpInterceptingHandler` itself.
 * @see `HttpInterceptor`
 */
export declare class HttpInterceptingHandler implements HttpHandler {
    private backend;
    private injector;
    private chain;
    constructor(backend: HttpBackend, injector: Injector);
    handle(req: HttpRequest<any>): Observable<HttpEvent<any>>;
}
/**
 * Constructs an `HttpHandler` that applies interceptors
 * to a request before passing it to the given `HttpBackend`.
 *
 * Use as a factory function within `HttpClientModule`.
 *
 *
 */
export declare function interceptingHandler(backend: HttpBackend, interceptors?: HttpInterceptor[] | null): HttpHandler;
/**
 * Factory function that determines where to store JSONP callbacks.
 *
 * Ordinarily JSONP callbacks are stored on the `window` object, but this may not exist
 * in test environments. In that case, callbacks are stored on an anonymous object instead.
 *
 *
 */
export declare function jsonpCallbackContext(): Object;
/**
 * Configures XSRF protection support for outgoing requests.
 *
 * For a server that supports a cookie-based XSRF protection system,
 * use directly to configure XSRF protection with the correct
 * cookie and header names.
 *
 * If no names are supplied, the default cookie name is `XSRF-TOKEN`
 * and the default header name is `X-XSRF-TOKEN`.
 *
 * @publicApi
 */
export declare class HttpClientXsrfModule {
    /**
     * Disable the default XSRF protection.
     */
    static disable(): ModuleWithProviders<HttpClientXsrfModule>;
    /**
     * Configure XSRF protection.
     * @param options An object that can specify either or both
     * cookie name or header name.
     * - Cookie name default is `XSRF-TOKEN`.
     * - Header name default is `X-XSRF-TOKEN`.
     *
     */
    static withOptions(options?: {
        cookieName?: string;
        headerName?: string;
    }): ModuleWithProviders<HttpClientXsrfModule>;
}
/**
 * Configures the [dependency injector](guide/glossary#injector) for `HttpClient`
 * with supporting services for XSRF. Automatically imported by `HttpClientModule`.
 *
 * You can add interceptors to the chain behind `HttpClient` by binding them to the
 * multiprovider for built-in [DI token](guide/glossary#di-token) `HTTP_INTERCEPTORS`.
 *
 * @publicApi
 */
export declare class HttpClientModule {
}
/**
 * Configures the [dependency injector](guide/glossary#injector) for `HttpClient`
 * with supporting services for JSONP.
 * Without this module, Jsonp requests reach the backend
 * with method JSONP, where they are rejected.
 *
 * You can add interceptors to the chain behind `HttpClient` by binding them to the
 * multiprovider for built-in [DI token](guide/glossary#di-token) `HTTP_INTERCEPTORS`.
 *
 * @publicApi
 */
export declare class HttpClientJsonpModule {
}

XSSI(クロスサイトスクリプトインクルージョン)

Angularは、デフォルトでXSSIの対策がされています

Angularのセキュリティ対策で大切なこと

Angularでのセキュリティ対策として大切なことは以下の通りです。

  • 最新状態に保つこと
  • Angularテンプレートを利用すること

最新状態に保つこと

当たり前ですが、常に最新状態を保つことは大切です。

特に、Angularの場合はバージョンが約半年ほどで更新されるので、最新バージョンに更新することも大切です。

バージョンアップには脆弱性対策に関するパッチも含まれるため、更新は怠らないようにしましょう。

Angularテンプレートを利用すること

サードパーティ製のものを利用するなど、脆弱性のあるものを利用するのは極力避けましょう。

Angularでできることは多種多様なので、わざわざ脆弱性のあるものをインストールする必要はありません。

Angularのセキュリティ公式サイト

Googleのセキュリティ

AngularはGoogleが開発しているので、Googleにおけるセキュリティも確認しておくべきです。

まとめ

今回は、Angularのセキュリティについて解説しました。

セキュリティは非常に重要なので、常に最新情報をキャッチアップしておきましょう。

ではまた!

  • おすすめ本はこちら!
いずみん

僕は↑の本でAngularの勉強をしました!
非常に分かりやすいのでおすすめです!

  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

いずみんのアバター いずみん 自由大好きおじ

自由大好きおじ | 物販月利50万達成⇨脱サラ | 物販(アパレルせどり)・アフィリエイト・プログラミング・投資に関する情報を発信中 | 元エンジニア | 保有資格約20個

コメント

コメントする

目次
閉じる