javascript: URLs

JavaScript URLs start with the javascript: scheme and are followed by JavaScript code. The code will be parsed as a script.

javascript:<script>

javascript: URLs can be used anywhere a URL is a navigation target. This includes, but is not limited to:

• The href attribute of an <a> or <area> element.
• The action attribute of a <form> element.
• The src attribute of an <iframe> element.
• The window.location JavaScript property.
• The browser address bar itself.

When a browser attempts to navigate to such a location, it parses and executes the script body. The script may have a completion value (not a return value), which is the same value if the script were executed with eval(). If the last statement is an expression, the completion value is the value of that expression. If this completion value is a string, that string is treated as an HTML document and the browser navigates to a new document with that content, using the same URL as the current page. No history entry is created. If the completion value is not a string, the browser only executes the code and does not navigate. Therefore, it's often recommended that if the script ends with a function call like javascript:foo(), you should prefix it with void to prevent accidental navigation if the function happens to return a string.

javascript: navigation may be blocked by content security policy settings, in particular script-src.

In this example, the href attribute of an <a> element is set to a javascript: URL that alerts a message when clicked:

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

Because alert() returns undefined, the browser does not navigate to a new page. This is a bad practice because the link is actually not a hyperlink. Consider making it a button instead:

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

In this example, the href attribute of an <a> element is set to a javascript: URL that navigates to a new page with the content "Hello, world!":

<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>

Note that because javascript: URLs do not create history entries, there's no way to go back to the previous page without refreshing.

In this example, the action attribute of a <form> element is set to a javascript: URL that alerts a message when submitted:

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

Instead of doing this, consider listening for the form's submit event and handling it with JavaScript:

<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 this example, the src attribute of an <iframe> element is set to a javascript: URL that navigates to a new page with the content "Hello, world!":

<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>

Instead of doing this, consider setting the srcdoc attribute instead:

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

In this example, the window.location property is set to a javascript: URL that navigates to a new page with the content "Hello, world!":

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

Instead of doing this, consider using DOM APIs to modify the page content. For example:

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

• URIs
• Content Security Policy (CSP)
• IANA list of URI schemes