Використання карт OpenLayers із SSL

Я використовую карту OpenLayers за допомогою розміщеного JavaScript:

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

Але мій клієнт встановив SSL, і коли я намагаюся запустити свою сторінку карти, вона показує:

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

Тому я спробував https один, і, виявляється, у відкритих шарів немає такого

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

Потім я завантажую Openstreet js і розміщується на клієнтському сервері, але тоді всі стилі та пов’язані зображення втрачаються. Хоча це і показує карту, в основному численні попередження спливають у консолі, і я боюся, що це може бути відхилено в магазині гри чи так. Я розробляю гібридну програму, яка працює і на сервері.

Попередження зараз :

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

Я спробував із cdn із SSL та ще тим самим випуском:

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

Я завантажив все репо в GitHub для Openstreet, думаючи, що це вирішить проблему із зображенням та CSS.

https://github.com/openlayers/openlayers

Хоча вищезгадане вирішувало проблеми CSS , карта відображається, завантажуючи зображення з іншого зовнішнього сайту tile.openstreet.com. Здається, я також повинен копатись до openstreet js .. :( ..

Важливо : я використовую backbone.js.

Примітка . Я пройшов OpenLayers 2.12 та http базові проблеми аутентифікації, і це мені не допомогло. У мене немає контролю над конфігурацією сервера. У мене просто доступ до папки, в якій мені потрібно налаштувати веб-сайт, і все інше працює добре, але ця SSL викликає клопоти.

Змінено реальну адресу веб-сайту, щоб уникнути посилання Google.

• OpenLayers.js: я б рекомендував вам завантажити ліб і зв’язати його з вашим сервером додатків. Таким чином ви можете мати повний контроль над його URL-адресою та вмістом.

• Попередження "невпевненого вмісту": це трапилось і зі мною. У OpenLayers 2.13.1, коли інстанціює OpenLayers.Layer.OSM, він налаштовується за замовчуванням для HTTP. Від doc OpenLayers.Layer.OSM :

url {String} Схема URL-адреси набору плиток. За замовчуванням http: // [a | b | c] .tile.openstreetmap.org / $ {z} / $ {x} / $ {y} .png

Замість цього я використав явні значення для масиву схеми URL, що містить URL-адреси, незалежні від протоколу

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-адреси: якщо ви хочете, щоб ваш додаток працював як на HTTP, так і на HTTPS, використовуйте URL-адреси, незалежні від протоколу: замість http://server.com/resource використовуйте //server.com/resource : ваш браузер врахує протокол, на який він працює зараз.

Офіційні сервери плитки OSM не надають доступу через SSL. Вони є загальнодоступними суспільними благами і не повинні використовуватися додатками з великим трафіком. Якщо ви хочете їх використовувати в будь-якому випадку, ви повинні бути в порядку з повідомленням "деякий вміст не зашифрований" у веб-переглядачах.

Якщо ви хочете отримати повне шифрування, вам потрібно заплатити за комерційні CDN-адреси комерційних карт із SSL:

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

Вам потрібно переоформити форми Widget. Приклад:

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
    }

і змінити клас адміністратора

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

Приклад моделі

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

Поле перебору коду формує віджети до нового медіа. Це видаляє вміст http://openlayers.org/api/2.13.1/OpenLayers.jsносія http .