JS-API

Mit der von blau direkt neu entwickelten JS-API möchte ich heute allen technikaffinen und interessierten Maklerpartnern mit Vorkenntnissen eine weitere Möglichkeit der Vergleichsrechner-Einbindung sowie deren Vorteile vorstellen. Aber immer langsam: Was genau macht diese JS-API eigentlich?

Um diese Frage beantworten zu können, sollten wir mit dem Problem – oder viel mehr der Herausforderung – beginnen. Traditionell werden in der Web-Entwicklung Inhalte Dritter per iFrame in die eigene Website eingebunden. Die einfache iFrame-Einbindung hat allerdings einige Einschränkungen technischer Natur, welche durch die Arbeitsweisen der Browser oder auch einfach nur durch die grundliegende Architektur der Internet-Protokolle vorgegeben werden. Hierzu zählt auch, dass die Größe von iFrames nicht mit der Größe der eingebundenen Website „mitwachsen“ kann. Warum das so ist, erklärt der leitende Entwickler der JS-API, Philip Wassermann, wie folgt:

Die Größe eines iFrames lässt sich nur über die „Mutterseite“ ändern, indem mittels JavaScript die Größe des iFrame-Inhaltes berechnet wird und anschliessend das JavaScript im iFrame entsprechende DOM-Manipulationen an der „Mutterseite“ vornimmt oder auch JavaScript direkt auf der „Mutterseite“ ausführt.

Ein Browser führt JavaScript immer in einer sogenannten „Sandbox“ aus, in welcher einerseits nur für Web-Applikationen relevante Befehle zugelassen werden (so ist z.B. das Löschen und Erstellen von Dateien verboten) und andererseits die „same origin policy“ geprüft wird.

Die „same origin policy“ ist dafür zuständig, dass JavaScript nur JavaScript der eigenen Seite ausführen darf (entsprechend für DOM-Manipulationen).
Geprüft wird hierbei ob:

• die Protokolle identisch sind (http://www.blaudirekt.de darf nicht auf https://www.blaudirekt.de zugreifen) und
• ob die FQDN’s (FQDN: der gesamte Domainname inkl. Subdomain(s)) identisch sind (https://blaudirekt.de darf nicht auf https://www.blaudirekt.de zugreifen)

Philip Wassermann

Sofern Sie der technischen Ausführung nicht bis ins Detail folgen konnten, ist dies nicht weiter dramatisch. Merken Sie sich einfach die Kernaussage: iFrames können bei der „normalen“ Einbindung aus Sicherheitsgründen nicht „mitwachsen“.

Dies stellt besonders die Maklerpartner vor eine Herausforderung, die unsere Vergleichsrechner per iFrame auf Ihrer Website einbinden möchten aber natürlich die Höhe der Vergleichsrechner nicht kennen. Diese setzen die Höhe dann oftmals auf 1.000 Pixel, was aber folgende Nachteile hat:

• Der Besucher der Website sieht stets einen scheinbar riesigen, weißen Bereich zwischen Vergleichsrechner und Footer.
• Die Websites werden unnötig hoch.
• Der Content unter den Vergleichsrechnern wird nicht mehr wahrgenommen.
• Die „Spring-Funktion“ der Vergleichsrechner wird gestört.
• Visuelle Dialoge werden in der Mitte des iFrames angezeigt und sind daher oft im aktuell nicht sichtbarem Bereich.

Unser AJAX-Tunnel bietet zwar für alle oben genannten Herausforderungen eine Lösung, bringt aber auch einige Nachteile mit sich. So ist die Implementation des Tunnels bspw. vergleichsweise schwierig und für Laien ohne fremde Hilfe oft nicht zu bewältigen. Zudem läuft die gesamte Kommunikation zwischen Client und unserem Server über den Server des Maklers. Da Anfrage als auch Antwort einen zusätzlichen „Hop“ machen müssen, wird der Vergleichsrechner natürlich (minimal) langsamer. Aber der Makler bekommt noch ein anderes Problem: Die SSL-Verschlüsselung. Diese können wir nur zwischen dem Server des Maklers und unserem Server sicherstellen, nicht aber zwischen dem Client und dem Server des Maklers. Daher kommt der Makler um ein eigenes SSL-Zertifikat für seine Domain nicht herum, welches natürlich mit weiteren Kosten verbunden ist.

Genau in diese Kerbe schlägt die JS-API. Diese bindet unsere Vergleichsrechner technisch per iFrame ein (wodurch wir wieder die durchgängige SSL-Verschlüsselung sicherstellen können), setzt für die Implementation lediglich HTML-Kenntnisse voraus und kann – neben ein paar anderen, sehr interessanten Features – die Höhe des iFrames „mitwachsen“ lassen. Aber Moment! Warum geht das auf einmal?

Für die JS-API nutzen wir eine relativ neue Technik, welche mittlerweile von alle gängigen Browsern (Internet Explorer ab Version 8) unterstützt wird. Diese erlaubt es uns, Textnachrichten zwischen den iFrames auszutauschen, da hierbei weder Script ausgeführt noch DOM-Manipulationen vorgenommen werden. Daher ist diese Vorgehensweise Sicherheitstechnisch nicht relevant.
Auch muss jede Nachricht definiert sein: Das Empfangende JavaScript auf der „Mutterseite“ muss mit dem JavaScript des iFrames „zusammenspielen“, damit klar ist, dass bspw. die soeben empfangene Nachtricht die neue Größe des iFrames beinhaltet.

Philip Wassermann

Übrigens: Sowohl Google als auch Facebook arbeiten mit einer ähnlichen JS-API zur Einbindung des Google+1-Buttons, des Like-Buttons oder auch der Facebook-Kommentare.

Pricing

Die Konditionen der JS-API sind trotz verbesserter Engine mit denen des AJAX-Tunnels identisch. Unsere AGB & Verträge (sowie der Softwarebestellschein der JS-API) können auf Pooltektor unter AGB & Verträge eingesehen werden.

Weiterführende Blog-Artikel:

• JS-API – Technische Implementation
• JS-API – Tricks für Fortgeschrittene
• JS-API – Catcher
• JS-API – Kunden-Login

Hannes Heilenkötter

Hannes Heilenkötter ist Chief Technology Officer bei blau direkt.