Verwenden von OpenLayers-Karten mit SSL

10

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.

Roy MJ
quelle
2
Gibt es einen Grund, warum Sie die JS-Datei nicht auf Ihren eigenen Servern hosten? Dies würde reines SSL ermöglichen und domänenübergreifende Konflikte vermeiden.
Mapper
@Mapper: Ich habe das zuerst gemacht, aber dann ruft das Skript einige externe Ressourcen wie CSS, Bilder usw. auf. Siehe mein 2. Update. Ich habe erklärt, was jetzt fehlt. Ich denke, dies wird ein Problem bleiben, es sei denn, sie fügen auch eine SSL hinzu.
Roy MJ
Alle Assets usw. sind relativ verknüpft, daher gibt es meiner Meinung nach kein Problem. Zum Beispiel: on-i.de/map
Mapper
@Mapper: Ja, ich habe das herausgefunden. Aber die Kacheln sind die, bei denen ich festgefahren bin. Es bricht meine Anwendung nicht, zeigt aber eine Warnung, viele Warnungen tatsächlich. Ich halte dies offen für eine ein paar Tage, um herumzusuchen und zu sehen, ob es irgendwelche möglichen Lösungen dafür gibt ...
Roy MJ
Sie sollten diese js-Dateien immer lokal hosten. Andernfalls kann ein OpenLayers-Update mit einer API-Änderung Ihre Site beschädigen.
Scai

Antworten:

11
  • 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.
Andrei Cojocaru
quelle
Für den Fall, dass sich jemand wundert: Sie ändern dies im Quellcode von OpenLayers.js. Auch wenn es bereits minimiert ist, ist es leicht zu finden und zu ändern.
Trainoasis
3

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:

Mapper
quelle
3
Diese Information ist anscheinend alt. Openstreetmap unterstützt jetzt https; Überprüfen Sie openstreetmap.org . Siehe auch github.com/openstreetmap/openstreetmap-website/issues/1033
Antonis Christofides
1

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.

Jones
quelle