静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > SSL対応したのに【保護されていない通信】の表示が!?Chrome 79以降での警告メッセージ対応について

ホームページ制作 SSL対応したのに【保護されていない通信】の表示が!?Chrome 79以降での警告メッセージ対応について

  • このエントリーをはてなブックマークに追加

今回の記事は営業部の原川が担当します。

タイトルの通り、全ページSSL対応済みのWebサイトにおいて【保護されていない通信】が表示されるケースが発生し、社内がざわつきました。

直感的に混合コンテンツ(※1)が問題かなと考えたのですが、
今回は別の要因でしたので解決策も含めてご紹介したいと思います。

(※1)https内に含まれるhttpコンテンツのことです。

Google Chrome version79

SSL対応済みのWebサイトで【保護されていない通信】の表示される例


このように本来SSL対応できていたWebサイトにおいて、
Chrome Version79で「保護されていない通信」と警告が通知されるようになりました。

Googleからの発表と警告の原因

Chrome72よりTLS1.0/1.1が非推奨となり、開発者ツールのコンソールに警告が通知されるようになりました。
そして2020年1月13日からChrome79において、TLS1.0またはTLS1.1接続のページに警告メッセージが通知される形に変更となりました。

The connection used to load resources from https://www.akindo2000.net/ used TLS 1.0 or TLS 1.1,
which are deprecated and will be disabled in the future.

Once disabled, users will be prevented from loading these resources.
The server should enable TLS 1.2 or later.

つまりどういうこと?

TLS (Transport Layer Security)とは、SSLの脆弱性を回避するために作り直したセキュリティプロトコルで、SSLの後継のものとお考え下さい。

実際にはTLS規格のものも通称としてSSLと呼んでいるケースが多いです。

つまりTLSのバージョンが古いWebサイトにおいて、Googleは安全とは認めないよ。という警告が表面化され出てきたのが今回の現象です。

TLS (Transport Layer Security)のバージョン
TLS1.0	1999年リリース(保護されていない通信)
TLS1.1	2006年リリース(保護されていない通信)
TLS1.2	2008年リリース
TLS1.3	2018年リリース

TLSバージョンアップの注意

TLS1.0、1.1からバージョンアップを検討しなければ。という視点では同様の記事を見た方も多いかと思います。

Webサイトに導入しているTLSが単純に古いものを使い続けていただけという場合であれば、TLS1.3の最新バージョンに更新を行えば問題ありません。

皆様も、Webマスターの方やWeb制作会社に依頼すれば比較的すぐに対応できると思います。

その中でも要注意なケースがあります。

お使いのWebサーバプランが古く既に販売終了したプランの場合、
サーバ自体がTLS1.3に対応していないケースがあります。

この場合は新しいサーバへのWebサイト移設が必要となります。
大がかりになってしまいますが、今後を見据えるとこの機会に最新のサーバプランに移設するのが良いかもしれません。

Chrome80、81になると・・・。

Chrome80になると、混合コンテンツ(※1)の動画や声があった場合、自動的にhttpsで接続され、httpsでは読み込めなかった場合はコンテンツがブロックされるようになります。
加えて混合画像の読み込みは許可されますが、【保護されていない通信】の表示されるようになります。

さらにChrome81になると、混合画像も自動的にhttpsで接続され、httpsでは読み込めないとなるとブロックされるようになります。

これから立ち上げるWebサイトは問題ないはずですが、長く運用してきたWebサイトは一度点検した方がよいかもしれません。
安全な接続を確保することは、Google目線だけでなく、運用目線で重要なことかと思います。

以上TLSとChromeの話でした。

ご参考になった点があれば幸いです。

(※1)https内に含まれるhttpコンテンツのことです。

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

  • posted on 2021/02/10インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v9.0)を使って再表示する方法とは

  • posted on 2020/06/10ノンデザイナーのためのデザイン基本ルール ~文字編 文字詰め~

おすすめタグ

ECサイト 動画 HTML レクリエーション 創業記念日 ASP SSL PageSpeed Insights スピードアップデート 動画広告 ECcube wordpress 構造化マークアップ カスタマイズ Transport Layer Security 保護されていない通信 HowTo Chrome TLS クリック率 ハウツー ノンデザイナー リッチリザルト Instagram広告 文字 デザイン フォント Core Web Vitals 自作PC 初心者 構造化データ Facebook広告 リモート iPhone CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier Facebook Audience Network Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ 写真 自作パソコン ウェブサイト翻訳 Adobe XD PC組み立て XMLサイトマップ PHP タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ Threads(スレッズ) Instagram Adobe Firefly 画像生成AI アセット生成 生成塗りつぶし Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Adobe Express Webマーケティング デジタルマーケティング 文字コード 符号化文字集合 生成拡張 Google Search Console レクタングルバナー 画質パラメーター shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク remotework プラグイン IE コーディング サイズパラメーター モダンブラウザ gridレイアウト object-fit aspect-ratio any-hover docker Photoshop クラウドドキュメント ディスプレイ広告 スマートオブジェクト gap Unicode(ユニコード)

Top