ЯК У HTML ССЫЛКА адкрывае ў новай укладцы

задача

Стварыць спасылку, якая адкрывае дакумент у новым акне.

рашэнне

Па змаўчанні спасылкі адкрываюцца ў тым жа акне, дзе яны размешчаны. Каб любая спасылка адкрывалася ў новым акне, да тэгу варта дадаць атрыбут target са значэннем _blank, як паказана ў прыкладзе 1.

Прыклад 1. Спасылка у новым акне





Ссылки


Ссылка откроется в этом окне


Ссылка откроется в новом окне



Улічыце, што пры выкарыстанні строгага атрыбут target ў HTML4 і XHTML асуджаецца і код з ім не пройдзе валідацыю. Каб у такім выпадку зрабіць спасылку для адкрыцця ў новым акне і выканаць карэктнасць кода, адных HTML і CSS недастаткова, таму прыйдзецца звярнуцца да скрыптам. Спачатку неабходна неяк вылучыць спасылкі, якія будуць адкрывацца ў новым акне, напрыклад, атрыбутам rel са значэннем external. Гэты атрыбут коратка апісвае спасылку ці куды яна вядзе. Браўзэры не ўспрымаюць гэты атрыбут, але гэта і не патрабуецца, паколькі мы будзем правяраць усе спасылкі праз JavaScript (прыклад 2). Да патрэбным спасылках дадаецца ўсё той жа target. Але так як гэта робіцца праграмна, то валідатар хітрыкі не заўважыць.

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



Ссылка в новом окне



Ссылка откроется в текущем окне


Ссылка откроется в новом окне



Ня выкладвайце свой код наўпрост у каментарах, ён адлюстроўваецца некарэктна. Скарыстайцеся сэрвісам cssdeck.com або jsfiddle.net, захавайце код і ў каментарах дайце на яго спасылку. Так і вынік адразу ўбачаць.

Чытай яшчэ:   ЯК СТВАРЫЦЬ ФАЙЛ КАРТА САЙТА

рэкламныя

  • рэкламныя

TARGET _blank

Большасць ствараюць знешнія спасылкі праз target = "_ blank" і не ведаюць аднаго цікавага нюансу - старонка, на якую мы трапім такім чынам, атрымае частковы кантроль над якая спасылаецца на яе старонкай праз js ўласцівасць window.opener .

Праз window.opener.location мы зможам зрабіць рэдырэкт на, да прыкладу, фішынгавых старонку. Гэта свайго роду tabnabbing, толькі больш прасунуты. Так як ахвяра менш за ўсё чакае падмены старонкі, у адкрытай раней, даверанай ўкладцы браўзэра.

Праблема далёка не новая, але да гэтага часу актуальная, і як бачу, не шматлікія пра яе ведаюць.

Праблема гэтак жа існуе ў facebook.

Для прыкладу - адкрываем пост, клікаем па ccылке. Глядзім што здарылася з укладкай, на якой мы адкрывалі дадзены пост.

Схаваў публікацыю ў FB з прычыны скаргаў на патрэба аднаўляць доступ да акаўнта пасля пераходу па спасылцы (пруф). Можна самому паспрабаваць размясціць ўтоеную публікацыю на старонку sli.su/kitten.html альбо паглядзець як гэта працуе на Хабрэ

На старонцы sli.su/kitten.html ёсць такі код:

window.opener.location = 'https://sli.su/facebook.com/auth.html';

Ён стварае рэдырэкт з раней даверанай старонкі. Гэта адбываецца таму, што браўзэру ніхто не паведаміў, што адчыняныя старонка не павінна мець доступу да бацькоўскай ўкладцы. На момант публікацыі без праблем адпрацоўвае ў chrome 50, firefox 45, opera 36.

Такім грашаць многія сайты, а некаторыя, нават не лічаць гэта за праблему «на сваім баку" sites.google.com/site/bughunteruniversity/nonvuln/phishing-with-window-opener

Варыянты вырашэння праблемы:

1. Дадаць у спасылкі:

rel="noopener"

Гэта так жа можа быць

rel="nofollow noopener"

2. Адкрываць ўсе знешнія спасылкі праз сваю, прамежкавую старонку, на якой павінен адпрацаваць код:

window.opener = null;

3. Адкрываць спасылкі ў новай ўкладцы праз js:

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = targetUrl;

4. Адлоўліваць ўсе клікі па спасылках і ў момант пераходу ствараць схаваны iframe, праз які і рабіць адкрыццё старонкі ў новай ўкладцы. github.com/danielstjules/blankshield - js убудова які, па апісанні, вырашае пастаўленую задачу (асабіста не тэставаў).

Чытай яшчэ:   СТВАРЫЦЬ НОВЫ САЙТ НА TIMEWEB

PS: У FF не працуе rel = «noopener» - habrahabr.ru/post/282880/#comment_8879594. Замест яго можна выкарыстоўваць rel = noreferrer.

PPS: Для ўсіх, хто лічыць арыгіналам артыкул https://medium.com/@jitbit/target-blank-the-most-under... - параўнайце дату публікацыі. Мая артыкул выйшаў 3га мая. Англамоўная - 4го.

ЯК ЗРАБІЦЬ, КАБ СПАСЫЛКІ адкрываецца ў новым акне АБО НА ...

Калі патрабуецца зрабіць спасылку на дакумент, які адкрываецца ў новым акне браўзэра, выкарыстоўваецца атрыбут target = "_ blank" тэга .

Стварэнне новага акна звычайна патрабуецца ў выпадках, калі робіцца спасылка на іншы сайт. У астатніх выпадках лепш адкрываць дакументы ў бягучым акне, паколькі багацце вокнаў можа збіць чытача з толку.

Так як спасылкі на бягучае або новае акно нічым не адрозніваюцца адзін ад аднаго, на некаторых сайтах побач са спасылкай ставяць адмысловую абразок, якая паказвае, што дакумент адкрываецца ў новым акне.

Прыклад 1. Стварэнне спасылкі на новае акно





Ссылки


Обычная ссылка на сайт www.htmlbook.ru


Ссылка
открывает новое окно на сайт www.htmlbook.ru



Калі на вэб-старонцы неабходна зрабіць, каб усе спасылкі адкрываліся ў новым акне, то няма неабходнасці дадаваць ва ўсе тэгі атрыбут target = "_ blank". Код можна скараціць, калі спачатку старонкі дадаць , як паказана ў прыкладзе 2.

Прыклад 2. Выкарыстанне тэга





Ссылки



Ссылка откроется в новом окне


Ссылка откроется в
текущем окне



Зрабіць так, каб спасылка адкрывалася ў бягучым акне, у такім выпадку можна, калі дадаць да тэгу атрыбут target = "_ self", як паказана ў дадзеным прыкладзе.

Чытай яшчэ:   ПАСЛЯ зменіце матчын поплатак НЕ магу запусціць WINDOWS

Улічыце, што атрыбут target не з'яўляецца валідным для строгага .

Чытай на іншых мовах

 беларускіанглійская Нямецкі іспанскі французскі італьянскі партугальская турэцкі арабская ўкраінскі шведскі венгерская балгарскі эстонскі Кітайскі (спрошчаны) в'етнамская румынская тайская славенская славацкая сербская малайская нарвежская латышская Літоўскі карэйская японскі інданезійская хіндзі іўрыт фінскі грэцкі нідэрландская чэшскі дацкая харвацкая Кітайскі (традыцыйны) тагальская урду Азейбарджанский армянскіпольскі бенгальская грузінскі казахскі каталонская Mongolski руская Таджитский Tamil'skij тэлугу Узбецкий

дадаць каментар

Ваш e-mail не будзе апублікаваны. Абавязковыя палі пазначаныя *