
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の勉強をしました!
非常に分かりやすいのでおすすめです!
- 自由な生き方がしたいなら!
自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。
当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。
コメント