レンタルサーバー選びの迷いを解決!全力サポートします

Google or AdMax Promotion (srv)

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表示を行います。
何故か、涼しい顔して「保護された通信」表示がされています。

currentsrc_st01

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

 

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

currentsrc_st02

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

 

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

currentsrc_st03

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化したいという訳じゃないんですよね。

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

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

 

プロモーション

Google or AdMax Promotion (srvpos)

参考

ちなみに、今回検証環境にした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」も動いてるし、今のところは大丈夫そうだけども。

 


AdMax Promotion

 - WordPress

コンテンツナビ
すべて展開 | すべて省略

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

QRコードからもこのURLを開けます。


  関連記事

eye_rensrv-site
URLクエリ文字の値渡しの思考回路が完全に逆向きだったことにやっと気づく。

URLクエリ文字列(URL QUERY_STRING)ってご存知ですよね。 ブラ …