[GIS] openlayers 4 method forEachLayerAtPixel() throws SecurityError: The operation is insecure

openlayersSecurity

Working with GeoExt 3.1.0, ExtJS 6.2.0 and Open Layers 4.4.1.

I am trying to select a layer on my map with the singleclick event so I can use layer.getSource().getGetFeatureInfoUrl and display the information contained in the table row corresponding to the selected/clicked geometry on the layer (just like the layer preview option given by GeoServer in OpenLayers format). So far:

                map.on('singleclick', function(evt) {
                    document.getElementById('nodelist').innerHTML = "Loading... please wait...";
                    var view = map.getView();
                    var viewResolution = view.getResolution();

                    var pixel = evt.pixel;
                    //pixel = map.getEventPixel(evt.originalEvent); <-- tried with and without this line
                    map.forEachLayerAtPixel(evt.pixel, function(layer) {
                        var source = layer.getSource();
                        console.log(layer);
                        return true;
                    });
                    var url = source.getGetFeatureInfoUrl(
                            evt.coordinate, viewResolution, view.getProjection(),
                            {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});
                    if (url) {
                        document.getElementById('nodelist').innerHTML = '<iframe seamless src="' + url + '"></iframe>';
                    }
                });

Problem:

The method forEachLayerAtPixel is causing this error SecurityError: The operation is insecure. to appear in the firebug console every time I click any point on the map (on or off any geometry)
Security Error: the operation is insecure

I have read articles relating this problem to the Access-Control-Allow-Origin tag being missing, AFAIK this is resolved (in my case in GeoServer Jetty) by adding this chunk of code:

    <filter>
        <filter-name>cross-origin</filter-name>
        <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

in: C:\Program Files (x86)\Boundless\OpenGeo\jetty\etc\webdefault.xml

and including this {mode: 'cors'} along with the url being targeted in the AJAX call. At least this is how it is working for me.

Or maybe this has nothing to do with the problem, in which case this question just got a lot longer then it should have.

Best Answer

I know this is too easy to be true and maybe it will crack somewhere in the future but for the time being:

new ol.layer.Tile({
    name: 'name',
    source: new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/wms',
        params: {'LAYERS': 'geoportal:layer'},
        serverType: 'geoserver',
        crossOrigin: 'anonymous' //<-- THIS IS THE SOLUTION
    })
})
Related Question