Ativar compartilhamento de recursos entre origens

Publicados: 2016-11-07

O que é o Compartilhamento de Recursos de Origem Cruzada (CORS) –

O compartilhamento de recursos entre origens é fundamental para tornar visíveis os recursos que estão ocultos. O Cross-Origin Resource Sharing (CORS) é uma especificação que permite o acesso verdadeiramente aberto através dos limites do domínio. O CORS permite que scripts da Web interajam mais abertamente com conteúdo fora do domínio original, levando a uma melhor integração entre os serviços da Web. O compartilhamento de recursos entre origens permite que recursos bloqueados, como fontes, em uma página da Web, sejam solicitados de outro domínio fora do domínio de origem do recurso.

O CORS define uma maneira pela qual um navegador e um servidor podem interagir para determinar se é seguro ou não permitir a solicitação de origem cruzada. Ele permite mais liberdade e funcionalidade do que solicitações puramente de mesma origem, mas é mais seguro do que simplesmente permitir todas as solicitações de origem cruzada.

Por que o CORS é importante?

O JavaScript e a programação da web cresceram aos trancos e barrancos ao longo dos anos, mas a política de mesma origem ainda permanece. Isso impede que o JavaScript faça solicitações além dos limites do domínio e gerou vários hacks para fazer solicitações entre domínios.

O CORS introduz um mecanismo padrão que pode ser usado por todos os navegadores para implementar solicitações entre domínios. A especificação define um conjunto de cabeçalhos que permitem que o navegador e o servidor se comuniquem sobre quais solicitações são (e não são) permitidas. CORS continua o espírito da web aberta, trazendo acesso à API para todos.

Ativar compartilhamento de recursos entre origens –

1. CORS no Apache

Para adicionar a autorização CORS ao cabeçalho usando o Apache, basta adicionar a seguinte linha dentro das seções <Directory> , <Location> <Files> ou <VirtualHost> da configuração do seu servidor (geralmente localizada em arquivos *.conf, como httpd.conf ou apache.conf), ou dentro de um arquivo .htaccess :

 Conjunto de cabeçalho Access-Control-Allow-Origin "*"

Para garantir que suas alterações estejam corretas, é altamente recomendável que você use

 apachectl -t

para verificar se há erros nas alterações de configuração. Depois que isso passar, pode ser necessário recarregar o Apache para garantir que suas alterações sejam aplicadas executando o comando

 sudo service apache2 recarregar

ou

 apachectl -k gracioso

Alterar cabeçalhos requer o uso de mod_headers. Mod_headers está habilitado por padrão no Apache, no entanto, você pode querer garantir que ele esteja habilitado executando

 cabeçalhos a2enmod

Nota : você também pode usar add em vez de set , mas esteja ciente de que add pode adicionar o cabeçalho várias vezes, então é mais seguro usar set.

2. CORS no App Engine

Para aplicativos baseados em Python no Google App Engine, o método self.response.headers.add_header() pode ser usado, como:

 class CORSEnabledHandler(webapp.RequestHandler):
  def get(self):
    self.response.headers.add_header("Acesso-Controle-Permitir-Origem", "*")
    self.response.headers['Content-Type'] = 'text/csv'
    self.response.out.write(self.dump_csv())

Para aplicativos baseados em Java, use resp.addHeader() :

 public void doGet(HttpServletRequest req, HttpServletResponse resp) {
  resp.addHeader("Acesso-Controle-Permitir-Origem", "*");
  resp.addHeader("Tipo de conteúdo", "texto/csv");
  resp.getWriter().append(csvString);
}

E para aplicativos baseados em Go, use w.Header().Add() :

 func doGet(w http.ResponseWriter, r *http.Request) {
  w.Header().Add("Acesso-Controle-Permitir-Origem", "*")
  w.Header().Add("Content-Type", "text/csv")
  fmt.Fprintf(w, csvData)
}

3. CORS em ASP.NET

Se você não tiver acesso para configurar o IIS, ainda poderá adicionar o cabeçalho por meio do ASP.NET adicionando a seguinte linha às suas páginas de origem:

 Response.AppendHeader("Acesso-Controle-Permitir-Origem", "*");

API da Web ASP.NET

ASP.NET Web API 2 suporta CORS.

Para habilitar o suporte a CORS, adicione os pacotes NuGet Microsoft.AspNet.WebApi.Cors ao seu projeto.

Adicione este código à sua configuração:

 Public static void Register (configuração HttpConfiguration)
{
    // Novo Código
    config.EnableCors();
}

Para habilitar solicitações de origem cruzada, adicione o atributo [EnableCors] ao controlador da API da Web ou ao método do controlador:

 [EnableCors(origins: "http://example.com", headers: "*", métodos: "*")]
classe pública TestController: ApiController
{
    // Métodos do controlador não mostrados...
}

Ativando globalmente

O método descrito acima também pode ser usado para habilitar o CORS na API sem anotar cada controlador:

 Public static void Register (configuração HttpConfiguration)
{
    var corsAttr = new EnableCorsAttribute("http://example.com", "*", "*");
    config.EnableCors(corsAttr);
}

4. CORS no AWS API Gateway

O Amazon API Gateway adiciona suporte para habilitação de CORS por meio de um botão simples no console do API Gateway. Infelizmente, esse botão tem um comportamento parcial, configurando CORS corretamente apenas para 200 respostas (portanto, não outros códigos de status HTTP) e ignorando o suporte ao cabeçalho Jquery. A melhor solução considerada até agora é evitar usar o botão CORS e definir as configurações manualmente.

Isso pode ser alcançado em algumas etapas:

1. Faça login no console do API Gateway

2. Crie todos os recursos REST que precisam ser expostos com seus métodos antes de configurar o CORS (se novos recursos/métodos forem criados após habilitar o CORS, essas etapas devem ser repetidas)

3. Selecione um recurso

4. Adicione o método OPTIONS, escolha como tipo de integração “mock”

5. Para cada Método de um recurso

6. Vá para o Método de Resposta

7. Adicione todos os métodos de resposta que devem ser suportados (ou seja, 200, 500 etc.)

8. Para cada código de resposta, defina Cabeçalhos de Resposta para
X-Solicitado-Com
Cabeçalhos-Controle-Acesso-Permitir-
Acesso-Controle-Permitir-Origem
Métodos de controle de acesso-permissão

9. Vá para Integration Response, selecione um dos códigos de resposta criados e, em seguida, Header Mappings

10. Insira valores padrão para cabeçalhos
exemplo:
X-Solicitado-Com: '*'
Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-API-Key,x-requested-with'
Controle de acesso-permitir-origem: '*'
Métodos de controle de acesso-permitir: 'POST,GET,OPTIONS'
Esta operação deve ser repetida para cada método, incluindo as opções recém-criadas

11. Implante a API em um estágio

12. Verifique usando http://client.cors-api.appspot.com/client se as solicitações CORS foram habilitadas com sucesso

5. CORS no Caddyserver

Para adicionar a autorização CORS ao cabeçalho usando o Caddy, basta adicionar a seguinte linha dentro do seu caddyfile:

 núcleos

Isso permitirá que todos os recursos sejam acessados ​​de todos os domínios.

Você também pode ser mais específico, ou seja, permitir recursos específicos para domínios específicos:

 cors /foo http://mysite.com http://anothertrustedsite.com

Existem muitas outras opções que você pode usar, aqui está um exemplo completo, conforme mostrado nos documentos do caddyserver:

 cors / {
  origem http://allowedSite.com
  origem http://anotherSite.org https://anotherSite.org
  métodos POST,PUT
  allow_credentials false
  max_idade 3600
  Allowed_headers X-Cabeçalho Personalizado, X-Foobar
  expostos_headers X-Algo-Especial,AlgoElse
}

6. CORS em Scripts CGI

Basta emitir a linha:

 Acesso-Controle-Permitir-Origem: *

.. como parte dos cabeçalhos do seu script CGI, por exemplo, em Perl (usando CGI.pm):

 imprimir cabeçalho (
  -type => 'texto/tartaruga',
  -content_location => 'meusdados.ttl',
  -access_control_allow_origin => '*',
);

7. CORS em scripts Perl PSGI

O módulo Plack::Middleware::CrossOrigin fornece uma implementação completa do lado do servidor CORS. Para permitir qualquer solicitação de qualquer local, basta adicionar isso ao seu construtor:

 habilite 'CrossOrigin', origens => '*';

8. CORS em Python

 print "Tipo de conteúdo: texto/tartaruga"
print "Content-Location: mydata.ttl"
print "Acesso-Controle-Permitir-Origem: *"

9. CORS no ExpressJS

Em seu aplicativo ExpressJS em node.js, faça o seguinte com suas rotas:

 app.use(function(req, res, next) {
  res.header("Acesso-Controle-Permitir-Origem", "*");
  res.header("Access-Control-Allow-Headers", "Origem, X-Requested-With, Content-Type, Accept");
  Next();
});

app.get('/', function(req, res, next) {
  // Manipula o get para esta rota
});

app.post('/', function(req, res, next) {
 // Manipula a postagem para esta rota
});

10. CORS no IIS6

Para habilitar o Microsoft IIS6 para CORS, execute as seguintes etapas:

  1. Abra o Gerenciador do Serviço de Informações da Internet (IIS)
  2. Clique com o botão direito do mouse no site para o qual deseja habilitar o CORS e vá para Propriedades
  3. Mude para a guia Cabeçalhos HTTP
  4. Na seção Cabeçalhos HTTP personalizados , clique em Adicionar
  5. Digite Access-Control-Allow-Origin como o nome do cabeçalho
  6. Digite * como o valor do cabeçalho
  7. Clique em OK duas vezes

11. CORS no IIS7

Para o Microsoft IIS7, mescle isso no arquivo web.config na raiz do seu aplicativo ou site:

 <?xml version="1.0" encoding="utf-8"?>
<configuração>
 <system.webServer>
   <httpProtocolo>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocolo>
 </system.webServer>
</configuração>

Se você ainda não tem um arquivo web.config , ou não sabe o que é, basta criar um novo arquivo chamado web.config contendo o trecho acima.

12. CORS no Meteor

Para adicionar autorização CORS a um aplicativo Meteor, use WebApp.connectHandlers do pacote webapp para personalizar os cabeçalhos HTTP.

 // Escuta as requisições HTTP recebidas, só pode ser usada no servidor
WebApp.rawConnectHandlers.use(function(req, res, next) {
  res.setHeader("Acesso-Controle-Permitir-Origem", "*");
  return próximo();
});

Use o argumento de path opcional para chamar o manipulador apenas para caminhos que correspondam a uma string especificada.

 // Escuta as requisições HTTP recebidas, só pode ser usada no servidor
WebApp.rawConnectHandlers.use("/public", function(req, res, next) {
  res.setHeader("Acesso-Controle-Permitir-Origem", "*");
  return próximo();
});

13. CORS no Nginx

A configuração Nginx a seguir habilita CORS, com suporte para solicitações de comprovação.

 #
# Configuração CORS aberta para nginx
#
local / {
     if ($request_method = 'OPÇÕES') {
        add_header 'Acesso-Controle-Permitir-Origem' '*';
        add_header 'Métodos de Controle de Acesso-Permitir' 'GET, POST, OPÇÕES';
        #
        # Cabeçalhos e cabeçalhos personalizados com vários navegadores *devem* estar bem, mas não estão
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        #
        # Diga ao cliente que esta informação pré-voo é válida por 20 dias
        #
        add_header 'Controle de Acesso-Max-Idade' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Conteúdo-Comprimento' 0;
        retornar 204;
     }
     if ($request_method = 'POST') {
        add_header 'Acesso-Controle-Permitir-Origem' '*';
        add_header 'Métodos de Controle de Acesso-Permitir' 'GET, POST, OPÇÕES';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
     if ($request_method = 'GET') {
        add_header 'Acesso-Controle-Permitir-Origem' '*';
        add_header 'Métodos de Controle de Acesso-Permitir' 'GET, POST, OPÇÕES';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
}

14. CORS em scripts Perl PSGI

O módulo Plack::Middleware::CrossOrigin fornece uma implementação completa do lado do servidor CORS. Para permitir qualquer solicitação de qualquer local, basta adicionar isso ao seu construtor:

 habilite 'CrossOrigin', origens => '*';

Este módulo também está disponível no Debian e Ubuntu como libplack-middleware-crossorigin-perl.

15. CORS em PHP

Se você não tiver acesso para configurar o Apache, ainda poderá enviar o cabeçalho de um script PHP. É um caso de adicionar o seguinte aos seus scripts PHP:

 <?php
 header("Acesso-Controle-Permitir-Origem: *");

Nota: como em todos os usos da função de cabeçalho PHP, isso deve ocorrer antes que qualquer saída seja enviada do servidor.

16. CORS no ColdFusion

Se você não tiver acesso para configurar seu servidor web, ainda poderá enviar o cabeçalho de um script Coldfusion. É um caso de adicionar o seguinte aos seus scripts Coldfusion:

Arquivo Baseado em Tag

 <cfheader name="Access-Control-Allow-Origin" value="*">

Arquivo baseado em script

 var resposta = getPageContext().getResponse();
response.setHeader("Acesso-Controle-Permitir-Origem","*");

Nota: Isso precisa ser definido antes que qualquer saída seja enviada do servidor.

17. CORS no Tomcat

O Apache Tomcat inclui suporte para CORS (a partir do Tomcat versão 7.0.41).

Aqui está um exemplo desses documentos que demonstram uma configuração CORS mínima:

 <filtro>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filtro>
<mapeamento de filtro>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapeamento>

18. CORS no Virtuoso

Essas configurações de instância/servidor requerem OpenLink Virtuoso Open Source (VOS) 6.1.3 ou posterior, ou Virtuoso Commercial Edition 06.02.3129

  1. No Virtuoso Conductor , vá para Web Application Server → Virtual Domains & Directories .
  2. Expanda o armazenamento de interface padrão.
  3. Clique em Novo diretório .
  4. Especifique o tipo de diretório virtual desejado ou escolha um diretório virtual existente para usar como modelo.
  5. Clique em Avançar .
  6. Especifique o valor do Caminho do Diretório .
  7. Defina as opções CORS .
    • Compartilhamento de recursos entre origens – contém um único asterisco curinga, ou seja, * ou uma origem, como http://example.com:8080 ou http://foo.example.com . Os scripts são autorizados a recuperar um recurso se esse recurso usar o curinga ou listar a origem do script. Para este exemplo, insira o seguinte URI único: http://demo.openlinksw.com
    • Caixa de seleção Rejeitar CORS não intencional – quando marcada e o aplicativo não substituir os cabeçalhos, as Origens não correspondidas serão rejeitadas enviando uma resposta vazia.
  8. Clique em Salvar alterações .

Para versões mais antigas do Virtuoso, qualquer uma das instruções de nível de aplicativo da Web abaixo pode ser usada. Qualquer aplicativo baseado em Virtuoso pode implementar a verificação CORS através das conhecidas funções HTTP http_request_header() e http_header(), por exemplo:

 <?vsp
IF (http_request_header (linhas, 'Origem', NULL) = 'http://host.org')
{
  http_header ('Acesso-Controle-Permitir-Origem: http://host.org\r\n');
}
SENÃO
{
  RETORNA;
}
-- Código adicional aqui ---
?>

19. CORS no WCF

Para o serviço WCF, você precisa desenvolver um novo comportamento e incluí-lo na configuração do endpoint:

Criar Inspetor de Mensagens
 classe pública CustomHeaderMessageInspector : IDispatchMessageInspector
            {
                Dicionário<string, string> requiredHeaders;
                public CustomHeaderMessageInspector (cabeçalhos do dicionário<string, string>)
                {
                    requiredHeaders = cabeçalhos ?? novo Dicionário<string, string>();
                }

                objeto público AfterReceiveRequest (ref System.ServiceModel.Channels.Message request, canal System.ServiceModel.IClientChannel, System.ServiceModel.InstanceContext instanceContext)
                {
                    retornar nulo;
                }

                public void BeforeSendReply(ref System.ServiceModel.Channels.Message response, object reflectionState)
                {
                    var httpHeader = reply.Properties["httpResponse"] as HttpResponseMessageProperty;
                    foreach (var item em requiredHeaders)
                    {
                        httpHeader.Headers.Add(item.Chave, item.Valor);
                    }           
                }
            }

Crie o comportamento do endpoint e use o Message Inspector para adicionar cabeçalhos

 classe pública EnableCrossOriginResourceSharingBehavior : BehaviorExtensionElement, IEndpointBehavior
            {
                public void AddBindingParameters(ServiceEndpoint endpoint, System.ServiceModel.Channels.BindingParameterCollection bindingParameters)
                {
           
                }

                public void ApplyClientBehavior(endpoint ServiceEndpoint, System.ServiceModel.Dispatcher.ClientRuntime clientRuntime)
                {
            
                }

                public void ApplyDispatchBehavior(ServiceEndpoint endpoint, System.ServiceModel.Dispatcher.EndpointDispatcher endpointDispatcher)
                {
                    var requiredHeaders = new Dicionário<string, string>();

                    requiredHeaders.Add("Acesso-Controle-Permitir-Origem", "*");
                    requiredHeaders.Add("Método de Solicitação de Controle de Acesso", "POST,GET,PUT,DELETE,OPTIONS");
                    requiredHeaders.Add("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");

                    endpointDispatcher.DispatchRuntime.MessageInspectors.Add(new CustomHeaderMessageInspector(requiredHeaders));
                }

                public void Validate (endpoint ServiceEndpoint)
                {
            
                }

                substituição pública Tipo BehaviorType
                {
                    get { return typeof(EnableCrossOriginResourceSharingBehavior); }
                }

                objeto de substituição protegido CreateBehavior()
                {
                    retornar novo EnableCrossOriginResourceSharingBehavior();
                }
            }

Registrar novo comportamento em web.config

 <extensões>
              <behaviorExtensions>        
                <add name="crossOriginResourceSharingBehavior" type="Services.Behaviours.EnableCrossOriginResourceSharingBehavior, Services, Version=1.0.0.0, Culture=neutral" />        
              </behaviorExtensions>      
            </extensions>

Adicionar novo comportamento à configuração de comportamento do endpoint

 <endpointBehaviors>      
            <nome do comportamento="jsonBehavior">
                <webHttp />
                <crossOriginResourceSharingBehavior />
            </comportamento>
            </endpointComportamentos>

Configurar ponto de extremidade

 <endpoint address="api" binding="webHttpBinding" behaviorConfiguration="jsonBehavior" contract="Service.IServiceContract" />

APIs que suportam CORS

  • Amazon S3
  • Destaque da DBpedia
  • API do Dropbox
  • API de gráfico do Facebook
  • API do Flickr
  • API do FourSquare
  • APIs do Google
  • Armazenamento em nuvem do Google
  • API do GitHub v3
  • API MediaWiki
  • prefix.cc
  • Publicar Meus Dados
  • igual a
  • API SoundCloud
  • API de pesquisa do Spotify
  • API do Congresso da Luz Solar
  • URIBurner
  • API do YouTube (postagem do blog)
  • API de documentos

Bibliotecas para implementar CORS

  • Filtro CORS, para aplicativos da Web Java
  • cors-python, para aplicativos web Python
  • Ative CORS em conteúdo estático no Google AppEngine.
  • RDF::LinkedData versão 0.16 e posterior
  • cors-filter: Uma implementação Java Servlet Filter do CORS do lado do servidor para contêineres da Web, pela eBay Software Foundation
  • add-cors-to-couchdb: CLI para adicionar suporte CORS ao CouchDB, para uso em bibliotecas cliente como PouchDB.

Obrigado por ler isso publicar. Esperando que este tutorial o ajude a habilitar o compartilhamento de recursos entre origens .

Por favor, dê seus comentários e observação abaixo.