JSONP

Also known as JSON with Padding

técnica de comunicación utilizada en programas JavaScript que se ejecutan en navegadores web

Article · Español

JSONP o JSON-P (JSON con relleno) es una técnica de JavaScript para solicitar datos cargando una etiqueta <script></code>. Fue propuesto por Bob Ippolito en 2005.<a href="#cite_note-1">[1]</a> JSONP permite compartir datos sin pasar por la <a href="/wiki/Pol%C3%ADtica_del_mismo_origen" title="Política del mismo origen">política del mismo origen</a>, que no permite ejecutar código <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a> para leer elementos del <a href="/wiki/Document_Object_Model" title="Document Object Model">Modelo de Objetos de Documento</a> (DOM) o datos <a href="/wiki/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> obtenidos desde fuera del sitio de origen de la página. El sitio de origen se indica mediante una combinación de <a href="/wiki/Identificador_de_recursos_uniforme" title="Identificador de recursos uniforme">esquema URI, nombre de host y número de puerto</a> . <div id="toc" class="toc" role="navigation" aria-labelledby="mw-toc-heading"><input type="checkbox" role="button" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none" /><div class="toctitle" lang="es" dir="ltr"><h2 id="mw-toc-heading">Índice</h2><label class="toctogglelabel" for="toctogglecheckbox"></label></div><ul><li class="toclevel-1 tocsection-1"><a href="#Funcionalidad">1 Funcionalidad</a></li><li class="toclevel-1 tocsection-2"><a href="#Inyección_de_elementos_de_script">2 Inyección de elementos de script</a></li><li class="toclevel-1 tocsection-3"><a href="#Preocupaciones_de_seguridad">3 Preocupaciones de seguridad</a><ul><li class="toclevel-2 tocsection-4"><a href="#Código_de_terceros_no_confiable">3.1 Código de terceros no confiable</a></li><li class="toclevel-2 tocsection-5"><a href="#Diferencias_de_espacios_en_blanco">3.2 Diferencias de espacios en blanco</a></li><li class="toclevel-2 tocsection-6"><a href="#Devolución_de_llamada_de_manipulación_de_nombre_y_ataque_de_descarga_de_archivo_reflejado">3.3 Devolución de llamada de manipulación de nombre y ataque de descarga de archivo reflejado</a></li><li class="toclevel-2 tocsection-7"><a href="#Cross-site_request_forgery">3.4 Cross-site request forgery</a></li><li class="toclevel-2 tocsection-8"><a href="#Rosetta_Flash">3.5 Rosetta Flash</a></li></ul></li><li class="toclevel-1 tocsection-9"><a href="#Historia">4 Historia</a></li><li class="toclevel-1 tocsection-10"><a href="#Véase_también">5 Véase también</a></li><li class="toclevel-1 tocsection-11"><a href="#Referencias">6 Referencias</a></li><li class="toclevel-1 tocsection-12"><a href="#Enlaces_externos">7 Enlaces externos</a></li></ul></div><h2>Funcionalidad[<a href="/w/index.php?title=JSONP&action=edit&section=1" title="Editar sección: Funcionalidad">editar</a>]</h2>El elemento HTML <code><script></code> generalmente puede ejecutar código JavaScript recuperado de orígenes externos. Sin embargo, los servicios que respondieron con datos <a href="/wiki/JSON" title="JSON">JSON</a> puros no pueden compartir datos de orígenes externos antes de la adopción de CORS (<a href="/wiki/Intercambio_de_recursos_de_origen_cruzado" title="Intercambio de recursos de origen cruzado">intercambio de recursos de origen cruzado</a>). Por ejemplo, una solicitud a un servicio externo <code>http://server.example.com/Users/1234</code> puede devolver un registro de una persona llamada Alice en el formato JSON. La sintaxis JSON es coherente con la sintaxis de objetos de JavaScript: <div class="mw-highlight mw-highlight-lang-json mw-content-ltr mw-highlight-lines" dir="ltr"><pre>{ "Name": "Alice", "Id": 1234, "Rank": 7}</pre></div> Sin soporte para CORS, un intento de usar los datos entre dominios da como resultado un error de JavaScript: <div class="mw-highlight mw-highlight-lang-html mw-content-ltr mw-highlight-lines" dir="ltr"><pre><script type="application/javascript" src="http://server.example.com/Users/1234"></script></pre></div> El navegador descargará el archivo apuntado dentro de la etiqueta <code><script></code>, evaluará su contenido, malinterpretará los datos JSON sin procesar como un bloque y arrojará un error de sintaxis. Incluso si los datos se interpretaran como un literal de objeto de JavaScript, JavaScript no podría acceder a él cuando se ejecutara en el navegador, ya que sin una asignación variable, los literales de objeto son inaccesibles. En el patrón de uso JSONP, la solicitud de URL señalada por el atributo <code>src</code> en el elemento <code><script></code> devuelve datos JSON, con un código JavaScript (generalmente una llamada a función) envuelto alrededor de él. Esta "<a href="/wiki/Carga_%C3%BAtil_(inform%C3%A1tica)" title="Carga útil (informática)">carga útil</a> envuelta" es interpretada por el navegador. De esta manera, una función que ya está definida en el entorno JavaScript puede manipular los datos JSON. A continuación se muestra una solicitud y respuesta JSONP típica. La llamada a la función <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" id="" style="" dir="ltr">parseResponse</code> es la "P" de JSONP: el "relleno" o "prefijo" alrededor del JSON puro.<a href="#cite_note-2">[2]</a> Para que JSONP funcione, un servidor debe entregar una respuesta que incluya la función JSONP. JSONP no funciona con resultados con formato JSON. El cliente y el servidor deben acordar la invocación de la función JSONP que se devuelve y la carga útil que recibe la función. Por convención, el servidor que proporciona los datos JSON ofrece al sitio web solicitante el nombre de la función JSONP, generalmente utilizando el nombre jsonp o <a href="/wiki/Callback_(inform%C3%A1tica)" class="mw-redirect" title="Callback (informática)">devolución de llamada</a> como parámetro de cadena de consulta con nombre, en su solicitud al servidor: <code><script src="<nowiki><a rel="nofollow" class="external free" href="http://server.example.com/Users/1234?callback=parseResponse">http://server.example.com/Users/1234?callback=parseResponse</a></nowiki>"> </script>. En este ejemplo, la carga útil recibida sería: parseResponse({"Name": "Alice", "Id": 1234, "Rank": 7});