Usando mapas OpenLayers com SSL


10

Estou usando o mapa OpenLayers usando o JavaScript hospedado:

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

Mas meu cliente tem o SSL instalado e quando tento executar minha página de mapa, mostra:

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

Então, eu tentei https um e verifica-se que os openlayers não têm um

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

Depois, faço o download do Openstreet js e hospedado no servidor do cliente, mas todos os estilos e imagens relacionadas são perdidos. Embora ele mostre o mapa, basicamente vários avisos aparecem no console e eu tenho medo que isso possa ser rejeitado na loja de brinquedos ou algo assim. Estou desenvolvendo um aplicativo híbrido que roda no servidor também.

Avisos agora :

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

Eu tentei com cdn com SSL e ainda o mesmo problema:

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

Eu baixei o repositório inteiro do GitHub para o Openstreet pensando que isso resolverá o problema de imagem e CSS.

https://github.com/openlayers/openlayers

Embora o acima tenha resolvido os problemas de CSS , o mapa é mostrado carregando imagens de outro site externo tile.openstreet.com. Parece que eu tenho que cavar no openstreet js também .. :( ..


Importante : Estou usando o backbone.js.

Nota : Passei pelos problemas de autenticação básica do OpenLayers 2.12 e http e isso não me ajudou. Eu não tenho nenhum controle sobre a configuração do servidor. Eu só tenho acesso a uma pasta onde eu preciso configurar o site e tudo o resto funciona bem, mas esse SSL é problemático.

Endereço de site real alterado para evitar que o Google o vincule.


2
Existe uma razão para você não hospedar o arquivo .JS em seus próprios servidores? Isso permitiria SSL puro e evitaria conflitos entre domínios.
Mapper

@ Mapper: Eu fiz isso primeiro, mas depois o script chama alguns recursos externos como css, imagens etc. Veja minha segunda atualização. Ive explicou o que está faltando agora .. eu acho que esta continuará a ser um problema a menos que adicionar um SSL também ..
Roy MJ

Todos os ativos etc estão ligados em relação, então IMHO não há problema. Por exemplo: on-i.de/map
Mapper

@ Mapper: Sim, eu descobri isso .. mas, no entanto, os blocos são os que estão presos por seguir este caminho. Ele não quebra meu aplicativo, mas mostra um aviso, muitos avisos na verdade. alguns dias de pesquisa ao redor e ver se existem soluções possíveis para esse ...
Roy MJ

Você sempre deve hospedar esses arquivos js localmente. Caso contrário, uma atualização do OpenLayers com uma modificação da API pode danificar o seu site.
Scai

Respostas:


11
  • OpenLayers.js: eu recomendaria que você baixe a lib e vincule-a ao seu servidor de aplicativos. Dessa forma, você pode ter controle total sobre seu URL e conteúdo.

  • avisos de "conteúdo inseguro": isso também aconteceu comigo. No OpenLayers 2.13.1, quando você instancia um OpenLayers.Layer.OSM, ele é configurado por padrão para HTTP. No documento OpenLayers.Layer.OSM :

url {String} O esquema de URL do conjunto de peças. O padrão é http: // [a | b | c] .tile.openstreetmap.org / $ {z} / $ {x} / $ {y} .png

Em vez disso, usei valores explícitos para a matriz de esquemas de URL, contendo URLs independentes de protocolo

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);
  • URLs independentes de protocolo: se você deseja que seu aplicativo seja executado em HTTP e HTTPS, use URLs independentes de protocolo: em vez de http://server.com/resource , use //server.com/resource : seu navegador considerará o protocolo em que está sendo executado.

Caso alguém esteja se perguntando: você altera isso no código-fonte do OpenLayers.js. Mesmo se já estiver minificado, é fácil encontrar e alterar.
trainoasis 13/03/19

3

Os servidores oficiais do OSM lado a lado não fornecem acesso via SSL. Eles são bens públicos compartilhados e não devem ser usados por aplicativos com tráfego intenso. Se você quiser usá-los de qualquer maneira, deverá aceitar a mensagem "algum conteúdo não está criptografado" nos navegadores.

Se você deseja ter criptografia completa, precisará pagar por CDNs de mapa comercial com SSL:


3
Esta informação é aparentemente antiga. Openstreetmap agora suporta https; verifique openstreetmap.org . Veja também github.com/openstreetmap/openstreetmap-website/issues/1033
Antonis Christofides

1

Você precisa substituir os formulários Widget. Exemplo:

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
    }

e mude a classe admin

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

Um exemplo de modelo

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

O campo de substituição de código forma widgets para novos itens de mídia. Isso remove o conteúdo http http://openlayers.org/api/2.13.1/OpenLayers.jsda mídia.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.