JavaScript für Alle!

[Beschreibung] [Quelltext] [Erläuterung] [Übung] [Referenz]

Schutz vor "Frame-Piraten"

1. Beschreibung

Mit dem Einsatz der Frame-Technik ist es möglich, daß fremde Seitenersteller Dokumente von uns in einem ihrer Frames darstellen. Sie erwecken so den Eindruck, daß diese Seite von ihnen stammt.
In dem hier vorgestellten Beispiel wird geprüft, ob unsere eigene Seite als Bestandteil eines fremden Framesets dargestellt wird. Wenn dies zutrifft, so wird ein Verweis auf unseren eigenen Server ausgegeben.
In einem 2. Beispiel wird radikaler vorgegangen: das Frameset wird komplett aufgelöst und durch unsere eigene Seite ersetzt.

1. Quelltext


<body>
<script language="JavaScript">
<!--
  if(parent !=null && parent != self) {
    var host=parent.location.hostname;
    if(host != "www.bingo.baynet.de") {
      document.write("<center>Diese Seite wurde ausgeliehen bei "+
        "<a href=\""+location.href+"\" target=\"_parent\">"+
        "bingo e.V.</a></center>")
    }
  }
//-->
</script>
...

1. Erläuterung

Im diesem Beispiel, wird zunächst geprüft, ob parent und self unterschiedlich sind; wenn ja, dann bedeutet das, daß das aktuelle Dokument als Bestandteil eines Framesets dargestellt wird.
Wenn dies zutrifft, wird abgefragt, auf welchem Host das übergeordnete Dokument liegt. Wenn es sich dabei nicht um den bingo-Server handelt, dann wird ein entsprechender Verweis mit Link auf den eigentlichen Ersteller der Seite eingeblendet.

2. Beispiel

Wem ein solcher "freundlicher" Urheber-Verweis nicht ausreicht, der kann auch einen Schritt weiter gehen und das rufende Frameset komplett auflösen und statt dessen nur noch das eigene Dokument darstellen. Dies läßt sich mit folgendem Skript realisieren :

2. Quelltext


<head>
<script language="JavaScript">
<!--
  function init() {
    if(parent != null && parent != self) {
      var host=parent.location.hostname;
      if(host != "www.bingo.baynet.de") {
        top.location.href=self.location.href;
      }
    }
  }
//-->
</script>
</head>
<body onLoad="init()">
...

2. Erläuterung

Dieses Skript ist im <head>-Bereich abgelegt. Es wird nach dem Laden des Dokuments über das im <body>-tag definierte Ereignis onLoad aktiviert.
In diesem Skript wird die URL des übergeordneten Dokuments mit der URL des eigenen Dokuments überschrieben. Das bewirkt, daß anstelle des übergeordneten Dokuments das eigene geladen wird. Die im 2. Beispiel beschriebene Vorgehensweise sollte meiner Meinung nach nur in Ausnahmefällen angewandt werden. Grundsätzlich freue ich mich ja, wenn auf meine Seiten verwiesen wird.

Die im 2. Beispiel beschriebene Vorgehensweise funktioniert nicht mehr mit Netscape 3.0: das Ändern des location-Objekts von fremden Seiten wird hier nicht mehr zugelassen.

if (Bedingung) Anweisung

if (Bedingung) { 
  Anweisung1
  Anweisung2
  ...
}

if (Bedingung) { 
  Anweisung1
  Anweisung2
  ...
} else {
  Anweisung3
  Anweisung4
  ...
}

if (Bedingung1) {  
  Anweisung1
  Anweisung2
  ...
} else if(Bedingung2) {
  Anweisung3
  Anweisung4
  ...
} else if(Bedingung3) {
  ...
}

Im einfachsten Fall folgt auf die Bedingung unmittelbar eine einzelne Anweisung. Wenn zu einer Bedingung mehrere Anweisungen gehören, so werden sie mit geschweiften Klammern { und } zusammengebunden. Hinter der Anweisung else wird angegeben, was getan werden soll, wenn die vorhergehende Bedingung nicht erfüllt ist.

Zur Formulierung einer Bedingung stehen Vergleichsoperatoren und logische Operatoren zur Verfügung:

Vergleichsoperatoren logische Operatoren

== gleich && logisches UND

< kleiner als || logisches ODER

> größer als ! logisches NICHT

<= kleiner oder gleich

>= größer oder gleich

!= ungleich

Mit den Vergleichsoperatoren können zwei Operanden verglichen werden, z.B. "a == 1" (ist der Wert der Variablen a gleich 1 ?), "a < b" (ist der Wert von a kleiner als der von b ?) oder "text == "hallo"" (enthät der String text den Wert "hallo" ?). Das Ergebnis einer solchen Operation ist ein logischer Wert, entweder true (wahr) oder false (falsch). Logische Werte wiederum können über die logischen Operatoren verknüpft werden.

Vergleichsoperatoren	logische Operatoren
==	gleich	&&	logisches UND
<	kleiner als	\|\|	logisches ODER
>	größer als	!	logisches NICHT
<=	kleiner oder gleich
>=	größer oder gleich
!=	ungleich

self, parent, top

Beim Arbeiten mit Frames gibt es folgende Synonyme :

parent	ist in einem Frameset die übergeordnete Seite, die die eigene Seite aufgerufen hat.
self	ist das Fenster, in dem das eigene Dokument dargestellt wird
top	ist das hierarchisch höchste Fenster

(Mehr zu Framesets finden Sie auf Seite 12)
Die angegebenen Synonyme verweisen auf Objekte vom Typ window.

window.location

Ein window-Objekt besitzt stets als Child ein location-Objekt. Das location-Objekt beschreibt die URL des Dokuments und besitzt seinerseits folgende Eigenschaften:

protocol	das verwendete Protokoll, z.B. "http:" oder "file:"
hostname	der Name des Webservers, z.B. "www.bingo.baynet.de"
port	TCP/IP Portnummer
host	ist eine Kombination aus hostname und port.
pathname	Pfadname des Dokuments, z.B. "/~ub304/index.htm"
hash	Anker, z.b. "#Einleitung"
search	Query-String in Zusammenhang mit CGI-Abfragen
href	die komplette URL
target	das target-Element aus einem <a href=...>-tag

Neu in V 1.1 sind die Methoden

reload() Erneutes Laden der Seite, entspricht dem Reload-Button des Browsers V 1.1
replace(url) Laden der Seite url anstelle der derzeit geladenen Seite; dabei wird die aktuelle Seite in der Liste der bisher besuchten Seiten überschrieben V 1.1

Auf der nächsten Seite zählen wir die Beine von Schafen.

reload()	Erneutes Laden der Seite, entspricht dem Reload-Button des Browsers	V 1.1
*replace(url)*	Laden der Seite url anstelle der derzeit geladenen Seite; dabei wird die aktuelle Seite in der Liste der bisher besuchten Seiten überschrieben	V 1.1