Benutzern einen schnellen, getarnten Ausstieg von einer Website ermöglichen

Ein Leser schrieb mir eine wirklich interessante und wichtige Frage. Die Antwort könnte Menschen vor Schaden bewahren oder buchstäblich Leben retten.

Ich gestalte eine Website für Opfer häuslicher Gewalt neu. Die Leiterin des Programms möchte, dass ich eine Schaltfläche einfüge, auf die Opfer klicken können, um das Fenster auszublenden, falls sie ertappt werden. Ich weiß nicht, welche Optionen mir für so etwas zur Verfügung stehen. Haben Sie Vorschläge?

Als Erstes dachte ich an die eigentliche Technik: Kann man ein Fenster per Mausklick schließen? Es gibt eine window.close() Methode, also würde das vielleicht funktionieren?

<button onclick="window.close();">Close Window</button>

Nein. Darauf können wir uns nicht verlassen. Das schließt nur ein Fenster, das mit JavaScript geöffnet wurde, was bei einer typischen Website nicht der Fall ist.

Aber wollten wir das überhaupt tun? Haben Sie jemals jemanden am Computer beobachtet, der seine Browserfenster schließt, sobald Sie sich nähern? Selbst wenn es ein Zufall ist, sieht es ziemlich verdächtig aus, oder? Ich denke, in diesem Fall sollten wir Misstrauen besonders vermeiden.

Eine einfachere und weniger verdächtige Aktion wäre, die Seite auf etwas Allgemeines und Harmloses umzuleiten, wie zum Beispiel wetter.com. Ein weiterer Vorteil ist, dass Sie sich darauf verlassen können, dass es in jedem Browser funktioniert.

<button onclick="window.location = 'http://weather.com';">Go</button>

Aber wir können es noch etwas besser machen. Was, wenn der Täter, der hereinkommt, der plötzliche Wechsel der Websites durch das Opfer als verdächtig empfindet. Vielleicht versuchen sie, das Opfer zu zwingen, die Zurück-Schaltfläche zu drücken, um zu sehen, was sie sich angesehen haben, oder tun es selbst. Um dies zu vermeiden, sollten wir den Link nach Möglichkeit in einem neuen Tab öffnen, der frei von direkter Browser-Historie ist.

Wenn wir das JavaScript von der Schaltfläche selbst abstrahieren, erhalten wir Folgendes:

<button id="get-away">Go</button>

$("#get-away").on("click", function() {
  window.open("http://weather.com", "_newtab");
});

Der neue Tab hat keine direkte Browser-Historie, sodass das Drücken der Zurück-Schaltfläche nichts bewirkt. Das ist gut, aber das Öffnen eines neuen Tabs sieht etwas anders aus als nur das Wechseln der Seiten. Wenn der Täter das bemerkt, klickt er vielleicht zurück zum letzten Tab und sieht, was dort war. Wir können versuchen, uns davor zu schützen, indem wir auch den Speicherort der ursprünglichen Seite ändern

$("#get-away").on("click", function() {
  window.open("http://weather.com", "_newtab");
  window.location.replace('http://google.com');
});

Durch das Ersetzen der URL auf der ursprünglichen Seite wird kein neuer Eintrag in der Browser-Historie hinzugefügt. Die Zurück-Schaltfläche geht also zur Seite davor zurück. Wenn das Opfer auf der ursprünglichen Website etwas herumgesurft hat, kehrt die Zurück-Schaltfläche leider zu diesen Seiten zurück. Vielleicht könnte die ursprüngliche Website eine Art Ajax-Seitenladevorgang verwenden, der die Browser-Historie nicht beeinflusst, um dieses Problem zu verhindern. Soweit ich weiß und recherchiert habe, gibt es keine Möglichkeit, die Browser-Historie vollständig über JavaScript zu löschen.

Eine weitere Überlegung ist die Position, der Stil und der Inhalt dieser "Flucht"-Schaltfläche. Sie können die Browser-Historie bereits manuell löschen, Websites wechseln, neue Tabs öffnen und Browserfenster schließen. Der Punkt hier ist, es in einer Notfallsituation sehr schnell zu tun. Eine kleine, irgendwo auf einer Seite versteckte Schaltfläche nützt da nicht viel, zumal das Opfer nicht die verinnerlichte Muskel-Erinnerung hat, schnell zu dieser Schaltfläche zu gelangen. Sie werden wahrscheinlich eher Steuerelemente verwenden, die sie häufiger verwenden, wie die Schaltfläche zum Schließen des Fensters.

Designtechnisch halte ich den besten Plan für groß, offensichtlich und persistent.

Diese große grüne Leiste wäre eine fest positionierte Leiste über die gesamte Breite. Sie haftet also unabhängig davon am unteren Rand der Seite. Der Text "Go" ist einfach, beschreibend und nicht verdächtig (Das Wort "Go" wird überall im Web verwendet). Die grüne Farbe passt zum Wort "Go" und ist kein Gefahrenindikator.

Es gibt auch einen Fragezeichen-Link darin, der auf eine Seite verlinken könnte, die erklärt, wofür diese riesige seltsame Leiste da ist.

Das ist soweit gut, aber trotz des riesigen Ziels kann das Bewegen der Maus etwas ungeschickt und langsam sein. Vielleicht tippt das Opfer gerade etwas, als der Täter hereinkommt. Wir könnten eine Tastenkombination bereitstellen, um dasselbe zu tun, was das Klicken auf die Leiste tun würde. DieESCAPETaste erscheint angemessen.

Da wir ähnliche Aktionen auf zwei verschiedene Arten auslösen müssen (Tastendruck oder Klick), ist es Zeit, die Funktionalität in eine Funktion zu abstrahieren, um Wiederholungen zu vermeiden.

function getAway() {
  // Get away right now
  window.open("http://weather.com", "_newtab");
  // Replace current site with another benign site
  window.location.replace('http://google.com');
}

$(function() {

  $("#get-away").on("click", function(e) {
    getAway();
  });

  $("#get-away a").on("click", function(e) {
    // allow the (?) link to work
    e.stopPropagation();
  });

  $(document).keyup(function(e) {
    if (e.keyCode == 27) { // escape key
      getAway();
    }
  });

});

Der neue Tastendruck "escape" funktioniert in Chrome und Opera identisch. In Safari öffnet sich ein neuer Tab und ersetzt die alte Seite, aber der neue Tab ist leer (offenbar kann man in Safari kein neues Fenster mit einem Speicherort per Tastendruck öffnen). Firefox ersetzt die aktuelle Seite sofort, blockiert das Popup jedoch standardmäßig, es sei denn, Sie erlauben sie explizit auf der Website.

Beachten Sie, dass ich das "keyup"-Ereignis verwendet habe. Es ist verlockend, "keydown" zu verwenden, um es etwas unmittelbarer zu machen, aber leider löst IE bei einem "keydown" der Escape-Taste keinen keyCode von 27 aus.

Demo ansehen

Was denken Sie, Leute? Wird das so gut wie möglich abdecken? Haben Sie bessere Ideen, um Opfern häuslicher Gewalt eine schnelle, getarnte Flucht von einer Website zu ermöglichen?

Gute Anmerkungen aus den Kommentaren

• Echte Website mit einer Fluchtmethode. Entfernt.
• Diese Seite blendet den gesamten Body aus, wenn Sie die Flucht einleiten (z. B. $("body").hide();). Auf diese Weise erfolgt das Ausblenden sofort, anstatt auf das Laden der nächsten Seite zu warten.
• Benutzer über privates Surfen aufzuklären, ist klug (z. B. Chrome’s "Inkognito"-Modus)
• Das Ändern des Textes auf der Seite (z. B. zu zufälligem Zeug aus Wikipedia) könnte eine weniger auffällige Änderung sein. Falls beispielsweise die Website, auf die umgeleitet wird, zu stark von der ursprünglichen abweicht und möglicherweise mehr/weniger Licht vom Bildschirm abgibt.
• Das Laden der Seite in einem Iframe würde das Hinzufügen zur Browser-Historie verhindern, auf Kosten der Benutzerfreundlichkeit.
• Wenn Sie Inaktivität erkennen können, leiten Sie die Seite nach einer angemessenen Zeit automatisch um. Für den Fall, dass das Opfer die Seite versehentlich auf dem Computer geöffnet lässt.
• Da Sie die Browser-Historie nicht löschen können, sollten Sie vielleicht eine Menge harmloser Inhalte in die Browser-Historie werfen, um ältere Sachen zu vergraben.