Shulou(Shulou.com)06/01 Report--

This article is a detailed introduction to "what happens when target="_blank"is used for web page links". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "what happens when target="_blank"is used for web page links" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of Xiaobian.

We know that the a tag in the web page jumps to the link address in the current window by default. If you need to open it in a new window, you need to add a target="_blank" attribute to the a tag.

W3Cschool

By the way, an interesting phenomenon, long ago I found that foreign websites tend to jump in the current page, while domestic websites like to open new windows. Do not believe you can verify the next. I don't know if this is a cultural difference in interaction design or a technical development habit.

Of course, both methods have their advantages and disadvantages. The current page jump operation appears to be more coherent, does not rashly interrupt the user's attention, but also reduces the number of browser windows (tab pages). But for scenes where you have to go back to the original page repeatedly, it's troublesome. For example, search results pages usually need to be viewed and compared with several target addresses, and it is more convenient to keep them in multiple windows.

Today's talk isn't just about differences in user experience, it's about security and performance.

safety hazards

If only target="_blank" is added, after opening 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 restrict access to the properties of this object, there are still fish that escape.

This is the page console output for a new window opened on a web page. You can see some properties of window.opener, access to some properties is blocked because of cross-domain security policy restrictions.

Even so, it still leaves some opportunities for operation. For example, change the value of window.opener.location to point to another address. Think about it. You've just browsed through a website, and then you open a new window. As a result, the new window unknowingly changes the original website address. What can this be used for? Fishing! By the time you return to the phishing page, which has been disguised as a login page, you may have entered your account password in confusion.

Another way to play, if you are logged in, some actions may just send a GET request. By modifying the address, you perform an unintended operation, which is actually a CSRF attack.

performance issues

In addition to safety hazards, there are also potential performance problems. A new window opened with target="_blank" shares a process with the original page window. If the new page executes a lot of bad JavaScript code and consumes a lot of system resources, your original page will suffer as well.

solutions

Try not to use target="_blank", if you must use it, you need to add rel="nooper" or rel="noreferrer". This will make the new window's window.openner null, and will allow the new window to run in a separate process without dragging down the original page's process. However, some browsers are optimized for performance, and even without this attribute, new windows will open in a standalone process. However, for safety reasons, it was better to add them.

I found a blog site to try, click on the link inside to open a new page, window.openner is null. Looking at the page elements, we find that the a tag is added rel="noreferrer". Blogs are generated using Hexo, so it seems that this setting has become basic common sense.

Also, for new pages opened via window.open, you can do this:

var yourWindow = window.open ();yourWindow.opener = null;your_Window.location = "http://someurl.here";yourWindow.target = "_blank"; Read here, this article "What happens if the web link uses target="_blank"" has been introduced. If you want to master the knowledge points of this article, you need to practice them yourself to understand them. If you want to know more about related articles, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.