俺の雑記帳

My random memorandumです。(つまり、個人的な備忘録であり、その点ご容赦を。)

ページのhttps化やサイト全体のhttps化(常時SSL化)、 protocol-relative URLなど4種の参照の仕方

仕事のメールより。


 SSLページにあたり、警告が出ないように、かつ、今後の保守等に良いコードの書き方について、
 私がよく分かっていなかったので、整理してみました。
 ご指摘、ご意見があれば、お願い致します。)


まず、今回、フォームページをSSL化(https化)されましたが、(全てのページからのフォームへのリンクをhttpsに変更いただいた)、
安全性と言う意味では、フォームの送信の段階では 以前からSSL通信なので、既に対応済みという認識でした。

ただ、世の中、「常時SSL化」という流れだと思うので、対応されるのは良いことだとは思います。

しかし、現在、フォームページには警告が出てしまっています。
ブラウザの左上(URL入力欄の左)に SSLの錠マークに 三角"!"の警告マークが付いてしまっています()。
 


★なぜかと言うと、メインのHTMLページはSSLなのに、併せて読み込む画像やJSスクリプトなどが、SSLになっていないものがある為です。

  ●警告になる例:(おそらく)

    ・<img src="http://…
    ・<script src="http://…
    ・<iframe src="http://…
    ・<link rel="stylesheet" href="http://…
    ・<link rel="apple-touch-icon" href="http://…
    ・<・・・ style="background:url('http://・・・
    ・(スクリプトの中で) ga.src = 'http://・・・


  ●警告にならない例: (「ページの一部は安全ではありません」の警告にはならないはず。下で書いているように、他の点で問題になるものもある。)

    ・<a href="http://...
      ※ 読み込んでいるわけではないので、警告になりません。ただ、常時SSL化するなら、サイト内のリンクであれば、SSLにしなくてはなりませんが。
    ・<link rel="alternate" href="http://・・・" hreflang="fr">
      ※ 警告にはなりませんが、今表示しているページがSSLで、同内容異言語(上例の場合フランス語)のページが SSLでないのは望ましくないと思います。
    ・<form action="http://・・・
      ※ ただ、多くの場合これはダメですが。フォームを押したらSSLでなくユーザ入力情報を送信することになります。もしかしたら、最近のブラウザなら、事前に警告になるかもしれません。
        もちろん、個人情報などを含まない秘匿性のないものなら構いません(最近のブラウザなら前述の通り警告になるかも。)



では、どのような参照の仕方が良いのでしょうか?


○4種類の参照の仕方:

  完全URL(Absolute URL)
    例: <img src="https://www.xyz.com/image/icon.gif">
  プロトコル相対URL (Protocol-relative URL
    例: <img src="//www.xyz.com/image/icon.gif">
  ルート相対URL(Root Relative URL) (正しくは、"URL"でなく"パス(path)"?)
    例: <img src="/image/icon.gif">
  相対URL(Relative URL) (正しくは、"URL"でなく"パス(path)"?)
    例: <img src="image/icon.gif">
       <img src="../image/icon.gif">


○ではどれが良いか。

  「ページの一部は安全ではありません」の警告が出ないようにするには、
  SSLページから、非SSLページの読込み(既述の「●警告になる例」ご参照)をしなければ良いだけですが、
  メンテナンスなどを考えるとどれが良いのでしょうか。

  静的ページなら、相対URLか、ルート相対URLが良いかと思います。
  (別ドメインを読み込むなら、プロトコル相対URL。)

  動的ページのサイトであれば、どれでも良いのですが、以下のページを見ると、
    https://www.suzukikenichi.com/blog/relative-url-vs-absolute-url/ (相対URLと絶対URLはどちらがSEOに強いのか? _ 海外SEO情報ブログ)
  完全URLになるべく統一するのが良いかと思いました。
  上記ページに、「盗用に強い」と書いてあったので。


    つまり、コンテンツを読み込むHTMLを記述する場合(既述の「●警告になる例」のようなHTML箇所)、以下の選択肢があると考えます。

     1. 静的サイトであれば、自ドメイン内であれば 相対パスかルート相対パス、他ドメインであれば相対プロトコル、 で記述する。
     2. 動的サイトであれば、現在のページのプロトコルに合わせた Absolute URL に書くことが可。(他ドメイン(サイト外)であれば、どちらでもアクセスが可能か確認要)



●以降、詳細な補足情報です。


  ○「プロトコル相対URL」以外の3種類の参照については、
  前述の、
    https://www.suzukikenichi.com/blog/relative-url-vs-absolute-url/ (相対URLと絶対URLはどちらがSEOに強いのか? _ 海外SEO情報ブログ)
  で解説されています。


  ○「プロトコル相対URL」については、
    http://qiita.com/arai-wa/items/d9b73539898d658b58c5 (リンクの`http `や`https `を省略して現在のプロトコルでリンク先にアクセスさせる - Qiita)
  に詳しいです。RFCでの正式(?)名称は「network-path reference」である、など書いてあります。
  ただ、記載が不正確な点があります。<a>タグのリンクでも、警告が出るような記載になっています。(既述の「●警告にならない例」にあるように、問題ない。)


  ○ ページをSSL化することについては、
    https://zenlogic.jp/aossl/operation/html-code/ (常時SSL化に必要なHTMLソースコード編集のコツ | 常時SSL Lab. by Zenlogicのファーストサーバ株式会社)
  のようなページが参考になるかもしれません。
  ただし、
   HTTPSで公開するデータを準備する
   重複するデータの整理/統合
  は、よく意味が分かりませんでした。SSLにするのに、コンテンツの配置場所やサーバーを変更しなくてはならない場合のことでしょうか。。。


  ○ 「プロトコル相対URL」は もはや推奨されない、という主張らしきページも見つけました。
    https://jeremywagner.me/blog/stop-using-the-protocol-relative-url (Stop Using the Protocol-relative URL - Jeremy Wagner)

  おそらく、
  他ドメインへの参照する目的で使う「プロトコル相対URL」についての内容で、
  もはや SSLにしても処理速度に際はなくなってきたし、全てSSLにすべき、という様な主張だと思います。
  (私の英語力ではよく分からなかったので、だれかもし細かく読んでいただいたら教えてください。。。)


  ○なお、SEOとしては、絶対パスだろうが相対パスだろうが、関係ないようです。
    https://www.suzukikenichi.com/blog/relative-url-vs-absolute-url/  (相対URLと絶対URLはどちらがSEOに強いのか? _ 海外SEO情報ブログ)

  ○SEOcanonical、alternate
    https://eagle-blog0811.com/1228 (rel="canonical" はプロトコル相対URLでなく完全なURLで!)
   <link rel="alternate" href="...."> も同じでしょう。
     このページからのリンク先: http://web-tan.forum.impressrd.jp/e/2016/12/02/24529
      ここでは:「また、rel="canonical"以外のlink要素に関しても、プロトコル相対URLは推奨されないはずだ。」とも書いてあります。(既述の通り RFCプロトコル相対URLは記載されているそうですが、link要素だとダメということ??)