javascript: URLs

JavaScript-URLs beginnen mit dem Schema javascript: und werden von JavaScript-Code gefolgt. Der Code wird als Skript geparst.

javascript:<script>

javascript:-URLs können überall dort verwendet werden, wo eine URL ein Navigationsziel ist. Dazu gehören, aber sind nicht beschränkt auf:

• Das href-Attribut eines <a>- oder <area>-Elements.
• Das action-Attribut eines <form>-Elements.
• Das src-Attribut eines <iframe>-Elements.
• Die JavaScript-Eigenschaft window.location.
• Die Adressleiste des Browsers selbst.

Wenn ein Browser versucht, zu einem solchen Standort zu navigieren, parst und führt er den Skriptkörper aus. Das Skript kann einen Kompletionswert haben (keinen Rückgabewert), der der gleiche Wert ist, als wäre das Skript mit eval() ausgeführt worden. Wenn die letzte Anweisung ein Ausdruck ist, ist der Kompletionswert der Wert dieses Ausdrucks. Wenn dieser Kompletionswert ein String ist, wird dieser String als ein HTML-Dokument behandelt, und der Browser navigiert zu einem neuen Dokument mit diesem Inhalt, wobei die gleiche URL wie die aktuelle Seite verwendet wird. Es wird kein Verlaufs-Eintrag erstellt. Wenn der Kompletionswert kein String ist, führt der Browser nur den Code aus und navigiert nicht. Daher wird oft empfohlen, wenn das Skript mit einem Funktionsaufruf wie javascript:foo() endet, dass Sie es mit void prefixen, um eine versehentliche Navigation zu verhindern, falls die Funktion zufällig einen String zurückgibt.

Die javascript:-Navigation kann durch die Einstellung der Content Security Policy, insbesondere script-src, blockiert werden.

In diesem Beispiel ist das href-Attribut eines <a>-Elements auf eine javascript:-URL gesetzt, die eine Nachricht ausgibt, wenn darauf geklickt wird:

<a href="javascript:alert('Hello, world!')">Click me</a>

Da alert() undefined zurückgibt, navigiert der Browser nicht zu einer neuen Seite. Dies ist eine schlechte Praxis, weil der Link eigentlich kein Hyperlink ist. Erwägen Sie, ihn stattdessen zu einem Button zu machen:

<button id="btn">Click me</button>
<script>
  document.getElementById("btn").addEventListener("click", () => {
    alert("Hello, world!");
  });
</script>

In diesem Beispiel ist das href-Attribut eines <a>-Elements auf eine javascript:-URL gesetzt, die zu einer neuen Seite mit dem Inhalt "Hello, world!" navigiert:

<a href="javascript:pageContent">Click me</a>
<script>
  // Use a var so it becomes a global variable and can be read elsewhere
  var pageContent = "Hello, world!";
</script>

Beachten Sie, dass javascript:-URLs keine Verlaufs-Einträge erstellen, sodass es keinen Weg zurück zur vorherigen Seite gibt, ohne zu aktualisieren.

In diesem Beispiel ist das action-Attribut eines <form>-Elements auf eine javascript:-URL gesetzt, die eine Nachricht ausgibt, wenn sie gesendet wird:

<form action="javascript:alert(myInput.value)">
  <input id="myInput" />
  <input type="submit" value="Submit" />
</form>

Stattdessen sollten Sie das submit-Ereignis des Formulars überwachen und mit JavaScript bearbeiten:

<form id="myForm">
  <input id="myInput" />
  <input type="submit" value="Submit" />
</form>
<script>
  document.getElementById("myForm").addEventListener("submit", (event) => {
    event.preventDefault();
    alert(document.getElementById("myInput").value);
  });
</script>

In diesem Beispiel ist das src-Attribut eines <iframe>-Elements auf eine javascript:-URL gesetzt, die zu einer neuen Seite mit dem Inhalt "Hello, world!" navigiert:

<iframe src="javascript:pageContent"></iframe>
<script>
  // Use a var so it becomes a global variable and can be read elsewhere
  var pageContent = "Hello, world!";
</script>

Erwägen Sie stattdessen, das srcdoc-Attribut zu setzen:

<iframe id="myFrame"></iframe>
<script>
  document.getElementById("myFrame").srcdoc = "Hello, world!";
</script>

In diesem Beispiel wird die window.location-Eigenschaft auf eine javascript:-URL gesetzt, die zu einer neuen Seite mit dem Inhalt "Hello, world!" navigiert:

window.location = "javascript:'Hello world!'";

Erwägen Sie stattdessen, DOM-APIs zu verwenden, um den Seiteninhalt zu ändern. Zum Beispiel:

document.body.textContent = "Hello, world!";

• URIs
• Content Security Policy (CSP)
• IANA-Liste der URI-Schemata