110
91

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

リンクの http: や https: を省略して現在のプロトコルでリンク先にアクセスさせる

Last updated at Posted at 2015-03-11

<a>タグのhrefなどで指定するURIは、http:https:を省略できます。

具体的には、

<a href="http://google.co.jp">

<a href="//google.co.jp">

と書けます。

省略することで、遷移元のページを
httpで開いているときはhttpでアクセスさせられます。
httpsで開いているときはhttpsでアクセスさせることができます。

<a>以外にも<script>, <iframe>, <link>などURI全般でこの書き方を使えます。CSSでも使えます。

メリット

httpsで開くページの中にhttpのリンクが混在することを予防できます。
逆に混在すると中間者攻撃を受ける可能性がありますが、それを防ぐことができます。
中間者攻撃を受ける理由は、おおざっぱにいってこうなっています:

  1. ユーザがhttpsを使って、あるページにアクセス
  2. そのページにhttpへのリンクが混在していると、httpなアクセスが飛ぶ
  3. 攻撃者がhttpコンテンツを置き換えたり盗聴したりする

また、混在していると、ブラウザの設定によって警告が表示されたりします。Google Chromeの場合はこんなエラーが出てしまいます。
invalid.jpg

詳細

このURIの書き方はRFC3986で定義されています。
RFC3986の「4.2. Relative Reference」に載っています。
このようなスキーマを省略する書き方は相対参照の一種とされて、network-path referenceと名付けられているようです。

Google HTML/CSS Style Guideの中でも1番最初の項目でこの書き方が推奨されています

注意

現在使っているプロトコルでリンク先を取得しに行くので、そのリソースをhttphttpsの両方で取得できるようになっている必要があります。

また、http:https:の省略は2018-01-18現在、Google的に非推奨です。
Google HTML/CSS Style Guide
に記載のある通り、全てのURLでHTTPSを指定することが推奨されています。

Googleは世界中のWebサイトにHTTPSを推奨するよう取り組んでいるので、その一環だと思われます。
参考:

なお、Google的に非推奨という件は @hibikikudo さんから編集リクエストで教えていただきました。ありがとうございます。

その他

今回はURIのスキーマを省略すると現在使用しているプロトコルでアクセスするという話でしたが、全体的に、URIがどのようにして解釈されるかは、RFC3986の「5.2.2. Transform References」に疑似コードで紹介されています。

110
91
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
110
91

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?