独自SSL導入でusces_cart.cssが適用されない問題について

[saltydog]

こんにちは。

数日前にさくらのスタンダードプランにて独自SSLが使えるようになったので、早速導入しました。
welcartの「システム設定」で「SSLを使用する」にチェックを入れ、カートや会員ページのみをSSL化。
その結果、画像なども正常に表示されて導入は成功に思えたのですが、よく見るとブラウザ（opera、chromeなど）でSSL証明書の警告表示が出ていました。

operaによると、
>暗号化された接続 (https://) でブラウジングが行われている時に、
>Opera はサイトのあらゆる部分が暗号化されているかどうかを確認します。
>スクリプト、プラグイン、フレームなどの動的な要素がオープンなページ (http://) で提供されていることが Opera により検知されると、
>セキュリティで保護されていないコンテンツはブロックされます。
>この場合、ページの一部分は正常に表示されません。

とのことなので、サイト全体をSSL化すれば解決すると思い、
https://www.welcart.com/community/forums/topic/ssl%e5%b0%8e%e5%85%a5%e3%81%a7%e8%ad%a6%e5%91%8a%e8%a1%a8%e7%a4%ba%e3%80%82%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e3%81%ab%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e3%81%99%e3%82%8b
を参考に、welcartの「システム設定」で「SSLを使用する」のチェックを外し、
WordPressの一般設定のサイトアドレスをhttpsに置き換えました。

するとトップページでは警告表示が消えたのですが、カートページや会員ページではいっこうに警告が消えません。
さらによく見るとスタイルが崩れており、usces_cart.cssが読み込まれていないことが判明しました。
当初の設定（カートページと会員ページのみのSSL化）では、usces_cart.cssが正常に読み込まれ、スタイルも崩れておりませんでした。

症例を以下にまとめます。

・カートページ、会員ページのみSSL化
ブラウザによっては警告表示が出る
usces_cart.cssは正常に読み込まれる

・サイト全体をSSL化
カートページや会員ページでのみ警告表示が出る（usces_cart.cssが適用されてるページ？）
usces_cart.cssが読み込まれない

usces_cart.cssが読み込まれない原因としては、何が考えられるでしょうか。
検索サイトなどで調べましたが、似たような症例の方がおらず途方に暮れております。
解決策をどうかご教授願います。よろしくお願いいたします。

——————————————-
WordPress のバージョン：4.1
Welcart のバージョン：1.4.12
ご利用のテーマ：自作
症状を確認したブラウザ：Opera　Chrome
サーバー（会社名、サービス名）：さくらのレンタルサーバー　スタンダード
SSLの利用：独自SSL
WordPress のパーマリンク設定：/%category%/%postname%/
——————————————–

[saltydog]

スタイルシートに関して追記です。

テーマには複数のスタイルシートを適用しているのですが、
当初、header.phpにてスタイルシートの読み込みは
<?php echo get_stylesheet_directory_uri(); ?>
を利用していました。

しかしながら、このタグだと画像が表示されないなどの不安が残るため、
今回のSSL導入に合わせて事前に以下のタグに書き換えました。
<?php echo ltrim(get_stylesheet_directory_uri(), ‘htps:’); ?>
※style.cssは<?php echo ltrim(get_bloginfo(‘stylesheet_url’), ‘htps:’); ?>

このため、SSL導入時にスタイルシートの崩れは起きなかったものと思われるのですが、
今回の症例を受けて、試しにこのタグを元に（<?php echo get_stylesheet_directory_uri(); ?>）戻してみました。

その結果は次のようになりました。

・カートページ、会員ページのみSSL化
ブラウザによっては警告表示が出る
usces_cart.cssも正常に読み込まれる
他のスタイルシートも正常に読み込まれる

・サイト全体をSSL化
カートページや会員ページでのみ警告表示が出る（usces_cart.cssが適用されてるページ？）
usces_cart.cssが読み込まれない
他のスタイルシートはトップページ等通常のページなら読み込まれるが、カートページや会員ページでは読み込まれない

他に気づいた点といえば、一部SSL化だとSSL化したURLが長めになることくらいでしょうか。。
また、他のプラグインとの干渉も考えてすべてのプラグインを停止してみましたが、結果は変わらずでした。

[yasumax]

こんにちは。

`
※style.cssは`

「htps:」ではなくて「https:」は試されていますでしょうか？

また、自作テーマをお使いとのことですが「SSLのおまじない」は試されましたでしょうか？
まだでしたら、下記トピックのコードを参考にしていただければと存じます。
———————————–
Welcartフォーラム｜SSLでエラーを出さないおまじない（強化版）
———————————–

また、Welcart Defaultテーマのfunctions.phpにも記載しておりますので、そちらも参照していただければと思います。

[saltydog]

ご返信ありがとうございます。

`< ?php echo ltrim(get_stylesheet_directory_uri(), ‘htps:’); ?>
※style.cssは< ?php echo ltrim(get_bloginfo(‘stylesheet_url’), ‘htps:’); ?>`

ここの「htps:」の部分はURLからスキーム部分を削除するコードらしいです。
左側から、h,t,p,s,:の文字を除去するとのことで、実際にアップロードされたファイルのパスからhttp:またはhttps:が除去されているのを確認済みです。

実は質問の投稿後、再度いろいろと検証して当初の問題は解決することが出来ました。
しかし、また新たな問題が生じてしまいました。

・サイト全体をSSL化
カートページや会員ページでのみ警告表示が出る（usces_cart.cssが適用されてるページ？）
usces_cart.cssが読み込まれない

少し強引なやり方ではありますが、サイト全体をSSL化し、usces_cart.cssをheader.phpで読み込ませることで警告表示を消すことが出来ました。
もちろんスタイルも正常な状態です。

しかしながら、「コンテンツの一部がブロックされている」との表示がアドレス欄近辺に出てしまいます。
警告表示こそ出ないですが、もしブラウザでコンテンツの全てを読み込んでしまうと鍵マークにバツ印が付くなどして、ユーザー側でSSLが解除される状態です。
また、トップページだけはなぜかブロックされたコンテンツはないようです。
他のページと構造的には差異はないはずですが……。

なお、ご指摘にあった「SSLのおまじない」を試しましたが、うまくいきませんでした。

お客様がアドレス欄近辺をいじらなければ何も問題はなさそうですが、どうにもしこりが残った感覚です。
万が一ということもあるので、やはり修正しておきたいところです。
申し訳ありませんが、再度ご教授していただければ幸いです。

[saltydog]

追記です。

カートページをchromeでコンソール表示したところ、下記のような記載がありました。
トップページ以外でもほぼ同じ内容です。
（ドメイン部分は○○.comとしています）

○○.com/:182 Mixed Content: The page at ‘https://○○.com/usces-cart/’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://○○.com/wp-content/plugins/usc-e-shop/css/jquery/jquery-ui-1.10.3.custom.min.css?ver=4.1’. This request has been blocked; the content must be served over HTTPS.

○○.com/:183 Mixed Content: The page at ‘https://○○.com/usces-cart/’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://○○.com/wp-content/plugins/usc-e-shop/css/usces_paypal_style.css?ver=4.1’. This request has been blocked; the content must be served over HTTPS.

○○.com/:184 Mixed Content: The page at ‘https://○○.com/usces-cart/’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://○○.com/wp-content/plugins/table-of-contents-plus/screen.css?ver=1404’. This request has been blocked; the content must be served over HTTPS.

○○.com/:191 Mixed Content: The page at ‘https://○○.com/usces-cart/’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://○○.com/wp-content/plugins/usc-e-shop/css/usces_default.css’. This request has been blocked; the content must be served over HTTPS.

○○.com/:1 Mixed Content: The page at ‘https://○○.com/usces-cart/’ was loaded over HTTPS, but requested an insecure script ‘http://○○.com/wp-includes/js/tw-sack.min.js?ver=1.6.1’. This request has been blocked; the content must be served over HTTPS.

○○.com/:193 Mixed Content: The page at ‘https://○○.com/usces-cart/’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://○○.com/wp-content/themes/○○/usces_cart.css’. This request has been blocked; the content must be served over HTTPS.

○○.com/:1 Mixed Content: The page at ‘https://○○.com/usces-cart/’ was loaded over HTTPS, but requested an insecure script ‘http://○○.com/wp-content/plugins/usc-e-shop/js/usces_cart.js’. This request has been blocked; the content must be served over HTTPS.

https://○○.com/wp-content/themes/default/loading.gif Failed to load resource: the server responded with a status of 404 (Not Found)

おそらく、元々読み込まれるはずのcssやjsがhttps化されていないのでブロックされたものと思われます。

試しにwelcartページのみSSL化の設定をしたところ、再度警告表示が出るようになりましたが、cssやjsファイルはhttps化されて読み込まれているようでした。

つまり、サイト全体をSSL化すると、welcart関連のcssとjsファイルがhttpで出力されるというのが根本的な原因のようです。

これが元々の問題なのか、サーバー側の問題なのか、あるいは私の環境下のみの問題なのかはわかりかねますが、ぜひとも解決策を示していただければ幸いです。

よろしくお願いいたします。

[nanbu]

こんにちは。

サイト全体をSSL化する場合は、一般設定のURLをhttpsに指定してください。その際Welcartのシステム設定のSSLの利用はチェックを外して「利用しない」設定にします。特にHTTPSなどのプラグインを使う必要はございません。

ただ、記事の中に書かれた画像のリンクは変わりませんので、途中でSSLする場合は、データベースを書き換えるなどの作業が必要となります。

ご自分での暗号化は、確かに暗号化されますが、ブラウザは正規のものと判断してくれませんので、結局警告が出るのではないでしょうか。

[投稿者]

投稿