『自由力』を身に付けるサイト「リバトレ」も見てね!!

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

悩んでいる男の子

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

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

  • 本記事の内容
  • Angularのセキュリティについて
  • 本記事の執筆者
プロフィール
どこの写真だよ
  • 長身ガリガリ自称イケメン(1993/4/1生)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 副業(物販)5か月目で月利30万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、投資を細々とやっています。
  • 物販は彼女と楽しみながらやってます!

今回は、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の勉強をしました!
非常に分かりやすいので是非!

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

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

シェアするんやで!

~ リバトレ ~

お金や副業に関する情報を発信しているよ!

この記事を書いた人

いずみんのアバター いずみん 自由力発信おじ

【自由力発信】うさんくさ笑 | 副業物販で5ヶ月目に月利30万円達成⇨脱サラ予定 | 物販(アパレルせどり)・アフィリエイト・投資で自由になるための情報を発信中?笑 | 元エンジニア | 保有資格約20個

関連記事

コメント

コメントする

目次
閉じる