Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
357
Help us understand the problem. What is going on with this article?
@ulwlu

headに<base target="_blank">1行入れるだけで、全リンクのデフォルトを_blank化できた

個人用メモです。

この記事は2019年の記事です。実際に設定する際は最新の情報を確認しながら行ってください。

javascriptで、a_tags.setAttribute('target','_blank')という命令/例外処理をしたりなどという方法を使わずに、たった1行をheadに書けば、全てのリンクのデフォルトがtarget='_blank'になる方法をご紹介します。そのたった1行とは、これです。

<base target="_blank">

全てのリンクのデフォルトを、1行だけでtarget='_blank'にする方法

まずは、headタグの中に、この1行を追加しましょう。

<head>
  ......
  <base target="_blank">
  ......
</head>

このbaseタグ、初めて見る方も多いのではないでしょうか?

baseタグを使えば、基準ターゲットだけでなく基準URLも設定できる

baseタグとは、head内に記述すると
①基準URLを指定できる
②基準ターゲットを指定できる
という2つの機能を果たします。

よく他のサイトのHTMLを除くと、こんな相対href設定を見たことがあると思います。

<a href="category/0001">XXX</a>

この相対href設定を行う際に、head内にこのようなbaseタグを配置する必要があるのです。

<head>
  <title>ほげほげ</title>
  <base href="http://www.hogehoge/">
</head>

こうする事で、ソースコード削減やサイトマップ効率化を図る事ができるんですね。

しかし、今回の②基準ターゲットを指定できるについては初めて知りました。

基準ターゲットの設定できる4種類

baseタグで設定可能な基準ターゲットは、下記の4種類です。

  • _self ⇛ 同タブに表示します
  • _blank ⇛ 別タブに表示します
  • _parent ⇛ 分割ウィンドウの親フレームに表示
  • _top ⇛ 分割ウィンドウを全解除して表示
<head>
  ......
  <base target="_blank">
  ......
</head>

という記述だけを貼れば大丈夫です。
一部のリンクは_selfにしたいという時は、これまで通り、そのリンクのaタグ内にtarget='_self'と記述してください。

デフォルトをtarget='_blank'にする際の注意点

実は、target='_blank'にはセキュリティ脆弱性が存在します。
簡単に言うと仕様上、下記のリスクなどが発生してしまうのです。
①_blank先のサイトで重いスクリプトが駆動すると元サイトのリソースも食ってパフォーマンスが落ちる
②親ウィンドウのオブジェクトにアクセスされてしまう

Google公式のソース

このリスクを回避するために、全ての_blankのタグにrel="noopener"を追加する必要があるのですが、
そもそも安全が保証されている自サイトリンクに対しては、処理を重くしたくないので追加したくありませんよね?

ですので、下記に別サイトに対するリンクに対してだけrel="noopener"を追加するスクリプトを用意致しました。
(5/18追記 @ahya_emon 様作成 )


const add_noopener_to_external_link = () => {
    Array.from(document.getElementsByTagName("a"))
        .filter((a) => a.host !== window.location.host) // サイト内遷移ははじく
        .forEach((a) => a.setAttribute('rel', 'noopener'))
}
document.addEventListener('DOMContentLoaded', add_noopener_to_external_link, false);

旧スクリプト 非推奨
//var external_link__add_blank = function(){
//    var a_tags = document.querySelectorAll('a');
//    res = [];
//    if(!a_tags.length) return;
//    for(var i = 0; i < a_tags.length; i++ ){
//      if( a_tags[i].href.indexOf(window.location.host) !== -1 ) continue;
//      if( a_tags[i].href.indexOf('#') === 1 ) continue;
//      a_tags[i].setAttribute('rel','noopener');
//      res.push(a_tags[i])
//    }
//    return res;
//}
//document.addEventListener('DOMContentLoaded',external_link__add_blank,false);

これをbodyタグ終了直前に貼って頂ければ、全ての他サイトに対するtarget='_blank'のaタグに、
セキュリティリスクをなくすrel="noopener"が自動的に付与されます。

参照サイト

Baseタグの説明
http://www.tohoho-web.com/html/base.htm

今回の記事制作のきっかけとなった、皆大好きColiss様の記事。
https://coliss.com/articles/build-websites/operation/work/target-blank-in-base-element.html

357
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ulwlu
uzabase
企業活動の意思決定を支える情報インフラの提供

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
357
Help us understand the problem. What is going on with this article?