Should Links Open in the Same Tab or a New One?
Tags: web, firefox
Published: 2023-05-04 12:33:57

---
title: Should Links Open in the Same Tab or a New One?
published: true
date: 2023-04-24 22:30:00 UTC
tags: Web,Firefox
canonical_url: https://kevincox.ca/2023/04/24/browser-link-open-newwindow/
---

<main style="--width:min(36em,100%);display:grid;grid-template-columns:1fr var(--width) 1fr;overflow:auto;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">I’ve seen it discussed a number of times. When you make a site should links open in the same tab or a different one? To <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">target=_blank</code> or not to <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">_blank</code>. I’ve seen a variety of opinions.</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">Interactive demo? Sure <a href="https://example.com" style="box-sizing:border-box;margin:0;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray">this link opens in the same tab</a> and <a href="https://example.com" target="_blank" style="box-sizing:border-box;margin:0;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray">this link opens in a new one</a>.</p>
<h2 id="user-opinions" style="box-sizing:border-box;grid-column:2;margin:1.5em 1rem .8em"><a href="https://kevincox.ca/2023/04/24/browser-link-open-newwindow/#user-opinions" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">User Opinions</a></h2>
<h3 id="always-open-in-the-same-tab" style="box-sizing:border-box;grid-column:2;margin:.4em 1rem .8em"><a href="https://kevincox.ca/2023/04/24/browser-link-open-newwindow/#always-open-in-the-same-tab" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">Always open in the same tab</a></h3>
<blockquote style="box-sizing:border-box;font-size:1.2em;grid-column:2;margin:1em;padding:.6em;position:relative"><p style="box-sizing:border-box;font-style:italic;margin:0 1rem;padding-bottom:0;padding-top:0;text-align:center">First of all, they are set to open a new tab. Rude.</p></blockquote>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">The most common reason for this viewpoint seems to be that it is very easy to open links in new tabs. Most browsers have some easy shortcuts. Personally I usually middle-click. But <kbd style="border:2px solid #555;border-radius:2px;box-shadow:2px 2px #333;box-sizing:border-box;margin:0;padding:0 .1em">CTRL+Click</kbd>, <kbd style="border:2px solid #555;border-radius:2px;box-shadow:2px 2px #333;box-sizing:border-box;margin:0;padding:0 .1em">CMD+Click</kbd> or long-press may work depending on your browser and device. I’m not aware of any browsers that support the reverse, opening a <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">target=_blank</code> link in the same tab.</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">I’ve also heard from people who just don’t like having too many tabs open. So opening in the same tab is desirable.</p>
<h3 id="always-open-in-a-new-tab" style="box-sizing:border-box;grid-column:2;margin:.4em 1rem .8em"><a href="https://kevincox.ca/2023/04/24/browser-link-open-newwindow/#always-open-in-a-new-tab" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">Always open in a new tab</a></h3>
<blockquote style="box-sizing:border-box;font-size:1.2em;grid-column:2;margin:1em;padding:.6em;position:relative"><p style="box-sizing:border-box;font-style:italic;margin:0 1rem;padding-bottom:0;padding-top:0;text-align:center">I truly hate when I’m trying to view a link and it navigates me away from what I’m reading.</p></blockquote>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">This viewpoint seems to be less common, but some people like the workflow. New content new tab, keep it simple.</p>
<h3 id="internal-links-same-tab-external-links-new-tab" style="box-sizing:border-box;grid-column:2;margin:.4em 1rem .8em"><a href="https://kevincox.ca/2023/04/24/browser-link-open-newwindow/#internal-links-same-tab-external-links-new-tab" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">Internal links same tab, external links new tab</a></h3>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">This seems to be a common implementation on websites, and some users agree with it. I think the logic is that each tab should be one site. New sites should open in new tabs.</p>
<h2 id="recommendation-for-web-developers" style="box-sizing:border-box;grid-column:2;margin:1.5em 1rem .8em"><a href="https://kevincox.ca/2023/04/24/browser-link-open-newwindow/#recommendation-for-web-developers" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">Recommendation for web developers</a></h2>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">My recommendation is to avoid setting <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">target=_blank</code> on your links. Use the default and let the browser do what their user wants (that is the point of the user agent). This provides a more consistent experience for users and allows them to override the option with a convenient shortcut or context-menu option.</p>
<h2 id="enforcing-your-choice" style="box-sizing:border-box;grid-column:2;margin:1.5em 1rem .8em"><a href="https://kevincox.ca/2023/04/24/browser-link-open-newwindow/#enforcing-your-choice" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">Enforcing your choice</a></h2>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">Browsers have fairly limited support for enforcing your preference. You could try a <a href="https://en.wikipedia.org/wiki/Userscript" style="box-sizing:border-box;margin:0;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray">userscript</a> that intercepts all link clicks, but you will be racing with the page in many cases.</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">However, Firefox does have an advanced <a href="https://kb.mozillazine.org/Browser.link.open_newwindow" style="box-sizing:border-box;margin:0;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray"><code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">browser.link.open_newwindow</code></a> option if you always want to open links in a new tab. It accepts an integer value to select how “new window” requests are handled. (Unfortunately it can’t be use to divert same-tab loads into new tabs or windows.)</p>
<dl style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">
<dt style="box-sizing:border-box;font-weight:700;margin:0"><code style="box-sizing:border-box;color:#fff;margin:0;white-space:pre-wrap">browser.link.open_newwindow=1</code></dt>
<dd style="box-sizing:border-box;margin:0 0 1em">Open “new window” links in the current tab.</dd>
<dt style="box-sizing:border-box;font-weight:700;margin:0"><code style="box-sizing:border-box;color:#fff;margin:0;white-space:pre-wrap">browser.link.open_newwindow=2</code></dt>
<dd style="box-sizing:border-box;margin:0 0 1em">Open “new window” links in a new window.</dd>
<dt style="box-sizing:border-box;font-weight:700;margin:0"><code style="box-sizing:border-box;color:#fff;margin:0;white-space:pre-wrap">browser.link.open_newwindow=2</code></dt>
<dd style="box-sizing:border-box;margin:0">Open “new window” links in a new tab of the current window.</dd>
</dl>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">Personally I set it to <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">1</code> to make all links open in the same window. Overall this works well and makes the web more predictable. However, it can cause some site breakage. Here are the problems that I have seen:</p>
<h3 id="third-party-authorization-flows" style="box-sizing:border-box;grid-column:2;margin:.4em 1rem .8em"><a href="https://kevincox.ca/2023/04/24/browser-link-open-newwindow/#third-party-authorization-flows" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">Third-party Authorization Flows</a></h3>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">This is the only place where I see major problems. Some sites will open a new window to an authorization provider and attempt to communicate with it via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/opener" style="box-sizing:border-box;margin:0;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray"><code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">window.opener</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage" style="box-sizing:border-box;margin:0;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray"><code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">postMessage</code></a>. However if the previous window is replaced the <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">postMessage</code> call will fall into the void, breaking the authorization flow. This is a relatively rare method of communicating (most flows use a redirect URL rather than <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">postMessage</code>) but I do run into occasionally (a few times a month).</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">Unfortunately there isn’t a perfect solution to this. Firefox uses the <a href="https://kb.mozillazine.org/Browser.link.open_newwindow.restriction" style="box-sizing:border-box;margin:0;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray"><code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">browser.link.open_newwindow.restriction</code></a> option to control this behaviour. You can use <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">1</code> to ignore <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">browser.link.open_newwindow</code> (which defeats the whole purpose but can be used for a temporary workaround), <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">0</code> to force <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">browser.link.open_newwindow</code> in absolutely all cases (which makes the problem worse) or the default value of <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">2</code> which provides an escape hatch. When opening windows with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/open" style="box-sizing:border-box;margin:0;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray"><code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">window.open</code></a> passing the third parameter will cause it to bypass the force.</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">This means that you can open a popup like this:</p>
<div style="background:#222;border-bottom:1px solid #444;border-top:1px solid #444;box-sizing:border-box;display:grid;grid-column:2;grid-column:1/4;grid-template-columns:1fr var(--width) 1fr;margin:0 0 .8em;overflow-x:auto;padding:0"><pre style="box-sizing:border-box;grid-column:2;margin:.4em 1rem"><code style="background:none!important;box-sizing:border-box;color:#fff;margin:0;white-space:pre-wrap;white-space:pre"><span style="box-sizing:border-box;margin:0;padding:0">open</span><span style="box-sizing:border-box;color:#999;margin:0;padding:0">(</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">https://example.com</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#999;margin:0;padding:0">,</span> <span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">_blank</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#999;margin:0;padding:0">,</span> <span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">popup</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#999;margin:0;padding:0">);</span>
</code></pre></div>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em"><button style="box-sizing:border-box;margin:0">Live Demo</button></p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">Unfortunately if you don’t want a popup window (for example opening in a new tab) it gets tricky. <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">popup=0</code> doesn’t trigger the bypass and any option (valid or not) implies <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">popup</code> except for <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">noopener</code> and <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">noreferrer</code>.</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">So we have two options for opening links in a new tab:</p>
<div style="background:#222;border-bottom:1px solid #444;border-top:1px solid #444;box-sizing:border-box;display:grid;grid-column:2;grid-column:1/4;grid-template-columns:1fr var(--width) 1fr;margin:0 0 .8em;overflow-x:auto;padding:0"><pre style="box-sizing:border-box;grid-column:2;margin:.4em 1rem"><code style="background:none!important;box-sizing:border-box;color:#fff;margin:0;white-space:pre-wrap;white-space:pre"><span style="box-sizing:border-box;margin:0;padding:0">open</span><span style="box-sizing:border-box;color:#999;margin:0;padding:0">(</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">https://example.com</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#999;margin:0;padding:0">,</span> <span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">_blank</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#999;margin:0;padding:0">,</span> <span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">noopener</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#999;margin:0;padding:0">);</span>
<span style="box-sizing:border-box;color:#ccc;font-style:italic;margin:0;padding:0;white-space:pre-wrap">// or</span>
<span style="box-sizing:border-box;margin:0;padding:0">open</span><span style="box-sizing:border-box;color:#999;margin:0;padding:0">(</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">https://example.com</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#999;margin:0;padding:0">,</span> <span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">_blank</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#999;margin:0;padding:0">,</span> <span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">noreferrer</span><span style="box-sizing:border-box;color:#b3d733;margin:0;padding:0">"</span><span style="box-sizing:border-box;color:#999;margin:0;padding:0">);</span>
</code></pre></div>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">Unfortunately <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">noopener</code> prevents the <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">window.opener</code> property from being available—which is the main reason we need this in the first place—so it is probably not acceptable. <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">noreferrer</code> is more likely to be suitable but some authorization flows will check the referrer to avoid phishing attacks and provide defence-in-depth.</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">It would be really nice if there was a <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">newwindow</code> option, or <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">popup=0</code> could be used as a general solution. Also, because this is an advanced option it is rarely used and isn’t really supported, so it can be hard to get sites to support this configuration. That being said in most cases one of <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">noreferrer</code> or <code style="background:#000;border:1px solid #555;border-radius:.3em;box-sizing:border-box;color:#fff;margin:0;padding:.1em;white-space:pre-wrap">popup</code> will work. So if you work on a site I encourage you to add one of these features to your authorization flows if they otherwise break with windows set to a new tab.</p>
<h3 id="fake-links" style="box-sizing:border-box;grid-column:2;margin:.4em 1rem .8em"><a href="https://kevincox.ca/2023/04/24/browser-link-open-newwindow/#fake-links" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">Fake Links</a></h3>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">The other pain-point is much more minor. Use of javascript-based <a href="https://kevincox.ca/2021/08/18/fake-links/" style="box-sizing:border-box;margin:0;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray">fake links</a> is prevalent on the web. This is already a bad experience for users (see the linked post for some reasons why) but it can be made worse when forcing new pages into the same tab. This is because there seems to be a correlation between bloated, slow websites and fake links. These sites often open links in new tabs because reloading after the back button would be too slow. These sites also frequently lack good URL state so going back is likely to forget what you were doing (because they try to open links in a new tab they expect their site to be long-lived). A problem of the site to be sure but removing their mitigation can be painful.</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">For example Google Drive uses fake links and is painfully slow to navigate. I like files opening in the same tab by default (as I often know what file I want) so it is nice to have this setting enabled. However, if you want to open a few documents (common after a search) there is no way to open them in new tabs. This means after waiting for your slow document load you then need to reload the slow search listing which resets to the top every time. I often find myself duplicating the search tab a handful of times to let it load in parallel then open one result per tab. This is far slower than just scanning the list and middle-clicking relevant-sounding results would be.</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">So while this is technically a wash (half of the time you want same tab and get it while half of the time you want a new tab and don’t) it seems that one the sites where this is most often an issue I do actually want to open links in a new tab. Overall I still find this to be worth it because I try to avoid these sites anyways, so this is rarely a problem in my day-to-day browsing.</p></main>