Korzystanie z map OpenLayers z SSL

10

Korzystam z mapy OpenLayers przy użyciu hostowanego JavaScript:

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

Ale mój klient ma zainstalowany protokół SSL i kiedy próbuję uruchomić stronę mapy, pokazuje:

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

Wypróbowałem więc https one i okazało się, że openlayers nie ma takiego

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

Następnie pobieram plik Openstreet js i hostuję go na serwerze klienta, ale wszystkie style i powiązane obrazy zostają utracone. Chociaż pokazuje mapę, w zasadzie pojawia się wiele ostrzeżeń w konsoli i obawiam się, że może to zostać odrzucone w sklepie z grami. Tworzę aplikację hybrydową, która również działa na serwerze.

Ostrzeżenia teraz :

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

Próbowałem z cdn z SSL i wciąż ten sam problem:

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

Pobrałem całe repozytorium GitHub dla Openstreet, myśląc, że to rozwiąże problem z obrazem i CSS.

https://github.com/openlayers/openlayers

Chociaż powyższe rozwiązało problemy CSS , mapa jest jednak wyświetlana poprzez ładowanie obrazów z innej strony zewnętrznej tile.openstreet.com. Wygląda na to, że muszę też zagłębić się w openstreet js .. :( ..


Ważne : używam backbone.js.

Uwaga : Przeszedłem przez problemy z uwierzytelnianiem OpenLayers 2.12 i http i to mi nie pomogło. Nie mam żadnej kontroli nad konfiguracją serwera. Mam tylko dostęp do folderu, w którym muszę skonfigurować witrynę, a wszystko inne działa dobrze, ale ten SSL jest kłopotliwy.

Zmieniono prawdziwy adres strony internetowej, aby uniknąć łączenia go przez Google.

Roy MJ
źródło
2
Czy istnieje powód, dla którego nie hostujesz pliku .JS na własnych serwerach? Pozwoliłoby to na czysty SSL i uniknęło konfliktów między domenami.
Mapper
@Mapper: Zrobiłem to najpierw, ale potem skrypt wywołuje niektóre zasoby zewnętrzne, takie jak css, obrazy itp. Zobacz moją drugą aktualizację. Wyjaśniłem, czego teraz brakuje .. Myślę, że to pozostanie problemem, chyba że dodadzą też ssl ..
Roy MJ
Wszystkie zasoby itp. Są powiązane względnie, więc IMHO nie ma problemu. Na przykład: on-i.de/map
Mapper
@Mapper: Tak, doszedłem do wniosku, ale kafelki to te, które utknąłem w ten sposób .. To nie psuje mojej aplikacji, ale pokazuje ostrzeżenie, wiele ostrzeżeń w rzeczywistości .. Nie chcę tego otwierać kilka dni, aby się rozejrzeć i sprawdzić, czy są jakieś możliwe rozwiązania tego problemu ...
Roy MJ
Zawsze powinieneś hostować te pliki js lokalnie. W przeciwnym razie aktualizacja OpenLayers z modyfikacją API może zepsuć twoją stronę.
scai

Odpowiedzi:

11
  • OpenLayers.js: zaleciłbym pobranie biblioteki lib i połączenie jej z serwerem aplikacji. W ten sposób możesz mieć całkowitą kontrolę nad jego adresem URL i zawartością.

  • ostrzeżenia o „niebezpiecznej treści”: to też mi się przydarzyło. W OpenLayers 2.13.1 po utworzeniu wystąpienia OpenLayers.Layer.OSM jest on domyślnie konfigurowany dla HTTP. Z dokumentu OpenLayers.Layer.OSM :

url {String} Schemat URL zestawu klocków. Domyślnie jest to http: // [a | b | c] .tile.openstreetmap.org / $ {z} / $ {x} / $ {y} .png

Zamiast tego użyłem jawnych wartości dla tablicy schematów URL, zawierających adresy URL niezależne od protokołu

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);
  • niezależne od protokołu adresy URL: jeśli chcesz, aby aplikacja działała zarówno na HTTP, jak i HTTPS, użyj niezależnych od protokołu adresów URL: zamiast http://server.com/resource , użyj //server.com/resource : Twoja przeglądarka weźmie pod uwagę protokół, na którym jest obecnie uruchomiony.
Andrei Cojocaru
źródło
Jeśli ktoś się zastanawia: zmienisz to w kodzie źródłowym OpenLayers.js. Nawet jeśli jest już zminimalizowany, łatwo go znaleźć i zmienić.
Trainoasis
3

Oficjalne serwery kafelków OSM nie zapewniają dostępu przez SSL. Są to wspólne dobra publiczne i nie powinny być używane przez aplikacje o dużym natężeniu ruchu. Jeśli mimo to chcesz ich użyć, musisz być w porządku z komunikatem „niektóre treści nie są szyfrowane” w przeglądarkach.

Jeśli chcesz mieć pełne szyfrowanie, musisz zapłacić za CDN map komercyjnych za pomocą SSL:

Mapper
źródło
3
Ta informacja jest najwyraźniej stara. Openstreetmap obsługuje teraz https; sprawdź openstreetmap.org . Zobacz także github.com/openstreetmap/openstreetmap-website/issues/1033
Antonis Christofides
1

Musisz zastąpić formularze Widget. Przykład:

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
    }

i zmień klasę administratora

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

Przykład modelu

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

Pole zastępowania kodu tworzy widżety do nowych mediów. Spowoduje to usunięcie treści HTTP http://openlayers.org/api/2.13.1/OpenLayers.jsz multimediów.

Jones
źródło