仕事のメールより。
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情報ブログ)
○SEO、canonical、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要素だとダメということ??)