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:
Habilitando o CORS no servidor:
Access-Control-Allow-Origin: *
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
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;
...
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.