HTTP Security Features

Relevant source files

• adev/src/content/best-practices/BUILD.bazel
• adev/src/content/best-practices/a11y.md
• adev/src/content/best-practices/performance/BUILD.bazel
• adev/src/content/best-practices/style-guide.md
• adev/src/content/ecosystem/custom-build-pipeline.md
• adev/src/content/ecosystem/rxjs-interop/take-until-destroyed.md
• adev/src/content/guide/components/dom-apis.md
• adev/src/content/guide/components/inheritance.md
• adev/src/content/guide/drag-drop.md
• adev/src/content/guide/http/interceptors.md
• adev/src/content/guide/http/making-requests.md
• adev/src/content/guide/http/overview.md
• adev/src/content/guide/http/security.md
• adev/src/content/guide/http/setup.md
• adev/src/content/guide/http/testing.md
• adev/src/content/guide/ssr.md
• adev/src/content/guide/templates/binding.md
• adev/src/content/guide/templates/ng-container.md
• adev/src/content/guide/templates/ng-content.md
• adev/src/content/guide/templates/overview.md
• adev/src/content/guide/templates/pipes.md
• adev/src/content/guide/templates/two-way-binding.md
• adev/src/content/guide/testing/component-harnesses-overview.md
• adev/src/content/guide/testing/component-harnesses-testing-environments.md
• adev/src/content/guide/testing/creating-component-harnesses.md
• adev/src/content/guide/testing/using-component-harnesses.md
• adev/src/content/introduction/essentials/dependency-injection.md
• adev/src/content/introduction/essentials/templates.md
• adev/src/content/reference/migrations/outputs.md
• adev/src/content/tutorials/first-app/steps/01-hello-world/README.md
• packages/common/http/src/backend.ts
• packages/common/http/src/context.ts
• packages/common/http/src/headers.ts
• packages/common/http/src/interceptor.ts
• packages/common/http/src/jsonp.ts
• packages/common/http/src/params.ts
• packages/common/http/src/provider.ts
• packages/common/http/src/response.ts
• packages/common/http/src/transfer_cache.ts
• packages/common/http/src/xsrf.ts
• packages/common/http/test/BUILD.bazel
• packages/common/http/test/headers_spec.ts
• packages/common/http/test/jsonp_mock.ts
• packages/common/http/test/jsonp_spec.ts
• packages/common/http/test/params_spec.ts
• packages/common/http/test/provider_spec.ts
• packages/common/http/test/response_spec.ts
• packages/common/http/test/transfer_cache_spec.ts
• packages/common/http/test/xhr_mock.ts
• packages/common/http/test/xsrf_spec.ts
• packages/common/http/testing/src/backend.ts
• packages/common/http/testing/src/provider.ts
• packages/common/http/testing/src/request.ts
• packages/common/http/testing/test/BUILD.bazel
• packages/common/http/testing/test/request_spec.ts
• packages/common/upgrade/src/location_shim.ts
• packages/common/upgrade/test/BUILD.bazel
• packages/common/upgrade/test/upgrade.spec.ts
• packages/common/upgrade/test/upgrade_location_test_module.ts
• packages/examples/core/animation/ts/dsl/animation_example.ts
• packages/examples/core/ts/metadata/lifecycle_hooks_spec.ts
• packages/platform-browser/test/hydration_spec.ts

Purpose and Scope

This document describes Angular's built-in HTTP security mechanisms provided by HttpClient. These features protect against common web vulnerabilities and optimize data transfer in Server-Side Rendering (SSR) environments.

The security features covered here are:

• XSRF/CSRF Protection: Automatically adds authentication tokens to requests to prevent Cross-Site Request Forgery attacks.
• XSSI Protection: Strips non-executable prefixes from JSON responses to prevent Cross-Site Script Inclusion attacks.
• HTTP Transfer Cache: Optimizes hydration by reusing server-side HTTP responses on the client, preventing duplicate network requests.

Sources: packages/common/http/src/xsrf.ts1-20 packages/common/http/src/transfer_cache.ts1-22 adev/src/content/guide/http/security.md1-13

---

XSRF/CSRF Protection

Overview

Cross-Site Request Forgery (XSRF or CSRF) is an attack where a malicious site tricks an authenticated user into unknowingly executing actions on a trusted site. Angular's HttpClient implements the cookie-to-header token pattern to prevent these attacks automatically.

Sources: adev/src/content/guide/http/security.md15-33 packages/common/http/src/xsrf.ts1-142

How XSRF Protection Works

Title: XSRF Token Injection Flow

Sources: packages/common/http/src/xsrf.ts94-127 adev/src/content/guide/http/security.md15-33

Core Implementation Entities

Title: XSRF Code Entity Map

Sources: packages/common/http/src/xsrf.ts24-141 packages/common/http/src/provider.ts28

Configuration

Token	Default Value	Purpose
XSRF_ENABLED	true	Global enable/disable flag packages/common/http/src/xsrf.ts47
XSRF_COOKIE_NAME	'XSRF-TOKEN'	Name of cookie to read token from packages/common/http/src/xsrf.ts28
XSRF_HEADER_NAME	'X-XSRF-TOKEN'	Name of header to set token in packages/common/http/src/xsrf.ts38

Sources: packages/common/http/src/xsrf.ts24-47

---

HTTP Transfer Cache

Overview

The HttpTransferCache is a critical feature for Angular Applications using Server-Side Rendering (SSR). It captures HTTP responses on the server and serializes them into the HTML document, allowing the client-side application to "replay" those responses during hydration without making new network requests.

Sources: packages/common/http/src/transfer_cache.ts33-56 adev/src/content/guide/ssr.md3-23

Cache Decision Logic

The shouldCacheRequest function determines if a request is eligible for transfer:

1. Method Check: By default, only GET and HEAD are cached packages/common/http/src/transfer_cache.ts125-137
2. Auth Headers: Requests with Authorization, Proxy-Authorization, or Cookie are excluded unless includeRequestsWithAuthHeaders is enabled packages/common/http/src/transfer_cache.ts139-140
3. Credentials: Requests with withCredentials are never cached packages/common/http/src/transfer_cache.ts134-135
4. Manual Override: Individual requests can opt-out via the transferCache property in HttpRequest packages/common/http/src/transfer_cache.ts133

Sources: packages/common/http/src/transfer_cache.ts127-147

Implementation Flow

Title: HTTP Transfer Cache Flow

Sources: packages/common/http/src/transfer_cache.ts245-288 packages/common/http/src/transfer_cache.ts162-183

Origin Mapping

When the server uses internal URLs (e.g., http://localhost:8080) that differ from client URLs, the HTTP_TRANSFER_CACHE_ORIGIN_MAP token allows mapping these origins so the cache keys match.

Location: packages/common/http/src/transfer_cache.ts84-86 Usage: packages/common/http/src/transfer_cache.ts68-81

---

XSSI Protection

Mechanism

Cross-Site Script Inclusion (XSSI) is prevented by Angular automatically stripping the non-executable prefix )]}',\n from all JSON responses.

1. Server-Side: The API prefixes JSON data with the security string.
2. Browser: If an attacker tries to load the API via a <script> tag, the prefix causes a syntax error, preventing data leakage.
3. HttpClient: The client detects the prefix and removes it before calling JSON.parse().

Sources: adev/src/content/guide/http/security.md7-13 adev/src/content/guide/http/security.md7-13

---

Security Best Practices

Request Filtering

HttpClient allows fine-grained control over which requests receive security tokens or are cached. Developers can use withInterceptors to add custom security logic.

Location: packages/common/http/src/provider.ts149-162

Best Practices Summary

Feature	Best Practice	Reference
XSRF	Ensure backend sets XSRF-TOKEN cookie and validates X-XSRF-TOKEN header.	adev/src/content/guide/http/security.md19-33
SSR	Use provideHttpClient(withHttpTransferCache()) to prevent hydration flickering.	packages/common/http/src/transfer_cache.ts333-350
Auth	Do not cache requests containing sensitive Cookie or Authorization headers.	packages/common/http/src/transfer_cache.ts55-56
CORS	XSRF tokens are only added to same-origin requests to prevent leakage.	packages/common/http/src/xsrf.ts104-117

Sources: adev/src/content/guide/http/security.md1-66 packages/common/http/src/transfer_cache.ts127-147