Today TO share a Web knowledge point. If you’ve been doing Web development for a while, you probably already know this. However, for beginners, it is necessary to know.

If you want to open a new window, add a target=”_blank” attribute to the A TAB.

<a href="http://kaysonli.com/" target="_blank"> 1024 translation standing < / a >Copy the code

By the way, another interesting phenomenon, I discovered long ago that foreign websites tend to jump to the current page, while domestic websites like to open a new window. You can check it out if you don’t believe me. I don’t know if this is a cultural difference in interaction design or a technical development habit.

Of course, both approaches have their advantages and disadvantages. The current page jump is more consistent, does not break the user’s concentration, and reduces the number of browser Windows (tabs). But for scenarios that require repeated trips back to the original page, it can be troublesome. For example, search results page, usually need to view and compare several target addresses, retain in multiple Windows or more convenient.

This is not just about user experience differences, but about security and performance.

Safe hidden trouble

If you just add target=”_blank” to a new window, the new page can get the window object of the source page via window.opener, even across domains. Although cross-domain pages restrict access to properties of this object, there are still some loopholes.

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

Even so, there is room for manoeuvre. For example, change the value of window.opener. Location to point to another address. Imagine being on a web site and opening a new window, only to find that the new window has changed the address of the original page. What can this be used for? Fishing! By the time you get back to that phishing page, it’s disguised as a login page, and you might have entered your account and password without knowing it.

Another way to play, if you’re logged in, some of the actions might just be a GET request. By changing the address, you’re doing something you didn’t mean to do, which is a CSRF attack.

Performance issues

In addition to security risks, there are potential performance issues. A new window opened by target=”_blank” shares the same process as the original page window. If the new page executes a lot of poorly performing JavaScript code and takes up a lot of system resources, your old page will suffer as well.

The solution

Don’t use target=”_blank”, or rel=”noopener” or rel=”noreferrer” if you do. Openner for the new window will be null, and the new window will run in a separate process without dragging down the original page process. Of course, some browsers are optimized for performance, and even without this property, new Windows will open in a separate process. But to be safe, I’ll add it.

I tried using my own blog website 1024 translator, click the outer link inside to open a new page, window.openner is null. If you look at the page elements, you’ll find that the A tag has rel=”noreferrer”. Blogs are generated with Hexo, so this setup seems to be common sense.

Alternatively, for a new page opened with window.open, you can do this:

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

See this rather energetic logo, don’t pay attention to it?