とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

常時SSLのwebサイトではブラウザの警告がでないように注意しよう。src、href、contentで参照するファイルのパスに要注意。

常時SSLのwebサイトではブラウザの警告がでないように注意しよう。src、href、contentで参照するファイルのパスに要注意。

昨今のwebサイトは

常時SSL化の動きが進んでいます。

GoogleがSSLを推奨しているからです。

 

常時SSLとは?

常時SSL(Always On SSL)は、ウェブサイト内のログインページやフォームなど特定のページだけでなく、その他すべてのページをSSL化することです。常時SSL化はセキュリティ強化だけでなく、ユーザとウェブサイト運営者の双方にさまざまなメリットがあります。
すべてのページをSSL化するのが常時SSL。

ユーザがより安全にウェブサイトを閲覧し、安心して重要なデータの送受信を行うようにするためには、業種や規模は問わずウェブサイトのHTTPS(常時SSL)化は必須事項になりつつあります。

https://jp.globalsign.com/ssl-pki-info/ssl_practices/always-on-ssl.html

 

ということです。

 

ひと昔前は、お問い合わせフォームや

会員登録フォーム、ログインフォームなど

個人情報やパスワードを使用するページのみで

SSLを導入するのが一般的でしたが、

これから新規にwebサイトを立ち上げる場合は

常時SSL化はほぼ必須な流れになっています。

 

ブラウザが非SSLのwebサイトに

アクセスすると警告を表示するようになっているので

常時SSLは当たり前、に。

 

ただむかしからある規模の大きいwebサイトでも

まだ常時SSL化に踏み切っていないところもあります。

いろいろな課題があって進んでいないのだと思いますが・・・

 

また1〜2年くらい前、

SSL化すると検索順位が下がる、という傾向

も見られたため、躊躇するクライアントも多かったです。

 

常時SSLについてはほかのサイトで

詳しく解説されているので、

一読しておけばよいかと思いますが、

ここから本題です。

 

SSL化したwebサイトのページの実装にあたって

留意しておかなければいけない点があります。

それは「混在コンテンツ」です。

 

混在コンテンツというのは、

SSLページにおいて、非SSLページのファイルが

参照されることにより、SSL通信がブロックされ

無効になる状態のことで、

ブラウザが警告を表示します。

 

画像やCSS、javaScriptファイルを参照するときに

非SSLページからの参照をしてしまうと、

警告がでます。

 

具体的には以下のHTMLタグ、属性でファイルを参照

する場合、https://〜からのパスになるようにしましょう。

 

<img>タグのsrc属性

<link>タグのhref属性

<meta property="og:image">タグのcontent属性

<script>タグのsrc属性

<audio>タグのsrc属性

<video>タグのsrc属性

<iframe>タグのsrc属性

 

詳しくは下記もご覧ください。

混在コンテンツ - Security | MDN

混在コンテンツでブロックされるウェブサイトを修正するには - Security | MDN

 

うっかりミスでHTMLタグの属性に

http://〜からのパスを指定すると、

混在コンテンツとして、ブラウザが警告を

だしてしまいます。

 

混在コンテンツの確認は、

ブラウザのアドレスバーにある

鍵マークで確認できます。

たとえばこんなかんじです。

擬似的に混在コンテンツをいれてみました。

 

混在コンテンツがある場合の例

混在コンテンツがある場合の例

右にある「>」をクリックすると、

下記のダイアログになります。

 

「詳細を見る>メディア」で混在コンテンツがどれなのか一覧できます

「詳細を表示>メディア」で混在コンテンツがどれなのか一覧できます

というかんじで、混在コンテンツの

警告が出た場合は、ブラウザの鍵マーク

から確認して、http://〜のパスになっている

コンテンツを探して修正しましょう。