leafletを使って以下が表示される。"This content should also be served over HTTPS."

問題は何なのか

leafletを使っていて以下の内容がconsoleに表示される事になった。

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. 
This content should also be served over HTTPS.

これは何を示しているかというと、表示されたページがHTTPS通信でページが表示されているにも関わらず、安全ではないHTTP通信で通信されている。 この部分についてもHTTPSで配信するべきだ。って旨である。
で、該当するURLは"http://c.tile.osm.org/13/2014/3754.png"であった。
osm.orgからの配信内容である。 自分の場合leafletを使ってopen street mapを配信するときにこれが表示される事がわかった。

これについてhttps化してosmを配信する資料があった。

osmをhttps化して配信する資料

Streaming Leaflet Tiles over HTTPS / SSL · Issue #3186 · Leaflet/Leaflet · GitHub

資料の概要

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

上のコードを下のコードに変更する。

L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

要するに"http://{s}.tile.osm.org/{z}/{x}/{y}.png"の部分を'https://{s}.tile.osm.org/{z}/{x}/{y}.png'に変更するだけといったもの。

自分のコードを直してみる

自分のコードを確認してみると、、、

var map = L.map('map_leaflet', { center: [lat, lon],zoom: 13})
                        .addLayer(L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'));

確かにhttpから配信する仕組みになっている。これをhttpsに変更してみようと思う。

'https://{s}.tile.osm.org/{z}/{x}/{y}.png'に変更したところうまく行った。

他にも 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'で成功している人もいるみたいだけれども自分の場合はhttps://{s}.tile.osm.org/{z}/{x}/{y}.png'でうまく行った。

またleafletのcss,javascriptを直接ダウンロードしてnginxから直接配信する方法でもhttps化できるという意見もあった。