Open a URL in a new tab (and not a new window)

Opening URLs in New Tabs: The Right Way with JavaScript

Learn how to reliably open a URL in a new browser tab using JavaScript, avoiding common pitfalls and ensuring a smooth user experience.

Opening a URL in a new browser tab is a common requirement for web applications, allowing users to navigate to external resources or secondary content without leaving the current page. While seemingly straightforward, there are nuances to ensure cross-browser compatibility and proper user experience. This article will guide you through the correct methods using JavaScript, focusing on window.open() and its associated security considerations.

The window.open() Method

The primary JavaScript method for opening new browser windows or tabs is window.open(). This method takes up to three arguments: the URL to open, the target window name, and a string of window features. To open a URL in a new tab, the key is to use _blank as the target. This tells the browser to open the URL in a new, unnamed browsing context, which typically results in a new tab rather than a new window, depending on the user's browser settings.

function openInNewTab(url) {
  window.open(url, '_blank');
}

// Example usage:
openInNewTab('https://www.example.com');

Basic usage of window.open() to open a URL in a new tab.

Security Considerations: rel="noopener noreferrer"

When using target="_blank" with window.open() or directly in an <a> tag, there's a potential security vulnerability known as 'tabnabbing'. The newly opened page can gain partial access to the originating window via window.opener, allowing it to redirect the original page to a phishing site. To prevent this, it's crucial to add rel="noopener noreferrer" to your links or ensure window.opener is nullified when using window.open().

flowchart TD
    A[User Clicks Link] --> B{`target="_blank"` Used?}
    B -- Yes --> C[New Tab/Window Opens]
    C --> D{`rel="noopener noreferrer"` Present?}
    D -- Yes --> E[Original Window Protected]
    D -- No --> F[Original Window Vulnerable to Tabnabbing]
    B -- No --> G[Link Opens in Same Tab]

Flowchart illustrating the security implications of target="_blank".

function openInNewTabSecurely(url) {
  const newWindow = window.open(url, '_blank');
  if (newWindow) {
    newWindow.opener = null; // Explicitly nullify opener for security
  }
}

// Example usage:
openInNewTabSecurely('https://www.secure-example.com');

Secure usage of window.open() by nullifying window.opener.

Handling Pop-up Blockers

Browsers often have pop-up blockers that can prevent window.open() from working if it's not directly triggered by a user action (e.g., a click event). To ensure your new tab opens, always call window.open() within the context of a user-initiated event handler.

<button id="openLinkBtn">Open Example.com</button>

<script>
  document.getElementById('openLinkBtn').addEventListener('click', function() {
    openInNewTabSecurely('https://www.another-example.com');
  });
</script>

Opening a new tab within a user-initiated click event to bypass pop-up blockers.