Utilisation de cartes OpenLayers avec SSL


10

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.


2
Y a-t-il une raison pour laquelle vous n'hébergez pas le fichier .JS sur vos propres serveurs? Cela permettrait un SSL pur et éviterait les conflits entre domaines.
Mapper

@Mapper: Je l'ai fait en premier, mais ensuite le script appelle des ressources externes comme css, images etc. Voir ma 2ème mise à jour. Ive a expliqué ce qui manque maintenant .. Je pense que cela restera un problème à moins qu'ils ajoutent un ssl aussi ..
Roy MJ

Tous les actifs, etc. sont liés par rapport, donc à mon humble avis il n'y a aucun problème. Par exemple: on-i.de/map
Mapper

@Mapper: Oui, je l'ai compris .. mais cependant les tuiles sont celles avec lesquelles je suis resté en allant de cette façon .. Cela ne casse pas mon application, mais affiche un avertissement, beaucoup d'avertissements en fait .. Je vais garder cela ouvert pendant un quelques jours pour chercher et voir s'il y a des solutions possibles à cela ...
Roy MJ

Vous devez toujours héberger ces fichiers js localement. Sinon, une mise à jour d'OpenLayers avec une modification d'API pourrait visser votre site.
scai

Réponses:


11
  • 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.

Au cas où quelqu'un se demanderait: vous changez cela dans le code source d'OpenLayers.js. Même s'il est déjà minifié, il est facile à trouver et à modifier.
trainoasis

3

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:


3
Cette information est apparemment ancienne. Openstreetmap prend désormais en charge https; consultez openstreetmap.org . Voir aussi github.com/openstreetmap/openstreetmap-website/issues/1033
Antonis Christofides

1

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.