Verwenden von OpenLayers-Karten mit SSL

Ich verwende die OpenLayers-Karte mit dem gehosteten JavaScript:

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

Auf meinem Client ist jedoch SSL installiert. Wenn ich versuche, meine Kartenseite auszuführen, wird Folgendes angezeigt:

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

Also habe ich https one ausprobiert und es stellte sich heraus, dass Openlayers keine haben

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

Dann lade ich die Openstreet js herunter und hoste sie auf dem Client-Server, aber dann gehen alle Stile und verwandten Bilder verloren. Obwohl die Karte angezeigt wird, werden im Grunde genommen zahlreiche Warnungen in der Konsole angezeigt, und ich befürchte, dass dies im Play Store oder so abgelehnt wird. Ich entwickle eine Hybridanwendung, die auch auf dem Server ausgeführt wird.

Warnungen jetzt :

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*/ 

Ich habe es mit cdn mit SSL versucht und immer noch das gleiche Problem:

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

Ich habe das gesamte GitHub-Repo für Openstreet heruntergeladen und dachte, dies würde das Image- und CSS-Problem lösen.

https://github.com/openlayers/openlayers

Während das oben Gesagte die CSS-Probleme löste , wird die Karte jedoch durch Laden von Bildern von einer anderen externen Site angezeigt tile.openstreet.com. Scheint, als müsste ich mich auch in openstreet js vertiefen .. :( ..

Wichtig : Ich verwende backbone.js.

Hinweis : Ich habe Probleme mit der OpenLayers 2.12- und der http-Basisauthentifizierung durchlaufen, und das hat mir nicht geholfen. Ich habe keine Kontrolle über die Serverkonfiguration. Ich habe nur Zugriff auf einen Ordner, in dem ich die Website einrichten muss, und alles andere funktioniert einwandfrei, aber dieses SSL ist problematisch.

Die tatsächliche Website-Adresse wurde geändert, um zu vermeiden, dass Google sie verlinkt.

• OpenLayers.js: Ich würde Ihnen empfehlen, die Bibliothek herunterzuladen und mit Ihrem Anwendungsserver zu verknüpfen. Auf diese Weise haben Sie die vollständige Kontrolle über die URL und den Inhalt.

• Warnungen vor "unsicherem Inhalt": Das ist mir auch passiert. Wenn Sie in OpenLayers 2.13.1 ein OpenLayers.Layer.OSM instanziieren, wird es standardmäßig für HTTP konfiguriert. Aus OpenLayers.Layer.OSM doc :

url {String} Das Tileset-URL-Schema. Der Standardwert ist http: // [a | b | c] .tile.openstreetmap.org / $ {z} / $ {x} / $ {y} .png

Stattdessen habe ich explizite Werte für das URL-Schema-Array verwendet, das protokollunabhängige URLs enthält

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);

• Protokollunabhängige URLs: Wenn Ihre App sowohl auf HTTP als auch auf HTTPS ausgeführt werden soll, verwenden Sie protokollunabhängige URLs: Verwenden Sie anstelle von http://server.com/resource //server.com/resource : Ihr Browser berücksichtigt die Protokoll, auf dem es gerade läuft.

Die offiziellen OSM-Kachelserver bieten keinen Zugriff über SSL. Sie sind gemeinsame öffentliche Güter und dürfen nicht von stark frequentierten Apps verwendet werden. Wenn Sie sie trotzdem verwenden möchten, müssen Sie mit der Meldung "Einige Inhalte sind nicht verschlüsselt" in den Browsern einverstanden sein.

Wenn Sie eine vollständige Verschlüsselung wünschen, müssen Sie für kommerzielle Karten-CDNs mit SSL bezahlen:

• http://wiki.openstreetmap.org/wiki/Tiles
• http://wiki.openstreetmap.org/wiki/Commercial_OSM_Software_and_Services

Sie müssen die Formulare überschreiben Widget. Beispiel:

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
    }

und ändern Sie die Admin-Klasse

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

Ein Beispiel für ein Modell

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

Das Feld zum Überschreiben des Codes bildet Widgets für neue Medien. Dadurch werden http-Inhalte http://openlayers.org/api/2.13.1/OpenLayers.jsvon Medien entfernt.