Menggunakan peta OpenLayers dengan SSL

10

Saya menggunakan peta OpenLayers dengan menggunakan JavaScript yang di-host:

<script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script> 

Tetapi klien saya telah menginstal SSL dan ketika saya mencoba menjalankan halaman peta saya itu menunjukkan:

(2)[blocked] The page at https://domain.com/rwd/ ran insecure content 
   from http://openlayers.org/api/2.13.1/OpenLayers.js.

Jadi saya mencoba https satu dan ternyata openlayers tidak memilikinya

https://openlayers.org/api/2.13.1/OpenLayers.js

Kemudian saya mengunduh Openstreet js dan di-host di server klien, tetapi kemudian semua gaya dan gambar terkait hilang. Meskipun tidak menunjukkan peta, pada dasarnya banyak peringatan muncul di konsol dan saya khawatir ini akan ditolak di play store atau lebih. Saya sedang mengembangkan aplikasi hybrid yang berjalan di server juga.

Peringatan sekarang :

The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8743/5624.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8742/5624.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8743/5623.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8743/5625.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8744/5624.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://a.tile.openstreetmap.org/14/8742/5623.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8742/5625.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://a.tile.openstreetmap.org/14/8744/5623.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://a.tile.openstreetmap.org/14/8744/5625.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://a.tile.openstreetmap.org/14/8743/5622.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8742/5622.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8745/5624.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8744/5622.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://b.tile.openstreetmap.org/14/8745/5623.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8745/5625.png.
The page at https://domain.com/rwd/#/customer-plot/234 displayed insecure content from http://c.tile.openstreetmap.org/14/8745/5622.png.

GET https://domain.com/rwd/js/lib/theme/default/style.css 404 (Not Found) 
/*This the corresponding stylesheet that is loaded via Openstreet.js*/ 

Saya mencoba dengan cdn dengan SSL dan masalah yang masih sama:

https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js

Saya mengunduh seluruh repo GitHub untuk Openstreet berpikir ini akan menyelesaikan masalah gambar dan CSS.

https://github.com/openlayers/openlayers

Sementara hal di atas menyelesaikan masalah CSS , peta ditunjukkan dengan memuat gambar dari situs eksternal lain tile.openstreet.com. Sepertinya saya harus menggali openstreet js juga .. :( ..


Penting : Saya menggunakan backbone.js.

Catatan : Saya telah melalui OpenLayers 2.12 dan http otentikasi dasar dan itu tidak membantu saya. Saya tidak punya kendali atas konfigurasi server. Saya hanya memiliki akses ke folder di mana saya perlu mengatur situs web dan semua yang lain berfungsi dengan baik, tetapi SSL ini merepotkan.

Mengubah alamat situs web asli untuk menghindari tautannya Google.

Roy MJ
sumber
2
Apakah ada alasan mengapa Anda tidak meng-host file .JS di server Anda sendiri? Itu akan memungkinkan SSL murni dan menghindari konflik lintas domain.
Mapper
@Mapper: Saya melakukan itu pertama kali, tetapi kemudian skrip memanggil beberapa sumber eksternal seperti css, gambar dll. Lihat pembaruan ke-2 saya. Ive menjelaskan apa yang hilang sekarang .. Saya pikir ini akan tetap menjadi masalah kecuali mereka menambahkan ssl juga ..
Roy MJ
Semua aset dll terkait relatif, jadi IMHO tidak ada masalah. Sebagai contoh: on-i.de/map
Mapper
@Mapper: Ya saya tahu itu .. tapi bagaimanapun ubinnya adalah salah satu yang saya terjebak dengan pergi dengan cara ini .. Itu tidak merusak aplikasi saya, tetapi menunjukkan peringatan, banyak peringatan sebenarnya .. Saya tetap membuka ini untuk beberapa hari untuk mencari-cari dan melihat apakah ada solusi yang mungkin untuk ini ...
Roy MJ
Anda harus selalu meng-host file js secara lokal. Kalau tidak, pembaruan OpenLayers dengan modifikasi API dapat mengacaukan situs Anda.
scai

Jawaban:

11
  • OpenLayers.js: saya akan merekomendasikan Anda untuk mengunduh lib dan menautkannya ke server aplikasi Anda. Dengan cara ini Anda dapat memiliki kontrol total atas URL dan kontennya.

  • peringatan "konten tidak aman": itu terjadi pada saya juga. Di OpenLayers 2.13.1, ketika Anda membuat Instantiate sebuah OpenLayers.Layer.OSM, itu dikonfigurasi secara default untuk HTTP. Dari OpenLayers.Layer.OSM doc :

url {String} Skema URL tileset. Default ke http: // [a | b | c] .tile.openstreetmap.org / $ {z} / $ {x} / $ {y} .png

Alih-alih itu, saya menggunakan nilai eksplisit untuk array skema URL, yang berisi URL protokol-independen

layer = new OpenLayers.Layer.OSM(
    "OpenStreetMap", 
    // Official OSM tileset as protocol-independent URLs
    [
        '//a.tile.openstreetmap.org/${z}/${x}/${y}.png',
        '//b.tile.openstreetmap.org/${z}/${x}/${y}.png',
        '//c.tile.openstreetmap.org/${z}/${x}/${y}.png'
    ], 
    null);
  • URL independen protokol: jika Anda ingin aplikasi Anda berjalan di HTTP dan HTTPS, gunakan URL independen protokol: alih-alih http://server.com/resource , gunakan //server.com/resource : browser Anda akan mempertimbangkan protokol saat ini sedang berjalan.
Andrei Cojocaru
sumber
Jika ada yang bertanya-tanya: Anda mengubahnya dalam kode sumber OpenLayers.js. Meskipun sudah diperkecil, mudah ditemukan dan diubah.
trainoasis
3

Server ubin OSM resmi tidak menyediakan akses apa pun melalui SSL. Mereka adalah barang publik yang dibagikan dan tidak boleh digunakan oleh aplikasi dengan lalu lintas padat. Jika Anda tetap ingin menggunakannya, Anda harus setuju dengan pesan "sebagian konten tidak dienkripsi" di browser.

Jika Anda ingin memiliki enkripsi penuh, Anda perlu membayar CDN peta komersial dengan SSL:

Mapper
sumber
3
Informasi ini tampaknya sudah tua. Openstreetmap sekarang mendukung https; periksa openstreetmap.org . Lihat juga github.com/openstreetmap/openstreetmap-website/issues/1033
Antonis Christofides
1

Anda perlu mengganti formulir Widget. Contoh:

from django.contrib import admin
from django.contrib.gis.db import models
from django.contrib.gis.forms.widgets import BaseGeometryWidget

class CustomOpenLayersWidget(BaseGeometryWidget):
    template_name = 'gis/openlayers.html'

    def __init__(self, attrs=None):
        super(CustomOpenLayersWidget, self).__init__(attrs)

    class Media:
        js = (
            'https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js',
            'gis/js/OLMapWidget.js',
        )


class CustomModelAdmin(admin.ModelAdmin):
    """Need to change default URL of OpenLayers"""
    formfield_overrides = {
        models.PointField: {"widget": CustomOpenLayersWidget},
        models.PointField: {"widget": CustomOpenLayersWidget},
        models.PolygonField: {"widget": CustomOpenLayersWidget},
        models.LineStringField: {"widget": CustomOpenLayersWidget},

        # Adding other models Fields if need
    }

dan ubah kelas admin

@admin.register(Position)
class PositionAdmin(CustomModelAdmin):
    pass

Contoh model

class Position(models.Model):
    point = models.PointField(blank=False)

Bidang kode menimpa membentuk widget ke itens media baru. Ini menghapus konten http http://openlayers.org/api/2.13.1/OpenLayers.jsdari media.

Jones
sumber