Most web developers do not even recognize:
The page to which we refer to using target \u003d "_ blank" gets access to the source page through the Window.opener object.
For example, thus the open tab can change the window.opener.location, i.e. Instead of the previous tab, imperceptibly load a completely different page.
The most terrible thing is that this vulnerability is present on many popular domestic and foreign sites: whereas on Facebook corrected it a few days ago, it still works, for example, in Yandex.We.
Example of attack
Relying on such behavior of browsers, you can come up with many scenarios, that's the easiest:
1. The victim is sent a letter, perhaps with a fake address. The content of the letter completely does not matter: the main thing is to force the victim to follow the link with a malicious code. For example, it may be please check out Mi-Mi-Municipal quotes like the fact that below. Target \u003d "_ blank" Yandex adds automatically into all letters.
2. The victim opens the letter to Yandex.Well, clicks on the link, in which the site-gasket is opened in the new tab, which performs a malicious code, which instead of Yandex. Please download a phishing site, very similar to the original, but, for example, requested re-enter login and password , as well as to remove suspicions, really makes forwarding to the cats.
An example of such code:
// Subtitution of the original Yandex.Things on Fake Window.opener.Location \u003d "http://e-m-a.il/yandex.ru"; // Forwarding on the cats to remove suspicion of window.location \u003d "https://imgur.com/0a5zgbn";
3. The victim trusting Yandex and looked at the cats returns to the previous tab with mail. Since she did not open anything in it, as well as the address did not change, then, most likely, she will lead to a fake and introduces his login and password, which in fact will go to the attacker.
The only thing that suspicions can cause is another address at the page, but it can be done very similar to the original, and on mobile devices it is often hidden by default.
Treatment
Fortunately, it is possible to fix everything quite easily: to all links with target \u003d "_ blank" you need to additionally add the REL \u003d "Noopener Noreferrer" attribute.
If you are not going to wait until it fixes on sites and in browsers, we recommend adding to TAMPERMONKEY / GREASEMONKEY Next User Script:
// \u003d\u003d Userscript \u003d\u003d // @Name Null Opener Object // @NameSpace NullopenerObjectNS // @Description Clears The Window.openeer Object. // @Version 1 // @grant none // @ run-at document-start // \u003d\u003d / userscript \u003d\u003d (function () ("use strict"; window.opener \u003d null;)) ();
By default, when you go on the link, the document opens in the current window or frame. If necessary, this condition can be changed by the Target Tag Attribute . In XHTML, the use of this attribute is prohibited.
Syntax
...Mandatory attribute
Values
The name of the window or frame is used as a value specified by the Name attribute. If a non-existent name is installed, a new window will be opened. The following are used as reserved names.
Blank downloads a page to a new browser window. _SELF loads the page to the current window. _Parent Loads the page into a parent frame if there are no frames, then this value works as _SELF. _Top cancels all frames and downloads a page in full browser window if there are no frames, this value works as _SELF.
Default value
Validation
Using this attribute is condemned by the HTML specification, the valid code is obtained only when using the transition .
HTML5 IE CR OP SA FX
Open in new window
I am glad to welcome you on the blog site! In today's article we will start talking about the language of hypertext markup hTML. This publication will be first of its kind (and far from the last), since before I did not write anything like this.
Post plan:
But now, when I scored the necessary knowledge and checked them in practice, I would love to share them with my readers with pleasure. After all, there is no wonder how much time and time at the initial stage was spent, for example, in order to know, how to insert a link tohTML. Naturally, after reading my post, you will also know it and be able to do.
Generally, it is worth noting that tags links Just needed in the work of optimizers, because their bread, it is just search engine optimization and, and naturally without links to the Guru in the SEO area, they are most likely not to do what to say about ordinary bloggers :).
Perhaps, hTML reference tagA. It is one of my most used, on a series, with an IMG tag that is necessary for displaying images in the text. On average, in each article published by me, approximately five references are affixed, both on domestic pages and to external.
Do not forget that tags for the sitehTML Used not only when writing posts. Also, they will be needed when changing the code of the template you set on the CMS WordPress or any other site management system.
Therefore, you need to study at least the most basic hTML TagsSo that in the future do not have problems when working with references. For example, if you use a "visual editor" when you write your articles, it is not very good, because if this editor does not work, you will not even know the elementary code to put the link.
In general, the knowledge of the basic concepts in the HTML markup language, I believe, will greatly help you and simplify life. All the same, the time you will spend now to study, possibly a new material for you, it will not be spent in vain.
There are also a lot of nuances who make you a job, and about which you read below in my article - this is rEL \u003d "nofollow ", I. target \u003d "_blank ", and much more interesting related with references.
Reference tag A - Create a hyperlink in an HTML document with anchor and without it
As I have already managed to notice above, the link is one of the most used HTML tags. They are needed so that users can switch to another without much effort from one document with one click of the mouse.
However, to specify the path of the hyperlink, you must use attributehref.. Thanks to him, you can also specify the URL of the page to which you want to refer. It can be both the inner pages of your site and the pages of any other resource in the World Wide Web.
Anchor HTML tag references A significant factor that takes into account search robots, so it needs to pay special attention to it. I recommend using in the Anchor keywords you want your article to get on the first positions in extradition.
Having understood a little with the theory of hyperlinks in the HTML document, you can proceed to visual examples. This code will have a link:
As you can see, the link begins with the opening bracket "<», затем идет html тег A, после него должен быть обязательный атрибут href и знак равенства. Далее, следуют две скобки следующего типа – «”», между ними нужно указать URL адрес ссылающегося ресурса, при использовании «http://». Затем, нужно указать анкор ссылки и в конце концов закрыть тег ссылки А при помощи «».
Also, I advise you to use blessing links, as if only Hyperlinks with Anchor are on your resource, it may cause questions from search engines and lead to poor consequences. Surely, you heard about the popular Google algorithm, which has a frightening title of penguin :).
Opening a link in a new window. Attribute Target _Blank.
Well, with HTML tag and figured out, but it is not all. There are still many attributes that will be useful to you when working with references. One of them - attributetarget _blank..
It is needed in order to the document inserted into the HTML, the link opened in a new Internet browser window. It is very useful when you write one bulk article and refer to your past publications. Thus, the user readable remains open, and the links open already on other tabs in the browser.
Target Blank.hTML uses very often how it helps, in terms of the behavior of visitors on your site, that is, affects its behavioral factors. Therefore, if you still do not use the target attribute with the _Blank parameter, I recommend to read this section very carefully.
As you could notice, a special difference where the necessary attribute will be affixed - no, since their order does not matter inside HTML tags.
REL NOFOLLOW attribute and Noindex tag. Close the reference from indexation
We will proceed to work with the REL link attribute in the HTML document. This attribute with the NOFOLLOW parameter is used to not transmit the weight of your page on any other.
As you know in any page, even in just that created and not having external references from other resources is your weight, which is above zero. Users can not see this, but here are all the search engines take into account.
Therefore, that the inner weight of your pages does not float from you, some links need to enter into an attribute rEL NOFOLLOW.. References that include this attribute will not transmit weight to other sites.
Naturally, attributerEL NOFOLLOW.you should not use when you refer to the internal pages of your site, since the competent internal transfer is the key to successfully optimize the resource and its further development.
I use the aforementioned attribute only if I refer to external sites. For example, as you might notice, often at the end of your articles, I offer Poshili to become my reader on Twitter (), and I give a link to my account, naturally I conclude this link in Rel Nofollow. It looks like this:
Again, where REL will be placed with the NOFOLLOW parameter, before the href attribute or after it does not matter. Also in such links should not be prescribed keywords in the anchor, as it does not make any sense, because we are pre- make a linknofollow.So it does not transmit weight.
Now it is worth discussing tagnoindex.. It serves that search robots do not index the not necessary elements of the page. With that, this applies not only to hyperlinks, but also certain sections of the text.
By the way, I go to any site Immediately see where the hyperlink is closed from indexing, and wherever the open one. All thanks to an excellent addition to the Opera browser. Also, with this plugin, I can track other parameters of resources, such as, as well as alexarank.
Link anchor and how to do it. Attribute Name.
And now I may, for many, I will open a very entertaining thing when working with references. Personally, I learned about it only after more than half a year I used WordPress. So, now it will be about anchor Links.
Thanks to him, as well as when used hash links, It can be referenced not just on some kind of article, but also in place in it, which is necessary, that is, on a certain section of the text. It is numbening when the publication is very voluminous and finding the necessary information will be difficult on it.
At first, it is necessary in the article to which you want to refer to choose a section of the text to which the page in the Internet browser will be scrolled. That is, if you give a link, let's say about the setting (not an anchor example), then the NAME attribute should be placed in the required publication site.
As you can see, the Name attribute does not have an arcor, as an anchor consists of an opening and closing tag A. Attribute parameter you must specify yourself, it is indicated after the sign of equality and brackets, as shown above on the example.
Now directly in the new post you need to specify a hash link using a pre-prepared anchor. Thus, the link will open at once the place in the text you need. This hash link will have the following form:
After that, readers of your site will be able to pass through such links to get to a certain area on the page.
Well, on this, I have everything if any questions arose, ask them in the comments. I note that this is not the latest article on HTML, in the foreseeable future there will be more publications on this topic.
Video Epilogue: The artist very quickly draws pictures on glass
The Only Currently Relevant Value of Target Is _Blank. The Other Values \u200b\u200bof Target Were Used to Specify Specific Frames. However, Frames Have Been Deprecated in HTML5.
Default Target.
If No Target Is Specified, The Link Will Open In The Current Context, Unless The User or Browser Specifies OtherWise.
a target \u003d "_ blank" Open in New Browser Tab (or window)
The Target Attribute Specifies Where The Linked Document Will Open When The Link Is Clicked. The Default Is The Current Window. If target \u003d "_ blank", The Linked Document Will Open in a New Tab Or (On Older Brows A new window.
Why Open In A New Browser?
The Most Common Reason To Use `target \u003d" _ blank "is so that offsite links open in a separate tab. This Allows a user to click on a reference and comes back to it later withode Leaving The Current Page. IT Keeps Visitors on Your Site Longer and Imprives Most Of Your Metrics: Bounce Rate, Conversion, Pages Visited.
Open All EXTERNAL LINKS IN A NEW TAB WITH JAVASCRIP
You don "T Need to Manually Add target \u003d" _ blank "to every link on your site. If you Link Out a lot (Which You Should Do), it's easy to add some javascript code to your site and Turn All External Links Into _Blank Links Automatically.
jQuery (document.links) .Filter (function () (Return this.hostname! \u003d window.location.hostname;)) .attr ("target", "_blank");
(You can see a slightly modified form of this code in action on every Page of this website.) This Trick Requires JQuery, But There Is a Good Chance You are using it Already. IT IS Used in the Most Popular Frameworks and Content Management Systems, Including Wordpress, Drupal, And Twitter Bootstrap. If You Need to Do it Without JQuery, That Can Be Done As Well. Here is a "Plain JavaScript" Version:
Function Externallinks () (for (VAR C \u003d Document.getelementsByTagname ("A"), a \u003d 0; a< c.length;a++) { var b = c[a]; b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank") } } ; externalLinks();
Besides Making IT Easier, This Cleans Up Your Markup Considerably.
ReaSons Not to Use `target \u003d" _ blank "
Some People Argue That Users Do Not Prefer to Open Links in a New Browsing Context. They Think That Doing So Is Similar to Popup Ads and Other Annoying Behavior. WITH THE RISE OF tabbed Browsing. , This Argument Has Largely Gone Away. Most Users Prefer to Open Links in a New Tab, Because It Allows Them to come Queue referensed Links for Later Reading without Losing their Current Browsing Context.
Values \u200b\u200bof the Target Attribute
| Value Name. | Notes. |
|---|---|
| _Blank. | Opens The Linked Document in a New Tab or Window. |
| _Parent. | Opens The Link In The Parent Frame. Frames Are Deprecated in HTML5. |
| _Self. | Open The Link In The Current Frame. |
| _Top. | Opens The Link In The Top-Most Frame. Frames Are Deprecated in HTML5. |
| frame Name. | Opens The Link in the Named Frame. Frames Are Deprecated in HTML5. |
Description
You can define the window in which the web page will be downloaded by reference. To do this, use the Target attribute, the name of the window or frame is specified as its value. If the target is not set, the result returned is shown in the current window.
Syntax
Values
The value of the window or frame is used as a value. If a non-existent name is installed, a new window will be opened. The following are used as reserved names.
Blank downloads a page to a new browser window. _SELF loads the page to the current window. _Parent Loads the page into a parent frame if there are no frames, then this value works as _SELF. _Top cancels all frames and downloads a page in full browser window if there are no frames, this value works as _SELF.
If for tag
Default value
Validation
Using this attribute is condemned by the HTML specification, the valid code is obtained only when using the transition .
Example 1. Opening Links in a new window
Example 2.
Browsers: Table Mobile ?
| Internet Explorer. | Chrome. | Opera. | Safari. | Firefox. |
| 2 | 1 | 2 | 1 | 1 |
| Android | Firefox Mobile. | Opera Mobile. | Safari Mobile |
| 1 | 1 | 6 | 1 |
✖
Browsers
The Browser Table applies the following notation.
- - the element is fully supported by the browser;
- - the element browser is not perceived and ignored;
- - When working, it is possible to appear different errors, or the item is supported with reservations.
The number indicates the browser version starting with which the item is supported.
