SSL과 함께 OpenLayers 맵 사용


10

호스팅 JavaScript를 사용하여 OpenLayers 맵을 사용하고 있습니다.

<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 one을 시도했지만 openlayers에 하나가없는 것으로 나타났습니다.

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

SSL을 사용하여 cdn으로 시도했지만 여전히 동일한 문제가 있습니다.

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

Openstreet를 위해 전체 GitHub 저장소를 다운로드하면 이미지 및 CSS 문제가 해결됩니다.

https://github.com/openlayers/openlayers

의 CSS 문제를 해결 했지만 다른 외부 사이트에서 이미지를로드하여지도가 표시됩니다 tile.openstreet.com. openstreet js도 파야 할 것 같습니다 .. :( ..


중요 : backbone.js를 사용하고 있습니다.

참고 : OpenLayers 2.12 및 http 기본 인증 문제를 겪었 지만 도움이되지 않았습니다. 서버 구성을 제어 할 수 없습니다. 웹 사이트를 설정 해야하는 폴더에 액세스 할 수 있지만 다른 모든 것이 잘 작동하지만이 SSL은 번거 롭습니다.

Google이 링크하지 않도록 실제 웹 사이트 주소를 변경했습니다.


2
자신의 서버에서 .JS 파일을 호스팅하지 않는 이유가 있습니까? 이는 순수한 SSL을 허용하고 도메인 간 충돌을 피합니다.
Mapper

@Mapper : 먼저 시작했지만 스크립트는 CSS, 이미지 등과 같은 외부 리소스를 호출합니다. 내 두 번째 업데이트를 참조하십시오. 나는 지금 무엇이 빠졌는지 설명했다. ssl도 추가하지 않으면 이것이 여전히 문제가 될 것이라고 생각한다.
Roy MJ

모든 자산 등은 상대적으로 연결되어 있으므로 IMHO에는 아무런 문제가 없습니다. 예 : on-i.de/map
Mapper

@Mapper : 예. 알아 냈습니다. 그러나 타일은 이런 식으로 가면서 붙어있는 타일입니다 .. 내 응용 프로그램을 중단 시키지는 않지만 실제로 많은 경고가 표시됩니다. 며칠 동안 검색하고 이에 대한 해결책이 있는지 확인하십시오.
Roy MJ

항상 해당 js 파일을 로컬로 호스팅해야합니다. 그렇지 않으면 API 수정으로 OpenLayers 업데이트가 사이트를 망칠 수 있습니다.
scai

답변:


11
  • OpenLayers.js : lib를 다운로드하여 애플리케이션 서버에 연결하는 것이 좋습니다. 이 방법으로 URL과 컨텐츠를 완전히 제어 할 수 있습니다.

  • "안전하지 않은 내용"경고 : 나에게도 일어났다. OpenLayers 2.13.1에서 OpenLayers.Layer.OSM을 인스턴스화하면 HTTP에 대해 기본적으로 구성됩니다. 에서 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를 사용 하십시오. 브라우저는 현재 실행중인 프로토콜입니다.

누군가 궁금한 경우 : OpenLayers.js 소스 코드에서이를 변경하십시오. 이미 축소 되었더라도 쉽게 찾고 변경할 수 있습니다.
trainoasis

3

공식 OSM 타일 서버는 SSL을 통한 액세스를 제공하지 않습니다. 공유 상품이며 공유 량이 많은 앱에서는 사용해서는 안됩니다 . 어쨌든 사용하려면 브라우저에서 "일부 내용이 암호화되지 않았습니다"라는 메시지가 표시되어야합니다.

완전한 암호화를 원할 경우 SSL을 사용하여 상용 맵 CDN을 지불해야합니다.


3
이 정보는 분명히 오래된 것입니다. Openstreetmap은 이제 https를 지원합니다. openstreetmap.org를 확인하십시오 . 참조 github.com/openstreetmap/openstreetmap-website/issues/1033
안토니스 Christofides에게

1

양식을 재정의해야합니다 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 컨텐츠 를 제거 합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.