Introduzindo XDR (solicitação entre domínios)

  • Artigo

Novidade no Windows Internet Explorer 8

Com o recurso "XDR" (solicitação entre domínios) no Internet Explorer 8, os desenvolvedores podem criar cenários de agregação de dados entre sites. Semelhante ao objeto XMLHttpRequest, mas com um modelo de programação mais simples, essa solicitação, denominada XDomainRequest, é a maneira mais fácil de fazer solicitações anônimas para sites de terceiros que oferecem suporte para XDR e aceitam tornar seus dados disponíveis entre domínios. Três linhas de código o ajudarão a fazer solicitações básicas entre sites. Isso assegurará que a agregação de dados para sites públicos, como blogs ou outros aplicativos de redes sociais, será simples, segura e rápida.

Este tópico contém as seções a seguir.

  • Plano de Fundo
  • Documentação da API
  • Exemplo de código
  • Tópicos relacionados

Plano de Fundo

Os navegadores da Web têm uma diretiva de segurança denominada diretiva de origem de mesmo site, que impede que as páginas da Web acessem dados de outro domínio. Com frequência, os sites contornam essa diretiva fazendo com que o servidor solicite conteúdo do servidor de outro site no back-end, evitando a verificação no navegador. O diagrama a seguir ilustra esse processo para um site de mashup típico e o Internet Explorer 7 e versões anteriores.

Dd573303.xdr1.gif

No Internet Explorer 8, as páginas da Web podem simplesmente fazer uma solicitação de dados entre domínios no navegador usando o novo objeto XDomainRequest, em vez de uma solicitação de servidor para servidor. O diagrama a seguir ilustra uma solicitação entre domínios no Internet Explorer 8.

Dd573303.xdr2.gif

As solicitações entre domínios requerem o consentimento mútuo entre a página da Web e o servidor. Você pode iniciar uma solicitação entre domínios na página da Web criando um objeto XDomainRequest com base no objeto window e abrindo uma conexão com um determinado domínio. O navegador solicitará dados do servidor de domínio enviando um cabeçalho Origin com o valor da origem. Ele somente concluirá a conexão se o servidor responder com um cabeçalho Access-Control-Allow-Origin de * ou a URL exata da página solicitante. Esse comportamento faz parte da estrutura de rascunho do Web Application Working Group do W3C (World Wide Web Consortium) na comunicação entre domínios do lado cliente com a qual o objeto XDomainRequest se integra.

Por exemplo, uma página ASP (Active Server Pages) do servidor talvez inclua o cabeçalho de resposta a seguir.

<% Response.AddHeader("Access-Control-Allow-Origin","*") %>

Observação de segurança Alerta de segurança  Para proteger os dados do usuário, as solicitações entre domínios são anônimas, o que significa que os servidores não podem descobrir facilmente quem está solicitando os dados. Assim, você só vai querer solicitar e responder com dados entre domínios que não sejam confidenciais, nem pessoalmente identificáveis.

Documentação da API

O código JavaScript a seguir introduz o objeto XDomainRequest e seus eventos, propriedades e métodos. A página de referência XDomainRequest tem mais detalhes do que os listados aqui.

// Creates a new XDR object.
xdr = new XDomainRequest();  

// Indicates there is an error and the request cannot be completed. 
xdr.onerror = alert_error;
                        
// The request has reached its timeout. 
xdr.ontimeout = alert_timeout;
                        
// The object has started returning data.
xdr.onprogress = alert_progress;
                        
// The object is complete. 
xdr.onload = alert_loaded;

// Sets the timeout interval.
xdr.timeout = timeout;

// Gets the content-type header in the request.
var content_type = xdr.contentType;

// Gets the body of the response.
var response = xdr.responseText;
                        
// Creates a connection with a domain's server. 
xdr.open("get", url);
 
// Transmits a data string to the server. 
xdr.send();

// Terminates a pending send.
xdr.abort();

Exemplo de código

O XDR tem dois componentes: um lado de cliente que solicita dados para uma URL entre domínios e um lado de servidor que responde com o cabeçalho Access-Control-Allow-Origin de * ou a URL exata da página solicitante, além dos dados, que o Internet Explorer torna disponíveis para o domínio solicitante após a execução das verificações de segurança.

Este exemplo de página usa uma URL e faz uma solicitação get. O botão Read chamará um método para saída dos dados de resposta se você quiser. O primeiro exemplo de código a seguir é a página solicitante.

Observação  Para demonstrar corretamente o XDR, você deve copiar esta página em um servidor Web em outro domínio. Você também pode habilitar os Serviços de Informações da Internet (IIS) da Microsoft no seu computador e hospedá-los localmente de dentro de C:\inetpub\wwwroot. Para obter mais informações sobre como instalar o IIS, procure "IIS" em Ajuda e Suporte no menu Iniciar.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Internet Explorer 8 - Cross-domain Request Code Sample</title>
<script type="text/javascript">
    var xdr;

    function read_data()
    {
        var output = document.getElementById('text_response');
        if(output)
        {
        // To view the responseText on the page, click the Read button. 
            output.innerText = xdr.responseText;
        }

        // The Read button also displays the content type and length of 
        // response in alerts.  
        alert("Content-type: " + xdr.contentType);
        alert("Length: " + xdr.responseText.length);
    }

    function alert_error()
    {
        alert("XDR onerror");
    }

    function alert_timeout()
    {
        alert("XDR ontimeout");
    }

    function alert_loaded()
    {
        alert("XDR onload");
        alert("Got: " + xdr.responseText);
    }

    function alert_progress()
    {
        alert("XDR onprogress");
        alert("Got: " + xdr.responseText);
    }

    function req_abort()
    {
        if(xdr)
        {
            xdr.abort(); // Abort XDR if the Stop button is pressed. 
        }
    }

    function req_init()
    {
        var url = 
        document.getElementById('input_url').value;
        var timeout = 
            document.getElementById('input_timeout').value;
        if (window.XDomainRequest) // Check whether the browser supports XDR. 
        {
            xdr = new XDomainRequest(); // Create a new XDR object.
            if (xdr)
            {
                // There is an error and the request cannot be completed. 
                // For example, the network is not available.
                xdr.onerror     = alert_error;
                        
                // This event is raised when the request reaches its timeout. 
                xdr.ontimeout   = alert_timeout;
                        
                // When the object starts returning data, the onprogress event 
                // is raised and the data can be retrieved by using responseText.
                xdr.onprogress  = alert_progress;
                       
                // When the object is complete, the onload event is raised and 
                // the responseText ensures the data is available. 
                xdr.onload      = alert_loaded;

                xdr.timeout     = timeout;
                        
                // The URL is preset in the text area. This is passed in the 
                // open call with a get request.
                xdr.open("get", url);
                        
                // The request is then sent to the server.  
                xdr.send();
            }
            else
            {
                alert('Failed to create new XDR object.');
            }
        }
        else
        {
            alert('XDR does not exist.');
        }
    }

</script>
</head>

<body>

<div class="body">
	<h1>Internet Explorer 8 - Cross-domain Request Demo</h1>
	<form action="">
		<!-- Assign URL and timeout values from their text boxes to variables. -->
		<p>URL:	<input id="input_url" type="text" 
		value="http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/Ajax/xdomain.response.movies.aspx"
		style="width: 700px"></p>
		
		<p>Timeout: <input id="input_timeout" type="text" value="10000"></p>
		
		<p><input onclick="req_init()" type="button" value="Get">&nbsp;&nbsp;&nbsp;
		<input onclick="req_abort()" type="button" value="Abort">&nbsp;&nbsp;&nbsp;
		<input onclick="read_data()" type="button" value="Read"></p>
	</form>
	<div id="text_response">
	</div>
</div>

</body>

</html>

Show Me

Clique no botão Mostre-me para experimentar. Observe os dois campos e os três botões:

  • O campo URL está predefinido com uma URL para a qual a página enviará a solicitação get. A URL do arquivo é http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/Ajax/xdomain.response.movies.aspx.
  • O campo Timeout está predefinido com um valor de tempo limite de 10.000 milissegundos (10 segundos).
  • O botão Get envia a solicitação get para a URL especificada.
  • O botão Stop anula a solicitação get.
  • O botão Read lê o texto da resposta, escreve-o na página e lê e exibe o tipo de conteúdo e o comprimento.

O segundo exemplo de código é a página de destino, referenciada na página solicitante. Nesse caso, a página de destino contém uma lista de dados de filmes.

<% Response.AddHeader("Access-Control-Allow-Origin","*") %>
movieID|movieName|actor|genre
1|Fistful of Dollars|Clint Eastwood
2|Mission Impossible|Tom Cruise|Action
3|Enforcer|Clint Eastwood|Love Story
4|Gauntlet|Clint Eastwood
5|LawnMower Man|John Curtis|Drama
6|The Shining|Jack Nicholson|Drama
7|Dirty Harry|Clint Eastwood|Make my day
8|Two mules for Sister Sarah|Clint Eastwood
9|Hard to Kill|Stephen Segal|Action
10|Top Gun|Tom Cruise|High Intense Action

Tópicos relacionados