AJAX, jQuery e como contornar a mesma política de origem

AJAX e domínios O post de hoje é dar uma breve introdução ao tema de AJAX com jQuery, bem como domínio de abordar a questão da Cruz e mostrar como você pode obter também solicitações AJAX em vários domínios através de truques. Antes de começarmos, há uma introdução ao tema no passe rápido novamente. Quem já se encaixam no tópico e está interessado apenas em o AJAX Cruz solução alternativa de domínio com segurança podem pular a primeira parte do artigo.

O que é AJAX e como ele funciona em jQuery?

AJAX é uma sigla e significaAsíncrono JavaScript And XML”. Contrariando a crença de algumas pessoas na Internet, não é uma linguagem de programação, mas prefiro um padrão, então uma forma de programação. Você pode recuperar o conteúdo da Web através de JavaScript, então de cliente no navegador usando AJAX. Eu digo conteúdo, porque apesar do nome “… Pode não apenas arquivos XML e XML”, mas também de JSON, texto sem formatação e outras concebível download de conteúdo.

solicitações de synchrounous E por que precisa de AJAX agora? Nos “primórdios” da Internet (e em páginas de Web maus programadas hoje), é uma página da Web no navegador cada vez recarregado, quando o conteúdo é obtido a partir do servidor. Como um exemplo simples, tomamos um formulário de login pequeno. (Avançar a seguinte nota: o mecanismo de logon subsequentes é apenas para ilustração.) Para logons seguros diferentes do programa! Mais eu escrevi aqui.)

Agora, poderíamos escrever um PHP script que olha como este:

Login

(Um demo do script pode ser encontrada aqui: demo-login. php)

O script carrega, ele exibe um formulário de login e no PHP seção do script verifica ver se a variável de post é definida como “passar”. Na primeira chamada do script, ele não é definido, então nada mais acontece. Digite uma senha e pressione “Enviar”, o script envia a entrada de forma a mesmo. Desta vez, a variável post por formulário utilizado. O script agora avalia a senha transmitida e verifica se ele é “seguro”.

Enviar conteúdo sem recarregar a página

Async JavaScript O script acima funciona, mas obtidos cada vez recarregado completamente a página. Pode ser ainda em um exemplo tão simples, em uma página da Web real, isto é mais do que chato e demorado. Agora, podemos evitar este problema usando AJAX.

Em vez de todo o formulário para se enviar e recarregar a página, podemos passar somente a senha para o servidor via AJAX e avaliar os resultados. Para fazer isso, nós primeiro separar a lógica da senha do formulário e trocá-lo para fora em um segundo script chamado logon-check.php:

Para simplificar, convertemos o modo de postagem para chegar. Agora, o script pode ser chamada com a senha e em seguida, retorna o status. A demonstração pode ser encontrada aqui: login-check.php. Uma chamada pode parecer com isso:

https://Code-Bude.net/downloads/Ajax-crossdomain/login-check.php?Pass=Secure

Agora temos um script separado para a validar entrada de senha. Agora queremos chamar isto em nosso formulário de login real usando AJAX. Para fazer a chamada, usamos a biblioteca jQuery e aqui de em particular da função “se”.

Login

Sobre o formulário de login, nós adicionamos a referência a biblioteca jQuery primeiro. Além disso, nós mudamos o botão do tipo “submit” em “botão” porque queremos mandar um formulário no sentido clássico. Finalmente, temos removido a parte do PHP e substituído com JavaScript. O script é por ‘clique’ para o evento click do botão “Verificar”. É que ele é pressionado por “Val ()” o valor do campo de senha na variável “passValue” armazenado. Finalmente, o valor através da função “get” para o nosso script de logon-check.php é enviado. A resposta dos scripts é apanhada na variável dados e emitida pela função “html” na marca span.
Uma demonstração da forma AJAX pode ser encontrada aqui: ajax.html de logon.

Ferramentas de desenvolvedor depuração AJAX Clique agora no botão de seleção, será enviada a senha para o fundo do script de verificação de logon e a resposta em seguida, emitido sem recarregar a página inteira de. Quem gostaria de saber o que está acontecendo em segundo plano, pressione a tecla F12 antes de clicar no ‘Cheque’ apenas enquanto ele está no navegador da Web. Isto irá abrir as ferramentas de desenvolvedor, que podem ser visto a retirada do pedido.

Além da captura de tela mostra como enviar a senha para o segundo script. A transferência através do parâmetro get é realçada em amarelo. Na guia de resposta (também amarelo marcado) a resposta do segundo script você pode olhar.

A questão irritante de domínios e o SOP

Chegamos agora ao tema dos domínios Ajax e, consequentemente, a chamada política de mesma origem (SOP =). A política de mesma origem é um conceito de segurança, que é implementado por todos os navegadores modernos e garante que apenas páginas da mesma origem (origem =) deve ser chamado por meio de AJAX. Isto irá, entre outras coisas o usuário ter certeza de que todo o conteúdo que ele oferece realmente vindo do lado, ele abriu seu Web site. Nosso exemplo acima não é afetado porque nossa chamada AJAX tem um caminho relativo (“logon-check.php”) e, portanto, mostra o mesmo domínio no mesmo servidor.

No entanto, nós estendemos nosso exemplo como este, todo o “drama” evidente. Supomos que temos um servidor de gerenciamento centralizado de senha, para ser usado por vários aplicativos da Web. Sobre este é agora também o script de logon-check.php, verifique se as senhas. Para nosso exemplo, este é o servidor que pode ser acessado em raffaelherrmann.de. O script seguinte endereço pode ser alcançado:

https://raffaelherrmann.de/demos/login-check.php?Pass=Secure

Agora, podemos personalizar o nosso script de logon na linha 14 e substitua o endereço:

ALT//$.Get (‘login-check.php’, {passar: passValue}, function(data) {//neu$.get (‘https://raffaelherrmann.de/demos/login-check.php’, {pass: passValue}, function(data){)

Ao chamar o nosso script de login ou clicando no botão, notaremos que nada faz. Um relance nos mostra no desenvolvedor do navegador que atingiu a política de mesma origem. Finalmente, no nosso script de login com “código-bude.net” em um domínio diferente do que o script de verificação de “raffaelherrmann.de”.
Uma demonstração pode ser vista aqui: login-ajax-sop.html

Como as imagens a seguir mostram a solicitação com status HTTP 200 sucedida em si, mas a consulta ainda estava bloqueada pelo navegador. O console de erro mostra a mensagem de erro de política de mesma origem.

AJAX mesma origem política exemplo-1 AJAX mesma origem política exemplo-2

Nós olhamos agora no final, como você pode ignorar o SOP e que há maneiras de usar o AJAX também domínios (através de múltiplos domínios).

AJAX de domínios com CORS

JavaScript cors Para trabalhar agora, mas em vários domínios, existem pelo menos duas versões. Versão 1, que é recomendado, é que definir um cabeçalho HTTP específico. Porque como vimos nas imagens, a solicitação para o servidor de raffaelherrmann.de ocorre, embora o SOP mudou. Isto acontece pela seguinte razão: é permitido o servidor solicitado através de AJAX com um cabeçalho específico para responder a demanda e a política de mesma origem não intervém. Este procedimento é chamado de “Cross-origem Resource Sharing” (curto: CORS) e baseia-se essencialmente o chamado “acesso-control-allow-origin”-cabeçalho. Para obter então executar o nosso script, precisamos perder o script de logon-check.php este cabeçalho.

Também temos usado ainda é um cabeçalho de segundo, o cabeçalho ‘-controle-permitir-métodos de acesso’, que especifica quais métodos a “trava”. O roteiro adaptado é agora aqui: login-seleção-cors.php

Nós personalizamos agora o alvo em nossa página de login para a nova versão dos scripts de logon, também sucede o login.

ALT//$.Get (‘https://raffaelherrmann.de/demos/login-check.php’, {passar: passValue}, function(data) {//neu$.get (‘https://raffaelherrmann.de/demos/login-check-cors.php’, {pass: passValue}, function(data){))

A demonstração de trabalho pode ser encontrada aqui: login-ajax-cors.html

Domínios AJAX com PHP “Proxy”

script de proxy A solução de nível exibida usando cabeçalhos CORS, no entanto, tem uma grande desvantagem: você precisa de acesso para o script a ser invocado. Em alguns casos, especialmente em um negócio de meio ambiente não é ou apenas sob alta carga administrativa. Nestes casos, permanece a possibilidade de um “proxy”. (Eu escrevo isto deliberadamente entre aspas, porque a seguinte solução significa que um servidor proxy de pleno direito, mas no sentido de um encapsula conexões de servidor de proxy.)

Deve acessar para que um arquivo em um servidor diferente, mas a política de mesma origem o proíbe, deixando a possibilidade de colocar um script no seu próprio servidor, que recupera os dados do servidor remoto e o envia para o servidor remoto. Aqui através da SOP será evitado porque o script AJAX então chama o script”proxy” no seu próprio servidor. O script de proxy obtida é executado no servidor e upload então quaisquer recursos, inclusive dos estrangeiro servidor de.

Um exemplo de tal um script de proxy, que se adapta ao exemplo de nosso hoje poderia ficar assim:

Eine Demo des Proxy-Scripts findet sich hier: proxy.php

Das Script ist schnell erklärt. Es nimmt den Parameter “pass” an und ruft mit diesem Parameter über die Funktion “file_get_contents” das entfernte login-check.php-Script auf. Auf diese Weise haben wir elegant das Same-Origin-Policy-Problem umgangen.

Eine Anmerkung zum Schluss: Das eben gezeigte Proxy-Script funktioniert natürlich nur für unser heutiges Beispiel und muss für den Einsatz in anderen Szenarien angepasst werden. Weiter sollte man sich bewusst sein, dass diese zweite Variante nicht immer auf Gegenliebe stößt, da sie die SOP umgeht. Schließlich ist einer der Zwecke der SOP auch, dass nicht ungefragt Daten von fremden Server geladen werden sollen. Aus großer Macht folgt auch große Verantwortung. Also nutzt das Wissen bitte mit dieser Mahnung im Hinterkopf!

Über den Autor: Dieser Artikel, sowie 363 andere Artikel auf code-bude.net, wurden von Raffael geschrieben. – Seit 2011 blogge ich hier über Programmierung, meine Software, schreibe Tutorials und versuche mein Wissen, so gut es geht, mit meinen Lesern zu teilen. (isset($_get[“pass”])){=”” $password=”$_GET[“pass”];” echo=”” file_get_contents(“http://raffaelherrmann.de/demos/login-check.php?pass=””?>Além disso, escrevo sobre temas de meus estudos sobre derwirtschaftsinformatiker.de. E-mail • Google + • Facebook • Twitter


0SHARESFacebookTwitterGoogleWhatsappRedditPocketStumbleuponPinterestXingMail