CSP unsafe-eval using Google Maps API

Question

Getting script-src 'unsafe-eval' error when trying to use Google Maps' API.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

Here's the console error:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' ' *.gstatic.com *.googleapis.com *.google-analytics.com *.google.com".

You would think Google wouldn't have any unsafe-eval triggers in their libraries. Incase it could be my side my code is below:

js

function initialize() {
    // Create the map.

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(37.09024, -95.712891),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: true,
        streetViewControl: false
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    google.maps.event.addListener(map, "click", function (e) {

        var marker = new google.maps.Marker({
              draggable: true,
              raiseOnDrag: false,
              map: map,
              position: e.latLng
        });

        var radius = Math.pow(2, (20 - map.getZoom())) * 3;
        if (radius < 100) {
            radius = 100;
        }

        var circle = new google.maps.Circle({
            map: map,
            editable: true,
            radius: radius,
            fillColor: '#0159e5',
            strokeColor: '#0159e5',
            strokeWeight: 1,
            geodesic: true
        });

        circle.bindTo('center', marker, 'position');

        google.maps.event.addListener(circle, 'radius_changed', function() {
            if (circle.getRadius() < 100){
                circle.setRadius(100);
            }
        });

        //Set form fields
        document.getElementById("geo-fence-lat").value = marker.getPosition().lat();
        document.getElementById("geo-fence-long").value = marker.getPosition().lng();
        document.getElementById("geo-fence-radius").value = Math.ceil(radius/100)*100;

        google.maps.event.clearListeners(map, "click");

        addListeners(circle);
    });


}

Any fixes or ideas for GMaps alternatives would be appreciated.

Edit: These are the offending lines in Chrome. Found in maps.gstatic.com maps-api-v3/api/js/21/2/main.js.

Kh.main = function(a) {
    eval(a)
};
fg("main", {});

function ql(a) {
    return O(eval, k, "window." + a + "()")
}

[I don't see that in the console in Chrome](http://jsfiddle.net/6p20ze1L/). What browser are you using? — geocodezip, Jun 03 '15 at 00:41
@geocodezip I'm using chrome as well. It's coming from maps.gstatic.com maps-api-v3/api/js/21/2/main.js Added relevant lines to original post. — anthony-dandrea, Jun 03 '15 at 03:40
If you are writing an extension you can sandbox it as described here: https://code.google.com/p/gmaps-api-issues/issues/detail?id=4201#c16 — Kay_N, Jun 03 '15 at 23:45
@KayAnn Thank you, unfortunately it was not an extension. I turned to Open Street Maps and Leaflet and got what I needed. — anthony-dandrea, Jun 04 '15 at 01:39

pirxpilot · Accepted Answer · 2016-03-16T21:31:01.870

1

Looks like it's been mostly fixed in Google Maps 3.23 - see issue 4201

There are still some instances of eval in the code - like eval('document.namespaces') inside of the try blocks (see: related Closure fix)

edited Mar 16 '16 at 21:31

answered Mar 16 '16 at 21:24

pirxpilot

1,597
14
17

1

Awesome news. Unfortunately I have since migrated to leaflet and open street maps. I'm surprised it took Google so long. – anthony-dandrea Mar 16 '16 at 22:10

CSP unsafe-eval using Google Maps API

1 Answers1

Linked