angular/angular · warning

JSONP support is deprecated as it can cause XSS vulnerabilit

Error message

JSONP support is deprecated as it can cause XSS vulnerabilities, and will be removed in a future version of Angular. Please use standard HTTP requests instead.

What it means

Constructing `JsonpClientBackend` — i.e., activating JSONP support in HttpClient via `provideHttpClient(withJsonpSupport())` or importing `HttpClientJsonpModule` — logs a dev-mode deprecation warning: JSONP will be removed because it works by injecting executable <script> tags, creating XSS exposure when the endpoint is untrusted. Angular recommends standard HTTP requests, which rely on CORS instead of script injection.

Source

Thrown at packages/common/http/src/jsonp.ts:110

 * @see {@link HttpXhrBackend}
 *
 * @publicApi
 * @deprecated 22.1 JSONP is deprecated as it can cause XSS vulnerabilities. Use standard HTTP requests instead. Intent to remove in future versions of Angular.
 */
@Injectable()
export class JsonpClientBackend implements HttpBackend {
  /**
   * A resolved promise that can be used to schedule microtasks in the event handlers.
   */
  private readonly resolvedPromise = Promise.resolve();
  private readonly nonce = inject(CSP_NONCE, {optional: true});

  constructor(
    private callbackMap: JsonpCallbackContext,
    @Inject(DOCUMENT) private document: any,
  ) {
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      console.warn(
        'JSONP support is deprecated as it can cause XSS vulnerabilities, and will be removed ' +
          'in a future version of Angular. Please use standard HTTP requests instead.',
      );
    }
  }

  /**
   * Get the name of the next callback method, by incrementing the global `nextRequestId`.
   */
  private nextCallback(): string {
    return `ng_jsonp_callback_${nextRequestId++}`;
  }

  /**
   * Processes a JSONP request and returns an event stream of the results.
   * @param req The request object.
   * @returns An observable of the response events.
   *

View on GitHub (pinned to 51cb07e980)

Solutions

  1. Replace `http.jsonp()` calls with `http.get()` once the endpoint sends proper CORS headers (Access-Control-Allow-Origin)
  2. If the third-party endpoint cannot change, proxy it through your own server/BFF that adds CORS headers, then use `http.get()`
  3. Remove `provideHttpClient(withJsonpSupport())` / `HttpClientJsonpModule` once no `jsonp()` calls remain

Example fix

// before
provideHttpClient(withJsonpSupport());
this.http.jsonp('https://legacy.example.com/data', 'callback');

// after
provideHttpClient(withFetch());
this.http.get<ApiResponse>('https://api.example.com/data'); // server sends CORS headers
Defensive patterns

Strategy: fallback

Prevention

When it happens

Trigger: Providing `withJsonpSupport()` (or `HttpClientJsonpModule`) in the app config; the warning fires in the `JsonpClientBackend` constructor in dev mode, as soon as the JSONP backend is instantiated (first `http.jsonp()` call or eager provider creation).

Common situations: Legacy enterprise apps consuming old third-party APIs that never sent CORS headers; upgrading such apps to modern Angular where removal is scheduled; teams discovering hidden JSONP usage only when the warning appears during a migration.

Related errors


AI-assisted analysis of angular/angular@51cb07e980 (2026-08-22). Data as JSON: /api/errors/19554bb867d944ba. Report an issue: GitHub.