Utilisation de cartes OpenLayers avec SSL

J'utilise la carte OpenLayers en utilisant le JavaScript hébergé:

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

Mais mon client a installé SSL et lorsque j'essaie d'exécuter ma page de carte, cela montre:

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

J'ai donc essayé https one et il s'avère que les openlayers n'en ont pas

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

Ensuite, je télécharge Openstreet js et hébergé sur le serveur client, mais tous les styles et les images associées sont perdus. Bien qu'il montre la carte, de nombreux avertissements apparaissent dans la console et j'ai peur que cela ne soit rejeté sur Play Store. Je développe une application hybride qui fonctionne également sur le serveur.

Avertissements maintenant :

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

J'ai essayé avec cdn avec SSL et toujours le même problème:

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

J'ai téléchargé l'intégralité du dépôt GitHub pour Openstreet en pensant que cela résoudra le problème d'image et de CSS.

https://github.com/openlayers/openlayers

Bien que ce qui précède ait résolu les problèmes CSS , la carte est cependant affichée en chargeant des images à partir d'un autre site externe tile.openstreet.com. On dirait que je dois aussi creuser dans openstreet js .. :( ..

Important : j'utilise backbone.js.

Remarque : j'ai rencontré des problèmes d'authentification de base OpenLayers 2.12 et http et cela ne m'a pas aidé. Je n'ai aucun contrôle sur la configuration du serveur. J'ai juste accès à un dossier où j'ai besoin de configurer le site Web et tout le reste fonctionne bien, mais ce SSL est gênant.

Modification de la véritable adresse du site Web pour éviter que Google ne le relie.

• OpenLayers.js: je vous recommande de télécharger la lib et de la lier à votre serveur d'applications. De cette façon, vous pouvez avoir un contrôle total sur son URL et son contenu.

• avertissements "contenu non sécurisé": cela m'est aussi arrivé. Dans OpenLayers 2.13.1, lorsque vous instanciez un OpenLayers.Layer.OSM, il est configuré par défaut pour HTTP. Du document OpenLayers.Layer.OSM :

url {String} Le schéma d'URL du jeu de tuiles. Par défaut, http: // [a | b | c] .tile.openstreetmap.org / $ {z} / $ {x} / $ {y} .png

Au lieu de cela, j'ai utilisé des valeurs explicites pour le tableau de schéma d'URL, contenant des URL indépendantes du protocole

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 indépendantes du protocole: si vous souhaitez que votre application s'exécute à la fois sur HTTP et HTTPS, utilisez des URL indépendantes du protocole: au lieu de http://server.com/resource , utilisez //server.com/resource : votre navigateur considérera la protocole en cours d'exécution.

Les serveurs de tuiles OSM officiels ne fournissent aucun accès via SSL. Ils sont des biens publics partagés et ne doivent pas être utilisés par des applications à fort trafic. Si vous voulez quand même les utiliser, vous devez accepter le message "certains contenus ne sont pas cryptés" sur les navigateurs.

Si vous souhaitez avoir un cryptage complet, vous devez payer pour les CDN de cartes commerciales avec SSL:

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

Vous devez remplacer les formulaires Widget. Exemple:

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
    }

et changer la classe admin

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

Un exemple de modèle

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

Le champ de remplacement de code forme des widgets à un nouveau média. Cela supprime le contenu http http://openlayers.org/api/2.13.1/OpenLayers.jsdes médias.