javascript - falta - Llamada de dominio cruzado AJAX

cross domain javascript

Question

Sé acerca de la política de dominio AJAX entre dominios. Así que no puedo simplemente llamar " http://www.google.com " a través de una solicitud de HTTP ajax y mostrar los resultados en algún lugar de mi sitio.

Lo intenté con dataType "jsonp", que realmente funcionaría, pero obtengo un error de sintaxis (obviamente porque los datos recibidos no tienen formato JSON)

¿Hay alguna otra posibilidad de recibir / mostrar datos de un dominio extranjero? iFrames sigue la misma política?

Answer 1

Aquí hay una manera fácil de cómo hacerlo, sin tener que usar nada sofisticado, o incluso JSON.

Primero, crea un script del lado del servidor para manejar tus solicitudes. Algo como http://www.example.com/path/handler.php

Lo llamará con parámetros, como este: ... / handler.php? Param1 = 12345 & param2 = 67890

Dentro de él, después de procesar los datos recibidos, se obtiene :

document.serverResponse(''..all the data, in any format that suits you..'');
// Any code could be used instead, because you dont have to encode this data
// All your output will simply be executed as normal javascript

Ahora, en el script del lado del cliente, use lo siguiente:

document.serverResponse = function(param){ console.log(param) }

var script = document.createElement(''script'');
script.src=''http://www.example.com/path/handler.php?param1=12345&param2=67890'';
document.head.appendChild(script);

El único límite de este enfoque es la longitud máxima de los parámetros que puede enviar al servidor. Pero, siempre puedes enviar múltiples solicitudes.

Answer 2

JSONP es la mejor opción, en mi opinión. Intente descubrir por qué obtiene el error de sintaxis. ¿Está seguro de que los datos recibidos no son JSON? Entonces, tal vez estés usando el API incorrectamente de alguna manera.

Otra forma que podría utilizar, pero no creo que se aplique en su caso, es tener un iFrame en la página que src está en el dominio que desea llamar. Haga que haga las llamadas por usted, y luego use JS para comunicarse entre el iFrame y la página. Esto omitirá el dominio cruzado, pero solo si puede tener el src del iFrame en el dominio al que desea llamar.

Answer 3

La única (fácil) forma de obtener datos entre dominios usando AJAX es usar un lenguaje del lado del servidor como el proxy como notó Andy E. Aquí hay una pequeña muestra de cómo implementar eso usando jQuery:

La parte jQuery:

$.ajax({
    url: ''proxy.php'',
    type: ''POST'',
    data: {
        address: ''http://www.google.com''
    },
    success: function(response) {
        // response now contains full HTML of google.com
    }
});

Y el PHP (proxy.php):

echo file_get_contents($_POST[''address'']);

Simple como eso. Solo tenga en cuenta lo que puede o no puede hacer con los datos raspados.

Answer 4

Lamentablemente (o afortunadamente) no. La política de dominios cruzados está ahí por una razón, si fuera fácil de evitar, entonces no sería muy efectiva como medida de seguridad. Además de JSONP, la única opción es realizar un proxy de las páginas utilizando su propio servidor .

Con un iframe, están sujetos a la misma política. Por supuesto, puede visualizar los datos de un dominio externo, simplemente no puede manipularlo.

Answer 5

Me enfrenté al mismo problema durante 2 días y encontré la solución, y es elegante después de buscar en Google mucho. Necesitaba xss Ajax para algunos clientes de widgets que extraen datastream de los sitios web de los niveles a mi aplicación Rails. así es como lo hice.

Answer 6

Puede usar YQL para hacer la solicitud sin necesidad de alojar su propio proxy. He hecho una función simple para que sea más fácil ejecutar comandos:

function RunYQL(command, callback){
     callback_name = "__YQL_callback_"+(new Date()).getTime();
     window[callback_name] = callback;
     a = document.createElement(''script'');
     a.src = "http://query.yahooapis.com/v1/public/yql?q="
             +escape(command)+"&format=json&callback="+callback_name;
     a.type = "text/javascript";
     document.getElementsByTagName("head")[0].appendChild(a);
}

Si tiene jQuery, puede usar $ .getJSON en su lugar.

Una muestra puede ser esto:

RunYQL(''select * from html where url="http://www.google.com/"'',
       function(data){/* actions */}
);

Answer 7

Puede usar la tecnología CORS para configurar ambos servidores (el servidor donde se ejecuta el Javascript y el servidor API externo)

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

ps: la respuesta https://.com/a/37384641/6505594 también sugiere este enfoque, y está abriendo el servidor API externo para que todos los demás lo llamen.

Answer 8

Si está utilizando un script php para obtener la respuesta del servidor remoto, agregue esta línea al principio:

header("Access-Control-Allow-Origin: *");

Answer 9

Tendrá que insertar dinámicamente una etiqueta de script en la página que hace referencia a los datos. Usando JSONP, puede ejecutar alguna función de devolución de llamada cuando el script se haya cargado.

La página de wikipedia en JSONP tiene un ejemplo conciso; la etiqueta de script:

<script type="text/javascript" src="http://domain1.com/getjson?jsonp=parseResponse">
</script>

devolvería los datos JSON envueltos en una llamada a parseResponse :

parseResponse({"Name": "Cheeso", "Rank": 7})

(según la configuración del script getjson en domain1.com)

El código para insertar la etiqueta dinámicamente sería algo así como:

var s = document.createElement("script");
s.src = "http://domain1.com/getjson?jsonp=parseResponse";
s.type = "text/javascript";
document.appendChild(s);

Answer 10

Uso este código para la llamada ajax de dominios cruzados, espero que ayude a más de uno aquí. Estoy usando la biblioteca Prototype y puedes hacer lo mismo con JQuery o Dojo o cualquier otra cosa:

Paso 1: crear un nuevo archivo js y poner esta clase dentro, lo llamé xss_ajax.js

var WSAjax = Class.create ({
    initialize: function (_url, _callback){
        this.url = _url ;
        this.callback = _callback ;
        this.connect () ;
    },
    connect: function (){
        var script_id = null;
        var script = document.createElement(''script'');
        script.setAttribute(''type'', ''text/javascript'');
        script.setAttribute(''src'', this.url);
        script.setAttribute(''id'', ''xss_ajax_script'');

        script_id = document.getElementById(''xss_ajax_script'');
        if(script_id){
            document.getElementsByTagName(''head'')[0].removeChild(script_id);
        }

        // Insert <script> into DOM
        document.getElementsByTagName(''head'')[0].appendChild(script);
    },
    process: function (data){
        this.callback(data) ;
    }

}) ;

Esta clase crea un elemento de script dinámico que src atribuye objetivos a su proveedor de datos JSON (JSON-P, de hecho, como su servidor distante debe proporcionar los datos en este formato :: call_back_function (// json_data_here) :: para que cuando se cree la etiqueta de script JSON será evacuado directamente como una función (hablaremos sobre pasar el nombre del método de devolución de llamada al servidor en el paso 2), el concepto principal detrás de esto es que los guiones como los elementos img no están afectados por las restricciones SOP.

Paso 2: en cualquier página html donde quiera extraer el JSON de forma asíncrona (lo llamamos AJAJ ~ Asincrónico JAvascript + JSON :-) en lugar de AJAX que utiliza el objeto XHTTPRequest) haga lo siguiente

//load Prototype first
//load the file you''ve created in step1


var xss_crawler = new WSAjax (
     "http://your_json_data_provider_url?callback=xss_crawler.process"
 ,   function (_data){
            // your json data is _data and do whatever you like with it 
        }) ;

¿Recuerdas la devolución de llamada en el paso 1? así que lo pasamos al servidor y devolverá el JSON embebido en ese método, por lo que en nuestro caso el servidor devolverá un código de JavaScript evarable xss_crawler.process (// the_json_data), recuerde que xss_crawler es una instancia de la clase WSAjax. El código del servidor depende de usted (si es suyo), pero la mayoría de los proveedores de datos de Ajax le permiten especificar el método de devolución de llamada en parámetros como lo hicimos nosotros. En Ruby on Rails acabo de hacer

render :json=>MyModel.all(:limit=>10), :callback => params[:callback],:content_type => "application/json"

y eso es todo, ahora puede extraer datos de otro dominio de sus aplicaciones (widgets, mapas, etc.), solo en formato JSON, no lo olvide.

Espero que haya sido útil, gracias por su paciencia :-), paz y perdón por el formato del código, no funciona bien

Answer 11

después de investigar un poco, la única "solución" a este problema es llamar:

if($.browser.mozilla)
   netscape.security.PrivilegeManager.enablePrivilege(''UniversalBrowserRead'');

esto le preguntará a un usuario si permite que un sitio web continúe. Después de que confirme eso, todas las llamadas ajax independientemente de su tipo de datos se ejecutarán.

Esto funciona para los navegadores de mozilla, en IE <8, un usuario tiene que permitir una llamada de dominio cruzado de manera similar, alguna versión necesita configurarse dentro de las opciones del navegador.

chrome / safari: hasta ahora no he encontrado una bandera de configuración para esos navegadores.

usar JSONP como tipo de datos sería bueno, pero en mi caso no sé si un dominio al que necesito acceder admite datos en ese formato.

Otra posibilidad es utilizar HTML5 postMessage, que también funciona con dominios cruzados, pero no puedo permitir que mis usuarios sean condenados a navegadores HTML5.