in Programmierung

Tilesproxy & durchgehendes HTTPS

Neues von der Kartenfront: Gestern und heute hab ich den Stadtplan etwas erweitert.

Der Stadtplan verfügt ja schon seit längerem über ein Zertifikat, womit auch https angeboten werden kann. OK, da noch keine kritischen Nutzerdaten eingegeben werden, ist es derzeit noch eine Spielerei, aber wer weiß, was noch kommen mag ;). Die Probleme bisher:

  • Das Zertifikat machte Ärger, da es ein Whitecard Zertifikat für *.stadtplan-ilmenau.de war. Probleme tauchten auf, sobald man nur https://stadtplan-ilmenau.de aufrief.
  • Die Tiles von Openstreetmap werden nur via stink normalen und ungesicherten HTTP ausgeteilt, weshalb der Firefox eine Schwachstelle mokierte.

Das erste Problem war fix gefixt. Ich hab nun noch ein extra Zertifikat angelegt, dass nur für stadtplan-ilmenau.de gilt. Das wird über einen extra VirtualHost im Apache eingebunden.

[cce lang=“apache“]

DocumentRoot /weg/zum/stadtplan/stadtplan
ServerAlias www.stadtplan-ilmenau.de
ServerName stadtplan-ilmenau.de


ServerName stadtplan-ilmenau.de
DocumentRoot /weg/zum/stadtplan/stadtplan
SSLEngine on
SSLCertificateKeyFile /weg/zum/key/stadtplan.ohne.stern.key
SSLCertificateFile /weg/zum/cert/stadtplan.ohne.stern.crt


ServerName www.stadtplan-ilmenau.de
DocumentRoot /weg/zum/stadtplan/stadtplan
SSLEngine on
SSLCertificateKeyFile /weg/zum/key/stadtplan.mit.stern.key
SSLCertificateFile /weg/zum/cert/stadtplan.mit.stern.crt

[/cce]

Das zweite Problem war dagegen etwas tricky. In Frage kam entweder ein alternativer Tiles-Server (den ich auf die Schnelle nicht gefunden hab), der https unterstützt oder ein Proxy auf meinem vServer. Wie der Artikeltitel schon verrät, habe ich mich für zweiteres entschieden. Ich wollte soundso mal eine Möglichkeit schaffen, Last vom Openstreetmapserver zu nehmen. Zwar sind die Abfragen von dieser Seite jetzt nicht sooo groß, aber falls es mal mehr wird, oder für zukünftige Projekte, kann man es ja immer mal verwenden…

Im Endeffekt habe ich mich an die Wikiseite ProxySimplePHP gehalten. Es gab noch ein paar kleinere Anpassungen und vor allem Erweiterungen.

Die tiles.php:

[cce lang=“php“]

[/cce]

Wichtig ist, für jeden Layertyp einen Ordner anzulegen und mit Schreibrechten für den Apache-Nutzer auszustatten. Es muss also nicht chmod 777 sein, sondern reicht, wenn man chown -R www-data:www-data tiles/ macht.

Meine JavaScripteinbindung sieht am Ende ungefähr so aus:
[cce lang=“javascript“]
var StadtplanTilesBaseURL = ((„https:“ == document.location.protocol) ? „https://stadtplan-ilmenau.de/tiles.php“ : „http://stadtplan-ilmenau.de/tiles.php“);
OpenLayers.Layer.OSM.MapnikLocalProxy = OpenLayers.Class(OpenLayers.Layer.OSM, {
initialize: function(name, options) {
var url = [
StadtplanTilesBaseURL + „?z=${z}&x=${x}&y=${y}&r=mapnik“
];
options = OpenLayers.Util.extend({ numZoomLevels: 19 }, options);
var newArguments = [name, url, options];
OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
},
CLASS_NAME: „OpenLayers.Layer.OSM.MapnikLocalProxy“
});
OpenLayers.Layer.OSM.CycleLocalProxy = OpenLayers.Class(OpenLayers.Layer.OSM, {
initialize: function(name, options) {
var url = [
StadtplanTilesBaseURL + „?z=${z}&x=${x}&y=${y}&r=cycle“
];
options = OpenLayers.Util.extend({ numZoomLevels: 19 }, options);
var newArguments = [name, url, options];
OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
},
CLASS_NAME: „OpenLayers.Layer.OSM.CycleLocalProxy“
});
OpenLayers.Layer.OSM.MapquestLocalProxy = OpenLayers.Class(OpenLayers.Layer.OSM, {
initialize: function(name, options) {
var url = [
StadtplanTilesBaseURL + „?z=${z}&x=${x}&y=${y}&r=mapquest“
];
options = OpenLayers.Util.extend({ numZoomLevels: 19 }, options);
var newArguments = [name, url, options];
OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
},
CLASS_NAME: „OpenLayers.Layer.OSM.MapquestLocalProxy“
});
OpenLayers.Layer.OSM.TransportLocalProxy = OpenLayers.Class(OpenLayers.Layer.OSM, {
initialize: function(name, options) {
var url = [
StadtplanTilesBaseURL + „?z=${z}&x=${x}&y=${y}&r=transport“
];
options = OpenLayers.Util.extend({ numZoomLevels: 19 }, options);
var newArguments = [name, url, options];
OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
},
CLASS_NAME: „OpenLayers.Layer.OSM.TransportLocalProxy“
});
OpenLayers.Layer.OSM.DrawLocalProxy = OpenLayers.Class(OpenLayers.Layer.OSM, {
initialize: function(name, options) {
var url = [
StadtplanTilesBaseURL + „?z=${z}&x=${x}&y=${y}&r=draw“
];
options = OpenLayers.Util.extend({ numZoomLevels: 17 }, options);
var newArguments = [name, url, options];
OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
},
CLASS_NAME: „OpenLayers.Layer.OSM.DrawLocalProxy“
});
OpenLayers.Layer.OSM.TonerLocalProxy = OpenLayers.Class(OpenLayers.Layer.OSM, {
initialize: function(name, options) {
var url = [
StadtplanTilesBaseURL + „?z=${z}&x=${x}&y=${y}&r=toner“
];
options = OpenLayers.Util.extend({ numZoomLevels: 17 }, options);
var newArguments = [name, url, options];
OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
},
CLASS_NAME: „OpenLayers.Layer.OSM.TonerLocalProxy“
});

layer_mapnik = new OpenLayers.Layer.OSM.MapnikLocalProxy(„Mapnik“);
cycle_layer = new OpenLayers.Layer.OSM.CycleLocalProxy(„Fahrradkarte“);
layer_MapQuest = new OpenLayers.Layer.OSM.MapquestLocalProxy(„MapQuest“);
layer_Transport = new OpenLayers.Layer.OSM.TransportLocalProxy(„Transport“);
layer_Draw = new OpenLayers.Layer.OSM.DrawLocalProxy(„Wasserfarbe“);
layer_Toner = new OpenLayers.Layer.OSM.TonerLocalProxy(„Schwarz/Weiß“);

map.addLayers([
layer_mapnik,
cycle_layer,
layer_MapQuest,
layer_Draw,
layer_Toner,
layer_Transport
]);
[/cce]

Wer aufmerksam mitgelesen hat, wird merken, dass ich auch gleich noch ein paar Layer eingeführt habe. Derzeit sind sie NUR in der Desktop-Variante zu sehen. Die Mobilvariante lass ich unangetastet. Einerseits, da ich die dortige Version so minimalistisch wie nur möglich halten möchte. Andererseits, weil es besser ist, wenn die Daten von so vielen Servern wie möglich geladen werden. Sprich es dauert länger, wenn alle Tiles von meinem vServer kommen, da der Browser nur eine bestimmte Menge an Verbindungen zu einem einzelnen Server aufbaut. Hat er dagegen viele Tiles-Server zur Verfügung, gehts schneller, da er parallel lädt. Außerdem kann er ja schon Tiles im Cache haben (von anderen Websites).

Mein persöhnlicher neuer Lieblingslayer ist im übrigen Schwarz/Weiß von stamen.com :D. Purer Minimalismus!

Den HTTP(S)-Detector habe ich beim Piwik-Codeschnippsel, der am Ende des Stadtplans eingebaut ist, abgeguckt. Dadurch wird HTTPS nicht erzwungen, wenn man es nicht will…

Achja: Und da wir uns auch noch n bissl schützen wollen, gibts im tiles-Ordner eine .htaccess-Datei, die den fremden Zugriff sperrt. Der Einzeiler sieht so aus:
[cce lang=“apache“]
RedirectMatch 404 .*$
[/cce]

Wer das nachbauen möchte (insbesondere mit den zusätzlichen Layern), sollte unbedingt auf die Lizenshinweise achten. Ich habe diese welche vollständig ins Impressum verbannt, weshalb sie im JavaScript-Code nicht vorkommen. Wer aber die Lizenshinweise nur via OpenLayers ausgibt, muss bei den entsprechenden Layern auch immer den Lizenshinweis verändern… Wie gesagt, ich umgeh das ganze :D.

Das HTTPS-Problem mit Firefox habe ich damit gelöst. Nur will Chrome noch nicht so recht und bemängelt eine unsichere Seite. Ich vermute er ärgert sich, dass ich Inhalte von fremden Seiten nachlade…

  • Nicolas

    Wie soll das mit dem Aussperren von fremden Zugriff sperren? Ich kann deine Tiles einfach in OpenLayers einbinden…

    • Das Einbinden der tiles.php ist natürlich auch von anderen Seiten möglich… gewesen. Ich habe bereits im vergangenen Jahr eine bessere und Ressourcenschonendere Methode entwickelt und dein Kommentar zum Anlass genommen es genauer zu beschreiben.

      Der Fremde Zugriff bezog sich auf den Tiles-Cache (also die Dateien und Ordner im Ordner tiles/.

  • Pingback: Tiles über HTTPS | Andreas' Blog()