27

Eu tenho duas aplicações em domínios diferentes, e preciso realizar uma requisição Ajax entre elas via POST ou GET de forma cross-domain.

Qual seria a maneira mais segura de implementar isto em JavaScript, sem fazer uso de nenhuma API ou framework de uma forma que funcione em todos os navegadores (cross-browser)?

1

3 Respostas 3

28

As duas principais opções são o CORS (compartilhamento de recursos de origem cruzada) e o JSONP (JSON com padding). Ambas necessitam de algum suporte do servidor (na forma de cabeçalhos de requisição ou formatos de resposta suportados), mas o CORS não precisa de nada em especial no lado cliente (exceto um browser que dê suporte a ele - o que é fato em todos os navegadores modernos).

Cross-Origin Resource Sharing

Conforme explicado por @Tiago Crizanto, CORS consiste no servidor enviar o header Access-Control-Allow-Origin junto às repostas às requisições. Tem uns detalhes chatos (preflight, etc) mas isso em geral é o próprio browser que cuida. Tudo o que seu código JavaScript tem de fazer é uma requisição Ajax normal, tal como explicado na sua outra pergunta.

(Nota: segundo esse tutorial [em inglês], algumas versões do IE podem precisar que se use XDomainRequest em vez do tradicional XMLHttpRequest; não tenho experiência suficiente para dar mais detalhes, então sugiro observá-lo caso precise dar suporte a navegadores antigos)

Exemplos:

  1. Habilitando o CORS no servidor:

    Access-Control-Allow-Origin: *
    
  2. Habilitando o CORS no servidor somente para domínios específicos (i.e. só o domínio example.com e example.net poderá enviar requisições Ajax para ele):

    Access-Control-Allow-Origin: http://example.com http://example.net
    
  3. Habilitando o envio de cookies. Por padrão, quando se faz uma requisição Ajax para outro domínio os cookies (por exemplo, de autenticação) não são incluídos. Colocar esse cabeçalho fará com que isso seja feito (cuidado: pode ter implicações na segurança do seu site).

    Access-Control-Allow-Credentials: true
    

    e no JavaScript:

    var req = createXMLHTTPObject();
    req.withCredentials = true;
    ...
    
  4. Expondo headers adicionais ao código JavaScript (por padrão, apenas os headers Cache-Control, Content-Language, Content-Type, Expires, Last-Modified e Pragma estão visíveis para o código cliente):

    Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
    

A vantagem está na maior segurança: os dados do servidor remoto são enviados como dados mesmo, não código, de modo que você pode dar a eles o tratamento mais adequado. A desvantagem é que navegadores mais antigos podem não oferecer suporte a ele (segundo o caniuse.com, tirando o Opera Mini todo browser em sua versão corrente o aceita; IE8 e IE9 dão suporte parcial, e acredito que IE7 pra trás não dê suporte).

JSON with Padding

Essa técnica na minha opinião é mais uma "gambiarra" que uma solução propriamente dita - mas é popular o bastante para ser suportada nas principais frameworks web (como o jQuery), e antes do CORS era uma das únicas maneiras de fazer isso sem recorrer a plugins externos ou funcionalidades específicas de um navegador. É simples de implementar, e funciona em qualquer navegador [que possua JavaScript], embora não seja propriamente uma solução "segura" (i.e. só deve ser usado se o site para onde se faz a requisição é confiável).

O JSONP se aproveita do fato que algumas tag são isentas da política de mesma origem (Same-Origin Policy) - dentre elas a script. Como o JSON é um formato popular de transferência de dados, e o mesmo é um subconjunto dos literais de objetos de JavaScript, poderia-se transmitir os dados desse tipo:

{"Name": "Foo", "Id" : 1234, "Rank": 7}

usando esse formato:

minhaFuncao({"Name": "Foo", "Id" : 1234, "Rank": 7});

Para isso, basta criar uma tag script especificando qual função você quer que seja chamada (o equivalente ao callback do Ajax) e colocar a requisição no atributo src. Exemplo (na prática, use o formato suportado pelo seu servidor):

var script = document.createElement('script');
script.src = 'http://example.com/jsonp?callback=minhaFuncao'; // + outros parâmetros
document.getElementsByTagName('head')[0].appendChild(script);

E no servidor, basta serializar sua resposta como JSON e depois "envolvê-la" no callback especificado. Exemplo (Django):

objeto = {"Name": "Foo", "Id" : 1234, "Rank": 7}
codificado_json = json.dumps(objeto)
callback = request.GET["callback"]                  # ex.: "minhaFuncao"
resposta = callback + "(" + codificado_json + ");"  #      "minhaFuncao({...})
return HttpResponse(resposta, mimetype="text/javascript")

A vantagem está na maior compatibilidade com todo tipo de browser (ele não precisaria sequer dar suporte a Ajax). A desvantagem está no requisito de confiabilidade: o valor retornado pelo servidor é um código JavaScript comum, e que executa no mesmo contexto da página principal. Isso significa que, se o servidor enviar um código malicioso em vez do JSONP esperado, esse código poderá fazer simplesmente o que quiser na sua página (porém limitado àquilo que está acessível via JavaScript, o que é praticamente tudo, mas exclui coisas tipo cookies HTTP-ONLY). Ou seja, seu site estará exposto a uma vulnerabilidade XSS (Cross-site scripting) - o que pode ou não ser "contornável", mas em geral é uma situação a ser evitada sempre que possível.

2
  • Obrigado pela resposta completa ;)
    – everag
    Commented 3/02/2014 às 20:35
  • E à propósito, a parte sobre Access-Control-Allow-Credentials me ajudou a resolver outro problema!
    – everag
    Commented 4/02/2014 às 18:11
5

Cara... Eu tive esse problema faz um tempo. As opções que encontrei foram:

1 Configurar o iis para permitir requisições cross-domain; (No meu caso não tinha esta opção, por isso não testei)

2 Fazer a requisição ajax normalmente e modificar o header http no c# (caso vc esteja utilizando o .NET. Tem como fazer um php também):

Response.AppendHeader("Access-Control-Allow-Origin", "*");

https://stackoverflow.com/questions/15534640/ajax-origin-localhost-is-not-allowed-by-access-control-allow-origin

3 Procurei uma solução em js puro mas não achei. A solução que encontrei foi utilizando jquery (jsonp). Não precisa fazer nenhuma das alterações acima.

$.ajax({
     type : "GET",
     dataType : "jsonp",
     url : "URL",
     success: function(data){

     }
});
5
  • Qual a diferença entre suas opções 1 e 2? Em outras palavras, "configurar o iis para permitir requisições cross-domain" não é a mesma coisa que fazer ele [automaticamente] colocar o header Access-Control-Allow-Origin? Ou é outra coisa?
    – mgibsonbr
    Commented 30/01/2014 às 16:57
  • Alterar o cabeçalho pelo código (Response.AppendHeader("Access-Control-Allow-Origin", "*");) é uma opção quando você não tem acesso as configurações do IIS. Commented 30/01/2014 às 17:10
  • jQuery é uma API terceira... Commented 30/01/2014 às 17:21
  • 2
    @GabrielGartz jQuery facilita o uso de JSONP, mas não é necessário para tal. Estou escrevendo uma resposta com mais detalhes, em breve eu posto aqui.
    – mgibsonbr
    Commented 30/01/2014 às 17:23
  • 1
    Só pra lembrar que JSONP faz requisições apenas em GET, pois adiciona no DOM o tag SCRIPT, acho que o ideal era alguém achar uma matéria que fale do assunto pra esclarecer essas coisas pro rapaz da pergunta. Commented 30/01/2014 às 17:25
3

A solução habitual para pegar um recurso do servidor dinamicamente sem usar JQuery ou outras API, é criar o tag script e adicionar na seção head da página, em que você aponta o atributo src para o URL do recurso que pretende obter.

Esse URL é de um script de JavaScript normalmente gerado pelo servidor com código que retorna valores ou executa código para fazer a ação que pretende. Isso serve para fazer enviar requisições pelo método GET.

Uma alternativa que serve para enviar requisições pelo método POST, inclusivé enviar formulários até fazendo upload de arquivos, o de ter um iframe escondido com um dado nome. Aí você tem um formulário que você altera o atributo do target para o nome do iframe. Assim quando o formulário é enviado, o resultado carrega no iframe e a página toda não é recarregada.

Nesse iframe você pode até retornar HTML com JavaScript que executa código que faz alguma coisa útil para a sua página como retornar dados, mudar mensagens na página, etc..

Estas soluções funcionam com métodos GET e POST, podem funcionar em cross-domain, não requerem browser que suport AJAX 2 e não requere nenhuma API. Em tempos escrevi um artigo sobre isso para explicar como fazer upload de arquivos e mostrar o progresso do upload com PHP no lado do servidor.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .