Configure cabeçalhos de resposta HTTP no Edge Security Acceleration (ESA) para ative o compartilhamento de recursos de origem cruzada (CORS) e permitir que navegadores carreguem recursos de diferentes origens.
Por que configure o compartilhamento de recursos de origem cruzada
Aplicações web geralmente separam frontend e backend. Um frontend em http://example.com precisa de dados de uma API de backend em http://example.org/api. A política de mesma origem do navegador bloqueia essas requisições de origem cruzada e impede o funcionamento correto do frontend.
Uma política de CORS em um ponto de presença (POP) resolve esse problema. Ela permite que o navegador valide respostas de http://example.org/api e autoriza scripts de http://example.com a acessar os dados da resposta, garantindo que apenas origens autorizadas alcancem seus recursos.
Visão geral da solução
O CORS utiliza negociação de cabeçalhos HTTP entre o navegador e o servidor. Implantar a configuração em um POP do ESA processa a lógica de origem cruzada antes que as requisições cheguem à sua origem, oferecendo gerenciamento unificado de políticas na borda do ESA.
Iniciar requisição: A aplicação frontend em
http://example.comsolicita o recursohttp://example.com/index.html.Processar no POP: O POP do ESA verifica seu cache. Se houver conteúdo em cache, retorna-o diretamente. Caso contrário, busca no servidor de origem, armazena a resposta em cache e a retorna.
Responder do POP: O POP envia o conteúdo solicitado (o arquivo
index.html) ao cliente com status200 OK.Processar no cliente: O cliente executa o script contido no arquivo HTML.
Iniciar requisição de origem cruzada: O script do cliente envia uma requisição de origem cruzada,
GET http://example.org/api, que inclui o cabeçalho de requisiçãoOrigin:http://example.com.Processar requisição de origem cruzada no POP: O POP verifica se a requisição corresponde às condições da regra. Por exemplo, ele checa se o valor do cabeçalho
Originéhttp://example.com. Se as condições forem atendidas, o POP adiciona o cabeçalho CORSAccess-Control-Allow-Origin:http://example.comà resposta.Responder à requisição de origem cruzada: O POP retorna
200 OKpara a requisição de origem cruzada.Processar requisição de origem cruzada no cliente: O navegador verifica se o cabeçalho
Access-Control-Allow-Origincorresponde à origem da página (http://example.com). Em caso de correspondência, o navegador processa a resposta e exibe o conteúdo.
Exemplo de configuração
Se você usar o OSS como servidor de origem e configure o CORS tanto nos consoles do OSS quanto do ESA, a configuração do ESA substituirá as configurações de CORS do OSS.
Aplicar a todas as requisições
Caso de uso
Permitir que todas as requisições do seu site (example.com) acessem recursos de qualquer origem.
Etapas
No console do ESA, selecione Websites. Na coluna Website, clique em no site desejado.
No painel de navegação à esquerda, escolha . Na página Transform Rules, clique em na aba Modify Response Header. Defina Response Header Position como ESA to Client e clique em no botão Create Rule.
-
Na página Create Response Header Modification Rule, configure os parâmetros da seguinte forma:
Rule Name: Insira um nome personalizado para a regra, como
rule-cors-for-all.If requests match...: Selecione All Requests.
-
Then execute...: Configure os seguintes parâmetros:
Type: Selecione Static.
Operation: Selecione Add.
Response Header Name: Insira
Access-Control-Allow-Origin.Response Header Value: Insira
*.
Resultado
Para qualquer requisição de origem cruzada, o ESA adiciona o cabeçalho Access-Control-Allow-Origin: * à resposta, permitindo que o navegador exiba o recurso de origem cruzada.
Aplicar a requisições específicas
Caso de uso
Permitir acesso de origem cruzada quando o cabeçalho origin corresponder a um subdomínio de example.com via HTTP ou HTTPS. Por exemplo:
origin:http://www.example.comorigin:https://www.example.comorigin:http://image.example.comorigin:https://image.example.com
O valor do cabeçalho de resposta CORS deve corresponder ao cabeçalho origin presente na requisição.
Etapas de configuração
No console do ESA, selecione Websites. Na coluna Website, clique em no site desejado.
No painel de navegação à esquerda, escolha . Na página Transform Rules, clique em na aba Modify Response Header. Defina Response Header Position como ESA to Client e clique em no botão Create Rule.
-
Na página Create Response Header Modification Rule, configure os parâmetros da seguinte forma:
Rule Name: Insira um nome personalizado para a regra, como
rule-cors-origin.-
If requests match...: Para este exemplo, defina a condição como Header Value of origin matches regex ^https?://(?:a-zA-Z0-9?\.)+example\.com$.
Você também pode edite a expressão diretamente da seguinte forma:
(http.request.headers["origin"] matches "^https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+example\.com$")NotaSe o seu plano não oferecer suporte a correspondência com expressões regulares, use o operador is in e liste os valores permitidos para o cabeçalho origin.
Você também pode edite a expressão diretamente da seguinte forma:
(http.request.headers["origin"] in {"http://www.example.com" "https://www.example.com" "http://image.example.com" "https://image.example.com"})
-
Then execute...: Configure os seguintes parâmetros:
Type: Selecione Dynamic.
Operation: Selecione Add.
Response Header Name: Insira
Access-Control-Allow-Origin.Response Header Value: Insira
http.request.headers["origin"].
Resultado
Quando o cabeçalho origin em uma requisição de origem cruzada corresponder à regra, o ESA adiciona o cabeçalho Access-Control-Allow-Origin com o valor proveniente do cabeçalho Origin do cliente. O navegador então processa a resposta e exibe o recurso de origem cruzada.
