
JSONP
Sign in to saveAlso known as JSON with Padding
técnica de comunicación utilizada en programas JavaScript que se ejecutan en navegadores web
Described at
Remote JSON - JSONP
bob.ippoli.to →The browser security model dictates that XMLHttpRequest, frames, etc. must have the same domain in order to communicate. That's not a terrible idea, for security reasons, but it sure does make distributed (service oriented, mash-up, whatever it's called this week) web development suck. Needs infrastructure (can't run a serverless client) and you get double-taxed on bandwidth and latency (remote - proxy - client). Remote host needs to deploy a crossdomain.xml file, Flash is relatively proprietary and opaque to use, requires learning a one-off moving target programming langage. I'm proposing a new technology agnostic standard methodology for the script tag method for cross-domain data fetching: JSON with Padding , or simply JSONP . The client decides on the arbitrary prepended text by using a query argument named jsonp with the text to prepend. Simple! With an empty jsonp argument, the result document is simply JSON wrapped in parentheses. Let's take the del.icio.us JSON API as an example. This API has a "script tag" variant that looks like this: See, because we're wrapping with parentheses, a JSONP request can translate into a function call or a plain old JSON literal. All the server needs to do differently is prepend a little bit of text to the beginning and wrap the JSON in parentheses! Now, of course, you'd have libraries like MochiKit , Dojo , etc. abstracting JSONP so that you don't have to write the ugly DOM script tag insertion yourself, etc. Of course, this just solves the standardization problem. Your page is still toast if the remote host decides to inject malicious code instead of JSON data. However, if implemented, it'd save a lot of developers some time and allow for generic abstractions, tutorials, and documentation to be built.
Excerpt from a page describing this subject · 4,471 chars · not written by Vinony
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.<sup id="cite_ref-1" class="reference separada"><a href="#cite_note-1"><span class="corchete-llamada">[</span>1<span class="corchete-llamada">]</span></a></sup> 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> . </p><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><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div><ul><li class="toclevel-1 tocsection-1"><a href="#Funcionalidad"><span class="tocnumber">1</span> <span class="toctext">Funcionalidad</span></a></li><li class="toclevel-1 tocsection-2"><a href="#Inyección_de_elementos_de_script"><span class="tocnumber">2</span> <span class="toctext">Inyección de elementos de script</span></a></li><li class="toclevel-1 tocsection-3"><a href="#Preocupaciones_de_seguridad"><span class="tocnumber">3</span> <span class="toctext">Preocupaciones de seguridad</span></a><ul><li class="toclevel-2 tocsection-4"><a href="#Código_de_terceros_no_confiable"><span class="tocnumber">3.1</span> <span class="toctext">Código de terceros no confiable</span></a></li><li class="toclevel-2 tocsection-5"><a href="#Diferencias_de_espacios_en_blanco"><span class="tocnumber">3.2</span> <span class="toctext">Diferencias de espacios en blanco</span></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"><span class="tocnumber">3.3</span> <span class="toctext">Devolución de llamada de manipulación de nombre y ataque de descarga de archivo reflejado</span></a></li><li class="toclevel-2 tocsection-7"><a href="#Cross-site_request_forgery"><span class="tocnumber">3.4</span> <span class="toctext">Cross-site request forgery</span></a></li><li class="toclevel-2 tocsection-8"><a href="#Rosetta_Flash"><span class="tocnumber">3.5</span> <span class="toctext">Rosetta Flash</span></a></li></ul></li><li class="toclevel-1 tocsection-9"><a href="#Historia"><span class="tocnumber">4</span> <span class="toctext">Historia</span></a></li><li class="toclevel-1 tocsection-10"><a href="#Véase_también"><span class="tocnumber">5</span> <span class="toctext">Véase también</span></a></li><li class="toclevel-1 tocsection-11"><a href="#Referencias"><span class="tocnumber">6</span> <span class="toctext">Referencias</span></a></li><li class="toclevel-1 tocsection-12"><a href="#Enlaces_externos"><span class="tocnumber">7</span> <span class="toctext">Enlaces externos</span></a></li></ul></div><h2><span class="mw-headline" id="Funcionalidad">Funcionalidad</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JSONP&action=edit§ion=1" title="Editar sección: Funcionalidad">editar</a><span class="mw-editsection-bracket">]</span></span></h2><p>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>). </p><p>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: </p><div class="mw-highlight mw-highlight-lang-json mw-content-ltr mw-highlight-lines" dir="ltr"><pre><span></span><span class="linenos" data-line="1"></span><span class="p">{</span><span class="w"></span><span class="linenos" data-line="2"></span><span class="w"> </span><span class="nt">"Name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Alice"</span><span class="p">,</span><span class="w"></span><span class="linenos" data-line="3"></span><span class="w"> </span><span class="nt">"Id"</span><span class="p">:</span><span class="w"> </span><span class="mi">1234</span><span class="p">,</span><span class="w"></span><span class="linenos" data-line="4"></span><span class="w"> </span><span class="nt">"Rank"</span><span class="p">:</span><span class="w"> </span><span class="mi">7</span><span class="w"></span><span class="linenos" data-line="5"></span><span class="p">}</span><span class="w"></span></pre></div><p> Sin soporte para CORS, un intento de usar los datos entre dominios da como resultado un error de JavaScript: </p><div class="mw-highlight mw-highlight-lang-html mw-content-ltr mw-highlight-lines" dir="ltr"><pre><span></span><span class="linenos" data-line="1"></span><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/javascript"</span><span class="linenos" data-line="2"></span> <span class="na">src</span><span class="o">=</span><span class="s">"http://server.example.com/Users/1234"</span><span class="p">></span><span class="linenos" data-line="3"></span><span class="p"></</span><span class="nt">script</span><span class="p">></span></pre></div><p> 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. </p><p>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. </p><p>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.<sup id="cite_ref-2" class="reference separada"><a href="#cite_note-2"><span class="corchete-llamada">[</span>2<span class="corchete-llamada">]</span></a></sup> 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});
Abstract from DBpedia / Wikipedia · CC BY-SA