4. Proxy

Política del mismo origen.

La política del mismo origen establece que, por motivos de seguridad, un script de una página web no puede acceder a contenido de dominios web diferentes de aquel en el que residen, salvo algunas excepciones, como contenido de tipo imagen. Es decir, no se permite cross domain.

La lógica del visualizador está implementada en javascript, por lo que está supeditada a dicha política del mismo origen. Eso significa que peticiones getMap o getLegendGraphic del estándar WMS pueden realizarse sin problemas ya que están solicitando imágenes, pero no ocurre lo mismo con peticiones como getCapabilities, getFeatures, getFeatureInfo, o cualquiera que devuelva contenido de otro tipo (GML/XML en estos casos).

Existen en la actualidad diversos enfoques que permiten a una aplicación realizar esas peticiones, y en la API se llevan a cabo haciendo uso de proxys.

¿Qué es?

Un proxy es una lógica o servicio que se encarga de realizar las peticiones de recursos que le solicita un tercero, en este caso el visualizador, ya que no está supeditado a la política del mismo origen generalmente al no estar implementado con scripts.

¿Cómo funciona?

El visualizador solicita el recurso a un proxy que esté en su mismo dominio, éste lo obtiene, y se lo devuelve al visualizador. Existen dos proxys diferentes: JSONP y POST.

Proxy JSONP

Este proxy devuelve el recurso solicitado en formato JSONP. Esto permite ejecutarlo directamente desde un script, en su atributo "src", mediante la función de callback definida en el cliente, sin que afecte así la política del mismo origen. Es por eso que este proxy no necesita estar desplegado en el mismo dominio que la aplicación web que lo llama.

El programador no necesita hacer uso explícito de este proxy, la api se hace cargo de llamarlo cuando sea necesario.

Ejemplo:

<script>
  function consoleresponse(response) {
  console.log(response);
}
</script>

<script src="https://componentes.cnig.es/api-core/api/proxy?url=https://www.ign.es/wmts/ign-base?request=GetCapabilities&service=WMTSl&callback=consoleresponse"></script>

Proxy POST

Para algunas comunicaciones donde se adjunta un alto volumen de información, como por ejemplo en las peticiones WFS-T, no es viable el uso del proxy JSONP, debido a las limitaciones que establecen las peticiones GET.

Para esos casos ha de usarse el proxy POST. Debe estar desplegado en el mismo dominio que la aplicación, para que haya una comunicación entre ambos sin cross domain, y hay que configurar la API para que lo use.

Visibilidad

Como el acceso final al recurso que pide el visualizador lo realiza el proxy, éste debe tener visibilidad de dicho recurso. Es decir, si se solicita por ejemplo un fichero wmc, dicho fichero deberá estar en una url accesible por el proxy. Esto hay que tenerlo en cuenta especialmente cuando se trabaja en entornos de Prueba y de Desarrollo, donde por lo general los recursos que se usan no son públicos. En esos casos suelen usarse proxys locales durante la etapa de desarrollo, configurando la API para que use esos proxys.

Configuración de los proxys

La configuración de los proxys se lleva a cabo en el fichero configuration.js. Para cambiar las urls de los mismos y usar otros proxys, después de haber importado dicho fichero, y antes de comenzar con la creación de los mapas, hay que indicar las nuevas urls mediante las siguientes instrucciones:

//Obtenemos los valores de la configuración del Proxy
M.config.PROXY_POST_URL // 'https://componentes.cnig.es/api-core/proxyPost'
M.config.PROXY_URL // 'https://componentes.cnig.es/api-core/api/proxy'

// Cambiar valor a la configuración de Proxy POST
M.config('PROXY_POST_URL', 'URL_PROXY_POST');
// Proxy JSONP
M.config('PROXY_URL', 'URL_PROXY_JSONP');

También es posible desactivar el uso de proxys:

M.proxy(false);

En caso de que el proxy esté activado y se realicen peticiones con M.remote.get o M.remote.post, estas pasarán por el proxy, por ejemplo:

https://componentes.cnig.es/api-core/api/proxy?url=https%3A%2F%2Fwww.idee.es%2FcommunicationsPoolServlet%2FSearchAssistant%3Fmaxresults%3D5%26name_equals%3DCALLE%2520SIERPES%25202%2520%2520Sevilla&callback=mapea_jsonphandler_07327580601619821

En caso de estar desactivado se realizará la petición directamente, teniendo en cuenta que puede dar problemas de CORS al estar realizando peticiones de un servidor a otro que son de distinto dominio.

Ejemplo uso M.remote.get

M.remote.get('https://www.ign.es/wmts/ign-base?request=GetCapabilities&service=WMTS').then((response) => {
    console.log(response.text);    
})

Ejemplo uso M.remote.post

const data = {"layout":"A3 Horizontal","outputFormat":"pdf","attributes":{"title":"","description":"","attributionInfo":"","refsrs":"EPSG:3857 (WGS84)","printDate":"22/6/2023","map":{"dpi":120,"projection":"EPSG:3857","useAdjustBounds":true,"layers":[{"type":"Vector","style":{"*":{"symbolizers":[]},"version":"2"},"geoJson":{"type":"FeatureCollection","features":[]},"name":"__draw__","opacity":1},{"opacity":1,"baseURL":"http://tile.openstreetmap.org/","maxExtent":[-20037508.342789244,-20037508.342789244,20037508.342789244,20037508.342789244],"tileSize":[256,256],"resolutions":[156543.03392804097,78271.51696402048,39135.75848201024,19567.87924100512,9783.93962050256,4891.96981025128,2445.98490512564,1222.99245256282,611.49622628141,305.748113140705,152.8740565703525,76.43702828517625,38.21851414258813,19.109257071294063,9.554628535647032,4.777314267823516,2.388657133911758,1.194328566955879,0.5971642834779395,0.29858214173896974],"type":"osm"}],"bbox":[-5870383.8362656515,3561725.924201225,3522198.1994168065,5953899.161414101]},"xCoordTopLeft":"47º 4' 20'' ","yCoordTopLeft":"-52º 44' 4'' ","xCoordTopRight":"47º 4' 20'' ","yCoordTopRight":"31º 38' 25'' ","xCoordBotRight":"30º 27' 5'' ","yCoordBotRight":"31º 38' 25'' ","xCoordBotLeft":"30º 27' 5'' ","yCoordBotLeft":"-52º 44' 4'' ","logo":"","headerLegend":""},"outputFilename":"${yyyyMMddhhmmss}"};

M.remote.post('https://componentes.cnig.es/geoprint/print/CNIG/report.pdf?mapeaop=geoprint', data).then((response) => {
    console.log(response.text);    
})