JSONP

JSONP , o JSON-P (JSON con relleno), es una técnica de JavaScript para solicitar datos a través del <script>elemento HTML . ^{[ 1 ]} Fue propuesta por Bob Ippolito en 2005. ^{[ 2 ]} JSONP permite compartir datos eludiendo la política del mismo origen, que no permite que el código JavaScript en ejecución lea elementos DOM de medios o datos XMLHttpRequest obtenidos desde fuera del sitio de origen de la página. El sitio de origen se indica mediante una combinación de esquema URI , nombre de host y número de puerto .

Las solicitudes JSONP son vulnerables a que la fuente de datos responda con código malicioso, razón por la cual se ha mejorado mediante CORS ( intercambio de recursos de origen cruzado , disponible desde 2009 ^{[ 3 ]} ) en las aplicaciones modernas.

Generalmente, el elemento HTML puede ejecutar código JavaScript obtenido de fuentes externas. Antes de la adopción de CORS, los servicios que respondían con datos JSON puros no podían compartir datos de fuentes externas. <script>

Por ejemplo, una solicitud CORS a un servicio externo http://server.example.com/Users/1234puede devolver una respuesta JSON. Sin embargo, intentar usar los datos entre dominios sin CORS produce un error de JavaScript.

Cuando http://server.example.com/Users/1234se pasa como srcatributo a una <script>etiqueta, el navegador descarga el archivo, evalúa su contenido, interpreta erróneamente los datos JSON sin procesar como un bloque y genera un error de sintaxis. Incluso si los datos JSON sin procesar se interpretaran como un literal de objeto JavaScript, los literales de objeto son inaccesibles sin una asignación de variable.

JSONP resuelve esto mediante un acuerdo entre el cliente y el servidor sobre un argumento de consulta codificado en URL, convencionalmente `<script>` jsonpo ` callback<script>`, que el cliente utilizará para definir el texto que el servidor antepondrá a su respuesta, y envolverá la carga útil JSON entre paréntesis, lo que dará como resultado un documento JavaScript. Cuando la URL codificada se pasa al srcatributo del elemento, el cliente envía la solicitud JSONP y el documento JavaScript de respuesta del servidor se carga en el navegador. Normalmente, esto se utiliza para llamar a una función definida en el entorno JavaScript y manipular los datos JSON de la respuesta.<script>

Un ejemplo de solicitud JSONP ahttp://server.example.com/Users/1234

<script type="application/javascript" src="<nowiki>http://server.example.com/Users/1234?jsonp=parseResponse</nowiki>"> </script>

En este ejemplo, el cliente definió parseResponseel texto como texto de preámbulo. La respuesta del servidor sería:

parseResponse({"Name": "Foo", "Id": 1234, "Rank": 7});

Aquí parseResponse()está la "P" de JSONP: el "relleno" alrededor del JSON puro. ^{[ 4 ]}

JSONP solo tiene sentido cuando se usa con un elemento de script. Para cada nueva solicitud JSONP, el navegador debe agregar un nuevo elemento o reutilizar uno existente. La primera opción (agregar un nuevo elemento de script) se realiza mediante manipulación dinámica del DOM y se conoce como inyección de elementos de script . El elemento se inyecta en el DOM HTML, con la URL del punto final JSONP deseado establecida como atributo. Esta inyección dinámica de elementos de script generalmente se realiza mediante una biblioteca auxiliar de JavaScript. jQuery y otros frameworks tienen funciones auxiliares de JSONP; también existen opciones independientes.<script><script>src

Un ejemplo de cómo usar jQuery para inyectar dinámicamente un elemento de script para una llamada JSONP se ve así:

$ . getScript ( "http://server.example.com/Users/192.168.73.96?callback=parseResponse" );

Una vez inyectado el elemento, el navegador lo evalúa y realiza una solicitud HTTP GET a la URL de origen, recuperando el contenido. A continuación, el navegador interpreta la respuesta como JavaScript. Normalmente, se trata de una llamada a una función. De este modo, el uso de JSONP permite que las páginas web eludan la política de mismo origen mediante la inyección de elementos de script. ^{[ 5 ]}

El script se ejecuta dentro del ámbito de la página que lo incluye y, por lo tanto, sigue sujeto a las restricciones de dominio cruzado relativas al dominio de dicha página. Esto significa que una página web no puede, por ejemplo, cargar una biblioteca alojada en otro sitio mediante JSONP y luego realizar solicitudes XMLHttpRequest a ese sitio (a menos que se admita el uso compartido de recursos de origen cruzado (CORS)), aunque sí se podría usar dicha biblioteca para realizar solicitudes XMLHttpRequest al propio sitio.

En julio de 2005, George Jempty sugirió que se antepusiera una asignación de variable opcional a JSON. ^{[ 19 ] [ 20 ]} La propuesta original para JSONP, donde el relleno es una función de devolución de llamada, parece haber sido hecha por Bob Ippolito en diciembre de 2005 ^{[ 21 ]} y ahora es utilizada por muchas aplicaciones Web 2.0 como Dojo Toolkit y Google Web Toolkit .

• Intercambio de recursos entre diferentes orígenes (CORS)
• Mensajería entre documentos

• El filtro del lado del servidor encapsula cualquier respuesta en una función de devolución de llamada JSONP , implementado con el código fuente de JSONP Java. 
• Posibles problemas de seguridad relacionados con JSON
• Fuente de datos JSONP para dominios remotos