The link to the web page is using targetts and quot; _blank" , the results were unexpected

This article shares a point of knowledge about the Web. I f you've been doing Web development for a while, you probably already know. But for novices you can still understand.

We know that the a label in the web page skips the link address by default in the current window, and if you need to open it in a new window, you need to add a target to the a label target="_blank" property.

<a href="https://www.w3cschool.cn/" target="_blank">W3Cschool编程狮</a>

By the way, the next interesting phenomenon, I found a long time ago, foreign sites tend to jump on the current page, and domestic sites like to open new windows. D on't believe you can go to verify it. I don't know if it's a cultural difference in interactive design or a technical development habit.

Of course, there are advantages and disadvantages to both approaches. T he current page jump appears to be more consistent, does not suddenly interrupt the user's attention, and also reduces the number of browser windows (tab pages). B ut for scenarios that need to go back to the initial page over and over again, it's a hassle. For example, search results pages, often need to see a comparison of several destination addresses, keep in multiple windows or more convenient.

Today we're not just talking about differences in user experience, they're about security and performance.

Security risks

If you simply add target="_blank" when you open a new window, the new page can get the window object of the source page through window.opener even across domains. Although cross-domain pages have limited access to the properties of this object, there are fish that are missing the net.

This is the output from the page console where a page opens a new window. You can see some properties of window.opener some of which are blocked because of restrictions on cross-domain security policies.

Even so, there are opportunities for some operations. F or example, modify the value of window.opener.location to point to another address. I f you think about it, you've just browsed a website and then opened a new window, and the new window has unwittingly changed the original web address. W hat can this be used for? F ishing! By the time you get back to that phishing page, which has been disguised as a login page, you may be confused about entering your account password.

There's also a way to play, and if you're signed in, some actions might just send a GET request and it's over. By modifying the address, you do something that you didn't intend to do, which is actually a CSRF attack.

Performance issues

In addition to security concerns, there may be performance issues. S hare a process with the original page window with a new window that opens with target="_blank" If this new page executes a lot of bad JavaScript code and consumes a lot of system resources, your original page will also be affected by the pool fish.

solution

Try not to use target="_blank" and, if necessary, add rel="noopener" or rel="noreferrer" T his way the window.openner of the new window is null and the new window runs in a separate process without dragging down the original page. H owever, some browsers are optimized for performance, and even without this property, new windows open in stand-alone processes. But for safety reasons, add it.

I found a blog site to try, click on the outside chain inside to open a new page, window.openner都 is null L ooking at the page elements, you find that a label is labeled with rel"""noreferrer". Blogs are generated with Hexo, and it seems that this setting has become a basic common sense.

In addition, you can do this for new pages that are opened through window.open

var yourWindow = window.open();
yourWindow.opener = null;
yourWindow.location = "http://someurl.here";
yourWindow.target = "_blank";

I hope this trick will be useful to you.

The above is W3Cschool编程狮 about the web link with target "_blank", the results of unexpected related introduction, I hope to help you.