New Tabs, rel & mailto/tel

target controls where a link opens. target="_blank" opens in a new tab or window. Without anything else, that new page has access to window.opener, a reference back to your original tab. A malicious page can use that reference to silently redirect the tab that launched it, a technique called tabnapping. Adding rel="noopener" severs the opener connection. Adding noreferrer also suppresses the Referer request header. Both together is the standard pattern.

mailto: and tel: are URL schemes that hand off to the operating system rather than navigating the browser. href="mailto:hello@example.com" asks the OS to open the default email client with that address pre-filled. href="tel:+15551234567" asks the OS to dial the number, which on mobile opens the phone app.

The tabnapping attack is subtle: the user clicks an external link, the new tab opens, and nothing looks wrong. But the opened page runs window.opener.location = 'https://phishing-site.com' and the original tab silently redirects. The user glances back at the original tab and sees a convincing fake login page. rel="noopener" makes window.opener null in the new tab, shutting this attack down entirely.

mailto: and tel: links reduce friction on mobile. A phone number wrapped in a tel: link lets a user tap once to call instead of copying the number and switching apps. An email address in a mailto: link opens a compose window with the address already filled in. Both patterns are especially valuable on mobile where switching between apps and copying text is cumbersome.

For external links that open in a new tab, always pair target="_blank" with rel="noopener noreferrer". Modern browsers (since 2021) automatically add noopener behavior to _blank links, but being explicit is clearer and maintains correct behavior in older browsers. The rel attribute takes a space-separated list of relationship types, so both values sit in the same attribute.

The mailto: href follows the format mailto:address?subject=Subject&body=Body. All three parts after the colon are optional: a bare mailto: with no address opens a compose window with everything blank. Use encodeURIComponent in JavaScript if you are building the href dynamically, since spaces and special characters in the subject or body must be percent-encoded.

The tel: href uses the E.164 format: tel:+15551234567. Include the country code and omit spaces and dashes in the href value, even if you display the formatted number as the link text. The browser does not reformat the number.