AJAX a URL http desde JavaScript sobre https

  • Programación web - Blog

AJAX a URL http desde JavaScript sobre https

Durante la producción de WC – APG City nos hemos encontrado con un problema a priori insalvable, pero que finalmente hemos podido esquivar con relativa facilidad.

El problema con el que nos hemos encontrado es el siguiente.

Problema

Cuando se realiza una llamada mediante AJAX a una URL sobre http desde un sitio web, o como en este caso concreto una tienda online, con certificado SSL, y por lo tanto sobre https, el navegador bloquea automáticamente el código JavaScript que realiza la llamada a un URL considerada insegura.

Es una medida básica de seguridad para https, ya que todo el contenido que muestra el sitio web debe ser servido desde un servidor seguro y certificado.

La solución a este problema aparentemente insalvable pasa por dos posibles soluciones.

La primera solución es simple y realmente sencilla y consiste en cambiar la URL de llamada de http a https, tal y como pudimos hacer con la URL de la API de Google Maps, que es servida desde ambos protocolos simultáneamente.

Pero, y aquí viene el problema que ya no es tan simple y sencillo de solucionar, la URL de la API de GeoNames no soporta https, por lo que es imposible realizar la llamada a dicha URL directamente desde JavaScript.

Solución

La solución pasa por hacer la llamada a la API “insegura” a través de un fichero PHP intermedio, que será el encargado de recopilar los datos JSON que necesitamos procesar.

Veamos cómo lo hemos resuelto.

En JavaScript, bajo la librería jQuery, hemos modificado la llamada directa a la API de GeoNames por esta nueva URL:

jQuery.getJSON( ruta_wordpress + "/wp-content/plugins/wc-apg-city/includes/admin/geonames.php?codigo_postal=" + jQuery( '#' + formulario + '_postcode' ).val() + "&pais=" + jQuery( '#' + formulario + '_country' ).val() , function( data ) {
} );

Como habrás podido observar se usa una variable llamada ruta_wordpress. Esta ruta ha sido enviada desde PHP gracias a una fantástica función de WordPress llamada wp_localize_script que nos permite inyectar una variable JavaScript datos obtenidos desde PHP. En este caso concreto obtiene la URL de la página de inicio del sitio web. Para lograrlo utilizamos esta pequeña porción de código PHP:

wp_register_script( 'apg_city', plugins_url( 'assets/js/apg-city-geonames.js', __FILE__ ), array( 'select2' ) );
wp_localize_script( 'apg_city', 'ruta_wordpress', get_home_url() );

Para finalizar creamos el fichero PHP que se encargaría de realizar la llamada a la API de GeoNames. Para ello utilizamos el siguiente código PHP:

$parse_uri = explode( 'wp-content', $_SERVER['SCRIPT_FILENAME'] );
require_once( $parse_uri[0] . 'wp-load.php' );

$respuesta = wp_remote_get( "http://www.geonames.org/postalCodeLookupJSON?postalcode=" . $_REQUEST['codigo_postal'] . "&country=" . $_REQUEST['pais'] );

echo $respuesta['body'];

Las dos primeras líneas nos sirven para cargar las funciones de WordPress, sin las cuales no podríamos utilizar la función nativa de WordPress wp_remote_get.

De esta forma tan simple obtenemos el JSON que necesitamos sin problemas de protocolos, de SSL, de “inseguridades” y demás problemas que sí nos genera hacer la llamada a la URL directamente desde AJAX.

Esperamos que os resulte útil en futuros proyectos este pequeño truco para salvar los inconvenientes que nos generan los protocolos al hacer llamadas a URLs remotas mediante AJAX bajo sitios web con certificado SSL.

2017-03-27T18:08:38+02:00 Viernes, 26 de Agosto de 2016|Categorías: Art Project Group|Etiquetas: , , , , , , , |Sin comentarios

Deje un comentario

Comparte esto con un amigo