Angular HttpClient referrerPolicy | Angular

• Angular HttpClient referrerPolicy | Angular

---

O que é referrerPolicy?

O referrerPolicy é uma opção do HttpClient do Angular que permite controlar quanta informação da página atual será enviada junto com uma requisição HTTP.

Essa informação normalmente vai no header HTTP chamado:

Referer: https://app.exemplo.com/pedidos/123?cliente=456

Apesar do conceito correto ser “referrer”, o header HTTP historicamente tem o nome escrito errado: Referer.

Na documentação atual do Angular, o HttpClient aceita a opção referrerPolicy para controlar a quantidade de informação de origem enviada com a requisição. Isso afeta privacidade, segurança e também ferramentas de analytics. (Angular)

Problema que isso resolve

Imagine que o usuário esteja nesta página:

https://app.minhaempresa.com/clientes/123456/pedidos/987?token=abc

E o frontend faz uma requisição para:

https://api.minhaempresa.com/relatorios

Sem controle adequado, o navegador pode enviar parte da URL atual no header Referer.

Exemplo:

Referer: https://app.minhaempresa.com/clientes/123456/pedidos/987?token=abc

Isso pode expor informações como:

• IDs internos;
• parâmetros de query string;
• tokens acidentais na URL;
• rotas internas da aplicação;
• contexto de navegação do usuário.

Exemplo básico no Angular

this.http.get('/api/data', {
  referrerPolicy: 'no-referrer'
}).subscribe();

Nesse caso, o navegador não envia o header Referer.

Ou seja, o servidor que recebe a requisição não sabe de qual página ela veio.

Exemplo enviando apenas a origem

this.http.get('/api/analytics', {
  referrerPolicy: 'origin'
}).subscribe();

Se a página atual for:

https://app.exemplo.com/pedidos/123?cliente=abc

O servidor receberá somente:

Referer: https://app.exemplo.com

Não recebe:

/pedidos/123?cliente=abc

Principais opções

Valor	Comportamento
no-referrer	Não envia o header Referer
origin	Envia apenas a origem, por exemplo https://app.exemplo.com
origin-when-cross-origin	Envia URL completa para mesma origem, mas só a origem para outros domínios
no-referrer-when-downgrade	Envia o referrer em requisições seguras, mas remove em downgrade de HTTPS para HTTP
same-origin	Envia o referrer apenas para requisições de mesma origem
strict-origin	Envia apenas a origem quando o nível de segurança é mantido
strict-origin-when-cross-origin	Envia URL completa na mesma origem e apenas origem em cross-origin seguro
unsafe-url	Envia URL completa, incluindo path e query string

A MDN documenta que a política de referrer controla quanta informação do Referer deve ser incluída nas requisições. Também lista diretivas como no-referrer, origin, same-origin, strict-origin-when-cross-origin e unsafe-url. (MDN Web Docs)

Diferença entre referrer e referrerPolicy

No Angular existem duas opções relacionadas:

referrer
referrerPolicy

Elas parecem parecidas, mas não são a mesma coisa.

referrer

Define qual referência será usada.

Exemplo:

this.http.get('/api/data', {
  referrer: 'about:client'
}).subscribe();

Segundo a documentação do Angular, referrer pode receber uma URL válida, uma string vazia '' para não enviar referrer, ou about:client para usar o comportamento padrão do navegador. (Angular)

Exemplo sem enviar referrer:

this.http.get('/api/data', {
  referrer: ''
}).subscribe();

referrerPolicy

Define a regra de quanto do referrer pode ser enviado.

Exemplo:

this.http.get('/api/data', {
  referrerPolicy: 'origin'
}).subscribe();

Nesse caso, mesmo que exista uma página completa de origem, apenas o domínio/origem será enviado.

Exemplo prático em service

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PedidoService {
  constructor(private readonly http: HttpClient) {}

  buscarPedidos() {
    return this.http.get('/api/pedidos', {
      referrerPolicy: 'no-referrer'
    });
  }

  enviarEventoAnalytics() {
    return this.http.post('/api/analytics', {
      event: 'page_view'
    }, {
      referrerPolicy: 'origin'
    });
  }
}

Quando usar no-referrer

Use no-referrer quando a API não precisa saber de onde a requisição veio.

Exemplo:

this.http.post('/api/pagamentos', payload, {
  referrerPolicy: 'no-referrer'
}).subscribe();

Bom para:

• requisições sensíveis;
• endpoints de pagamento;
• endpoints com dados pessoais;
• integrações externas;
• chamadas onde a origem da página não importa.

Quando usar origin

Use origin quando o servidor pode saber qual aplicação fez a chamada, mas não precisa saber a rota exata.

Exemplo:

this.http.get('/api/metricas', {
  referrerPolicy: 'origin'
}).subscribe();

Isso permite enviar:

Referer: https://app.exemplo.com

Mas evita enviar:

Referer: https://app.exemplo.com/clientes/123456/documentos?token=abc

Bom para:

• analytics;
• logs;
• auditoria leve;
• APIs internas;
• cenários onde o domínio de origem é útil.

Quando evitar unsafe-url

Evite isto:

this.http.get('/api/data', {
  referrerPolicy: 'unsafe-url'
}).subscribe();

O unsafe-url pode enviar URL completa, incluindo path e query string.

Isso pode vazar informações sensíveis como:

https://app.exemplo.com/reset-password?token=abc

ou:

https://app.exemplo.com/clientes/123456

Pegadinha: isso não é um header comum

Não tente fazer assim:

this.http.get('/api/data', {
  headers: {
    'Referrer-Policy': 'no-referrer'
  }
}).subscribe();

Isso não resolve o problema da requisição individual.

Referrer-Policy é normalmente uma política controlada pelo navegador. No Angular, o correto é usar a opção própria da requisição:

this.http.get('/api/data', {
  referrerPolicy: 'no-referrer'
}).subscribe();

Havia inclusive discussões antigas em que desenvolvedores tentavam configurar Referrer-Policy via headers, mas isso não alterava o comportamento do navegador para aquela request. (GitHub)

Relação com fetch

O referrerPolicy vem do modelo de configuração do fetch.

O Angular tem suporte ao withFetch(), que faz o HttpClient usar a API fetch em vez de XMLHttpRequest. A documentação do Angular diz que, por padrão, o HttpClient usa XMLHttpRequest, mas pode ser configurado com withFetch(). (Angular)

Exemplo:

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withFetch } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withFetch())
  ]
};

Exemplo comparando comportamentos

Página atual:

https://app.exemplo.com/clientes/10/pedidos/99?debug=true

Requisição:

this.http.get('https://api.exemplo.com/dados', {
  referrerPolicy: 'origin'
}).subscribe();

Header enviado:

Referer: https://app.exemplo.com

Agora com:

this.http.get('https://api.exemplo.com/dados', {
  referrerPolicy: 'no-referrer'
}).subscribe();

Header enviado:

// Nenhum Referer enviado

Agora com:

this.http.get('https://api.exemplo.com/dados', {
  referrerPolicy: 'unsafe-url'
}).subscribe();

Possível header enviado:

Referer: https://app.exemplo.com/clientes/10/pedidos/99?debug=true

Boas práticas

Situação	Política recomendada
API sensível	no-referrer
API interna comum	origin
Analytics	origin ou origin-when-cross-origin
Requisição para terceiro	no-referrer ou origin
Aplicação com dados sensíveis na URL	no-referrer
Precisa rastrear origem sem expor rota	origin

Recomendação prática

Para aplicações corporativas, uma política segura para a maioria dos casos é:

referrerPolicy: 'origin'

Ela mantém alguma rastreabilidade, mas evita expor rotas e query strings.

Para endpoints sensíveis, use:

referrerPolicy: 'no-referrer'

Exemplo com interceptor

Se quiser aplicar uma política padrão nas requisições, pode usar um interceptor.

import { HttpInterceptorFn } from '@angular/common/http';

export const referrerPolicyInterceptor: HttpInterceptorFn = (req, next) => {
  const clonedRequest = req.clone({
    referrerPolicy: 'origin'
  });

  return next(clonedRequest);
};

Registro:

import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { ApplicationConfig } from '@angular/core';
import { referrerPolicyInterceptor } from './referrer-policy.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([
        referrerPolicyInterceptor
      ])
    )
  ]
};

Para endpoints mais sensíveis, você pode sobrescrever localmente:

this.http.post('/api/pagamentos', payload, {
  referrerPolicy: 'no-referrer'
}).subscribe();

Como verificar no navegador

Abra o DevTools do navegador.

Vá em:

Network > Request > Headers

Procure por:

Referer

E também por:

Referrer Policy

Exemplo esperado com no-referrer:

Referrer Policy: no-referrer
Referer: não enviado

Exemplo esperado com origin:

Referrer Policy: origin
Referer: https://app.exemplo.com

Resumo

O referrerPolicy no Angular permite controlar a exposição da URL de origem em chamadas HTTP.

Em vez de deixar o navegador decidir automaticamente, você pode escolher se a API vai receber:

• a URL completa;
• apenas a origem;
• ou nenhuma informação de origem.

Na prática, isso ajuda a reduzir vazamento acidental de dados e dá mais controle sobre o tráfego HTTP do frontend.

---

---