Die Herausforderung ist folgende: Man nehme eine Seite, welche per http-Authentication geschützt ist und diese Seite hat ein JQuery oder Javascript, welches mittels eines AJAX-Requests Daten aus einem weiteren Service holt, welcher Ebefalls der gleichen Authentifizierung unterliegt.

Beim Aufruf der Seite wird der Benutzer davon überzeugt, dass seine Zugangsdaten erforderlich sind:

Das ist auch  gut so, ABER sobald das weitere Daten mittels AJAX abgefragt werden, werden die Zugangsdaten erneut abgefragt – und zwar für den Service-Aufruf. Der Grund: der aktuell gültige Authentifizierungstoken im HTTP-Header wird nicht mitgegeben!

Hierzu ist es notwendig, dass beim Aufruf zusätzlich Username und Passwort mitgegeben werden:

Dann funktionierts auch mittels AJAX.

Doch….

• Doch woher Username und Passwort nehmen, wenn diese lediglich der Benutzer besitzt?
• Eine Alternative wäre das direkte Setzen des aktuellen Authentication Tokens:

doch auch hier beißt sich die Katze in den Schwanz, denn woher diesen nehmen?

• Es gibt per JS keine  Möglichkeit aktuelle HTTP-Header auszulesen. und dadurch den Authentication Token zu ermitteln.
• Die wie in http://coderseye.com/2007/how-to-do-http-basic-auth-in-ajax.html, oder in http://stackoverflow.com/questions/1002179/how-can-i-pass-windows-authentication-to-webservice-using-jquery vorgeschlagenen Methoden benötigen auch wieder Benutzername und Passwort und funktionieren daher auch nicht wie gewünscht.
• Das Durchreichen der aktuellen Logon-Informationen scheint auch nicht möglich zu sein.

Aus Security-Sicht ergibt es Sinn, dass dies nicht möglich ist, aus Usersicht jedoch ist diese Situation die sich daraus ergibt jedoch untragbar. Lösung: Keine :( – Das heißt: wir benötigen Cookie Based Authentication

Caching ist eigentlich etwas gutes, da dadurch die Ladezeit verringert werden kann. Doch wenn man per AJAX-Call Befehle absetzt und der Internet Explorer entscheidet dies nicht zu  tun, da er aufgrund seines aktuellen Caches glaubt, er wüsste das Ergebnis ohnehin schon ist dies nicht förderlich.

Warum ist das so?

• Im HTTP-Header sind keine Caching-Attribute gesetzt. Dadurch cached der IE

Was kann ich dagegen tun?

Im IE das Caching deaktivieren: Unter Extras –> Internet Optionen –> Browsing History –> Einstellungen sollte anstatt auf Automatisch lieber “Bei jedem Zugriff auf die Seite” eingestellt werden. Dadurch wird das Problem behoben.
 

Doch dies ist nur eine Lösung für die lokale Maschine! Etwas anderes muss her.

Angenommen wir können auf dem Server die Caching-Header nicht ändern (was durch Konfiguration im IIS, oder durch ASP, ASP.NET, PHP, etc. Befehle möglich, so existiert noch eine Konfiguration im JQuery, die das Caching für den AJAX-Aufruf deaktiviert:

Die Frage die ich mir dabei stelle: warum cached nur der IE und Firefox etc. nicht? Eigentlich wäre caching hier, vor allem da der Default-parameter beim Aufruf true ist, für jeden Browser legitim!

Naja. Cache:false ist auf jeden Fall die Lösung :-)

Smartphones verfügen über ein relativ großes Display mit z.B.: 800x480px Auflösung (Samsung Omnia II). Die Browser auf den Smartphones eifern ihren großen Vorbildern nach und so existieren auch im mobilen Bereich die klassischen Browser wie Opera, Internet Explorer oder Firefox.

Doch bei Smartphones und Handies existiert so manches Features, welche bei normalen Browsern nicht vorhanden sind: Automatischer Zoom oder auch das Drehen des Gerätes. Dies führt dazu, dass der Browser selbstständig das Bild dreht, wenn das Handy gedreht wird. Die Herausforderung ist nun, die Webseite erneut richtig zu skalieren, denn der zu erwartende Weg, dass das JavaScript-Event window.resize aufgerufen wird, ist ein Irrtum.

Die Lösung dieser Herausforderung – per Timer prüfen, ob sich die Richtung des Displays geändert hat und mittels einer Funktion “UpdateView” die Elemente am Display neu positionieren:

var lastWidth = screen.width;
var lastHeight = screen.height;
$(document).ready(function () {
    UpdateView();
    ChkOriChange();
});

//Orientation change method
function ChkOriChange() {
    if (screen.width != lastWidth || screen.height != lastHeight) {
        lastWidth = screen.width;
        lastHeight = screen.height;
        UpdateView();
    }
    window.setTimeout('ChkOriChange()', 100);
}
$(window).resize(function () {
    UpdateView();
});

Ich hoffe dieses Snippet spart so manche Recherchen.