WordPressの常時SSL化前のメディアsrcのURLが「currentSrc:」で自動「https:」化される！

WordPressの常時SSL化の一番面倒な点が、記事に貼った画像が絶対パスで格納される事。
これを避けるために、functions.phpを触り、相対パス化している人もいる程ですが、
実際、常時SSL化する前の投稿に画像を貼り、記事を公開。
その後、SSLアクセスを行った所、ちゃんと「鍵」アイコン表示として、
SSL有効な状態になっていましたのでご紹介します。

WordPressの常時SSL化前のメディアsrcのURLが「currentSrc:」で自動「https:」化されてる？！

おそらくタイトルでは何の事やら？だと思います。

実際に見てみましょう。
今回、既存サイトのSSL化の練習として専用の新規サイトを構築（wordpress-4.9.4-ja）し、
投稿を非SSLな状態で投稿し、その後、SSLアクセスを行ってみました。

投稿の格納状態

当然、画像は「http://~」のsrc属性としてURLを投稿に格納し、
そのままSSL表示を行った際には「http://~」コンテンツ(混在)があるとブラウザに警告表示されるはずです。

投稿のテキスト表示では以下のように保存・格納されています。

※[]は［］で置換。

URLなどが「http://~」で格納され「src=”http://algorhythnn.com/…」となっています。

SSL表示

では、SSL表示を行います。
何故か、涼しい顔して「保護された通信」表示がされています。

SSL化後のサイト表示・srcset 属性で常時SSL化できるWordPress

そ、そんなはずは・・・と、Chromeのデベロッパツールで確認します。
何やら「currentSrc:https://~」と表示され、https://にて画像を読み込み表示しています。

https://化されてるsrcのURL・srcset 属性で常時SSL化できるWordPress

ならばと、ページのソースを確認しますと、何やら「srcset 属性」が指定されているのが見えます。

srcset属性で指定されたURLを採用・srcset 属性で常時SSL化できるWordPress

複数のイメージソースを指定する

srcset 属性は、picture 要素内で使用する source 要素や、img 要素において、複数のイメージソースを指定するために使用されます。値は 「カンマ（,）」 区切りで複数の画像候補の URL を指定する事ができます。

（引用）srcset 属性 | HTML5 タグリファレンス | W3 Watch Reference

では実際にはどう指定しているか見てみます。
サイズに合せて、表示する画像を切り替えるように「srcset 属性」が吐かれ、
その動的に出力しているURLが「https://~」に置き換わっています。

うまいなぁ。

確かに、これなら画面表示している画像に関しては「https://~」で統一でき、
リンク先画像に関しては「http://~」のままとしてしまう。

エラーはでない訳だ。

この仕様がいつからこうなっているのかは分かりませんが、
少なくとも、SSL化前の画像表示で上記のようにsrcset 属性が出力されているようなら、

SSL化後もデータベース内の画像URL(src)に関してだけ言えば、
更新しなくてもなんとかSSL化は出来そうな気がする。

ぶっちゃけ、SSLのエラー表示を消したいだけで、
画像のURLを厳密にSSL化したいという訳じゃないんですよね。

データベース内の値を置換するようなリスクもできれば避けたい。

この仕様をうまく使えば、置換要らなくなるかもよ？

参考

ちなみに、今回検証環境にしたWordPressは「wordpress-4.9.4-ja」でした。

当サイトは現在、この記事執筆時点（SSL化前）では「WordPress 4.2.1」なのですが、
「srcset 属性」の指定や出力がされていませんでした。（Photonを停止して確認済）

と言う事は、WordPress 4.2.1から、WordPress 4.9.4の間に導入された機能であると考えられます。

WordPress 3.9.9 (stinger5Ladyverテーマ)　srcset 属性出力なし。
WordPress 4.1.22 (stinger5Ladyverテーマ)　srcset 属性出力なし。
WordPress 4.1.5 (stinger5Ladyverテーマ)　srcset 属性出力なし。
WordPress 4.3.15 (stinger5Ladyverテーマ)　srcset 属性出力なし。
WordPress 4.9.4 (stinger5Ladyverテーマ)　srcset 属性出力あり。

テーマは同じで、4.3.15～4.9.4までの間で、この機能が実装されたっぽい。

と言う事は、SSL化する前にWordPressを最新にしてしまうと、
データベースをゴリゴリせずに幸せになれるかもしれない。

ま、データのバックアップが必要なのは、どっちも一緒ですけどね。
て、WordPressが古すぎるだろ！ってのは、お許しください・・・。

でも、もう潮時ですね。
いい機会かもしれない、全SSL化を機に一旦最新にアップしてしまおうか。
このまえ勢いでUPしたサイトは無事動いているからなぁ。

当サイトを最新のWordPress 4.9.4にアップデートしたことによって、
当サイト表示の画像にもsrcset 属性が付与されるようになりました。

srcset 属性の自動付加はWP4.4以降

少し調べた所「WordPress4.4 Clifford」から導入された機能のようですので、
4.4以降であれば、この「srcset 属性」による画像URLの自動置換が利用できそうです。

原因はすぐ見つかりました。サムネイルをクリックすると、メイン画像のsrc属性の値が切り替わるのですが、WordPress4.4 Cliffordからレスポンシブイメージということで実装されたsrcset属性の値を参照しており、この値の切り替えをJavaScriptが行っていなかったのが原因でした。

（抜粋引用）WordPressの画像に自動設定されるsrcset属性を無効化する方法 | てらこや.work

・・・記事的には悪さして邪魔！って感じなのだとは思いますが^^;
当サイトでは「wp-jquery-lightbox」も動いてるし、今のところは大丈夫そうだけども。

当サイト内のコンテンツおよび画像を含むすべてにおいて、管理人アルゴリズンが著作権を保持しております。
当サイトでご紹介しております写真等につきましては著作権の放棄はしませんが、
ライセンスフリーでご利用いただいて構いません。

コンテンツを有益であると感じていただけましたら非常に光栄です。
ありがとうございます。
サイト内コンテンツを引用される際には、出典元として当サイト(個別記事)へのリンクをお願いいたします。
申し訳ございませんが、無断転載、複製をお断りさせて頂いております。