CDN library blocked in Chrome

Question

I'm using leaflet/OSM for a small map on a site. The site itself is accessible via HTTPS while the leaflet library can (afaik) only be retrieved via a HTTP connection. Now Chrome doesn't include the library and gives me the following message in the console:

[blocked] The page at https://example.com/foo/bar ran insecure content from http://cdn.leafletjs.com/leaflet-0.5/leaflet.css_

Any idea how I could work around this?

Answer 1

http://cdnjs.com/libraries/leaflet/ has Leaflet. They have HTTPS version as well.

//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css
//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js

Use the above URLs in your code. The same protocol used to load the current page will be used to fetch Leaflet assets as well.

Answer 2

Instead of using the hosted version of leaflet, you can provide the necessary javascript and css files yourself: Just grab the latest version of leaflet at http://leafletjs.com/download.html and copy the directory "dist" to your project directory. After that you can change the links from "http://cdn.leafletjs.com/leaflet-0.5/" to "./dist/".

Answer 3

Remove the "http:" from your reference. try "//cdn.leafletjs.com/leaflet-0.5/leaflet.css". It will use the current page's protocol to send the request.