Matthew C.
—You have a link element pointing to a website that you want to open in a new tab when it’s clicked. This is useful if you have multiple links to external websites that a user might navigate to, as it means less back-button clicking and page reloads.
The target
attribute of a link element specifies where to open the linked URL. If you set target
to "_blank"
, the URL will usually open in a new tab. Users can configure their browsers to open links in a new window.
<a href="https://www.google.com" target="_blank">Google</a>
Note that there is a security concern with using target="_blank"
: The linked page gets partial access to the linking page through the window.opener
object, a vulnerability that can be exploited for a phishing attack.
For example, a user on a social media website may click a link to a phishing website that changes the window location of the linking page to a fake website that mimics the log-in page of the real social media website. If the user doesn’t realize that the website URL has changed, they may assume they were logged out and try to log in again, giving the attacker a chance to steal their login details. Read more about this in the article Target=”_blank” - the most underestimated vulnerability ever.
To fix this vulnerability, you can add rel="noopener noreferrer"
to the link. The noopener
keyword tells the browser to set window.opener
to null
so that the linked page does not get partial access to the linking page. The noreferrer
header tells the browser to omit the Referer
header to prevent sending referrer information.
Newer browsers that implicitly set rel="noopener"
to links using target="_blank"
have largely overcome this vulnerability. You can see which browsers support this behavior here.
If you need to open a URL in a new tab using JavaScript, you can use the open()
method of the Window
interface:
window.open('https://www.google.com', '_blank', 'noopener, noreferrer');
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODESConsidered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.
Here’s a quick look at how Sentry handles your personal information (PII).
×We collect PII about people browsing our website, users of the Sentry service, prospective customers, and people who otherwise interact with us.
What if my PII is included in data sent to Sentry by a Sentry customer (e.g., someone using Sentry to monitor their app)? In this case you have to contact the Sentry customer (e.g., the maker of the app). We do not control the data that is sent to us through the Sentry service for the purposes of application monitoring.
Am I included?We may disclose your PII to the following type of recipients:
You may have the following rights related to your PII:
If you have any questions or concerns about your privacy at Sentry, please email us at [email protected].
If you are a California resident, see our Supplemental notice.