Sử dụng bản đồ OpenLayers với SSL

Tôi đang sử dụng bản đồ OpenLayers bằng cách sử dụng JavaScript được lưu trữ:

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

Nhưng khách hàng của tôi đã cài đặt SSL và khi tôi cố chạy trang bản đồ của mình thì nó hiển thị:

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

Vì vậy, tôi đã thử https một và hóa ra các trình mở không có một

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

Sau đó, tôi tải xuống Opensreet js và được lưu trữ trong máy chủ của khách hàng, nhưng sau đó tất cả các kiểu và hình ảnh liên quan bị mất. Mặc dù nó hiển thị bản đồ, về cơ bản, rất nhiều cảnh báo bật lên trong bảng điều khiển và tôi sợ điều này có thể bị từ chối tại cửa hàng chơi hoặc hơn thế. Tôi đang phát triển một ứng dụng lai chạy trên máy chủ.

Cảnh báo ngay bây giờ :

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

Tôi đã thử với cdn với SSL và vẫn gặp vấn đề tương tự:

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

Tôi đã tải xuống toàn bộ repo GitHub vì Openstreet nghĩ rằng điều này sẽ giải quyết vấn đề về hình ảnh và CSS.

https://github.com/openlayers/openlayers

Mặc dù ở trên đã giải quyết các vấn đề CSS , tuy nhiên bản đồ được hiển thị bằng cách tải hình ảnh từ một trang web bên ngoài khác tile.openstreet.com. Có vẻ như tôi cũng phải đào sâu vào js openstreet .. :( ..

Quan trọng : Tôi đang sử dụng backbone.js.

Lưu ý : Tôi đã trải qua các tai ương xác thực cơ bản OpenLayers 2.12 và http và điều đó không giúp tôi. Tôi không có quyền kiểm soát cấu hình máy chủ. Tôi chỉ có quyền truy cập vào một thư mục mà tôi cần để thiết lập trang web, mọi thứ khác đều hoạt động tốt, nhưng SSL này thật rắc rối.

Thay đổi địa chỉ trang web thực để tránh Google liên kết nó.

• OpenLayers.js: tôi khuyên bạn nên tải lib và liên kết nó với máy chủ ứng dụng của bạn. Bằng cách này, bạn có thể có toàn quyền kiểm soát URL và nội dung của nó.

• "nội dung không an toàn" cảnh báo: điều đó cũng xảy ra với tôi. Trong OpenLayers 2.13.1, khi bạn khởi tạo OpenLayers.Layer.OSM, nó được cấu hình theo mặc định cho HTTP. Từ tài liệu OpenLayers.Layer.OSM :

url {String} Lược đồ URL lát. Mặc định cho http: // [a | b | c] .tile.openstreetmap.org / $ {z} / $ {x} / $ {y} .png

Thay vào đó, tôi đã sử dụng các giá trị rõ ràng cho mảng lược đồ URL, chứa các URL độc lập giao thức

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 độc lập giao thức: nếu bạn muốn ứng dụng của mình chạy trên cả HTTP và HTTPS, hãy sử dụng URL độc lập giao thức: thay vì http://server.com/resource , hãy sử dụng //server.com/resource : trình duyệt của bạn sẽ xem xét giao thức hiện đang chạy.

Các máy chủ gạch OSM chính thức không cung cấp bất kỳ quyền truy cập nào qua SSL. Chúng là những hàng hóa công cộng được chia sẻ và sẽ không được sử dụng bởi các ứng dụng có lưu lượng truy cập lớn. Nếu bạn muốn sử dụng chúng bằng mọi giá, bạn phải ổn với thông báo "một số nội dung không được mã hóa" tại các trình duyệt.

Nếu bạn muốn có mã hóa đầy đủ, bạn cần trả tiền cho các CDN bản đồ thương mại có SSL:

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

Bạn cần ghi đè các biểu mẫu Widget. Thí dụ:

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
    }

và thay đổi lớp quản trị

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

Một ví dụ về mô hình

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

Mã ghi đè trường hình thành các vật dụng cho một phương tiện truyền thông mới. Điều này loại bỏ nội dung http http://openlayers.org/api/2.13.1/OpenLayers.jscủa phương tiện truyền thông.