• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

Webサイトを常時SSL化する4つのポイント

2017年10月24日

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

こんにちは、Webプログラマの篠田です。

今年のはじめに、Googleが発表した「Chrome 62」からセキュリティのさらなる強化を発表しました。

その影響で、表示ページ内に「input」タグが含まれ、入力するとセキュリティ警告がでるようになります。

今日は、WebサイトをSSL化するためのポイントをまとめてみます。

この記事の目次

  • 1 「Chrome 62」で何が変わる?
  • 2 SSL化のポイント
  • 3 外部ファイルを読み込むときのポイント
  • 4 内部のリンクの記述方法
  • 5 まとめ

「Chrome 62」で何が変わる?

「Chrome」は、「http://」でWebサイトを表示するとアドレスバーが下記のようになります。

alaki-blog001

赤枠で囲った「!」が表示されます。

「Chrome 62」からは、この状態で、Webサイト内に「input」があり、かつ「入力をすると」下記のようにアドレスバーの表示が変わります。

alaki-blog002

また、「input type=”password”」タグがある場合は、強制的にアドレスバーに「保護されていない通信」と表示されます。
※この設定は「Chrome 62」以前から実装されていました。

このように、「Chrome 62」の自動アップデートが実行されるようになると、これまでセキュリティに関心が薄かった一般ユーザーの危機感を煽るようなメッセージが高頻度で表示されるという状況になります。

SSL化のポイント

ここからは、SSL化するときに気をつけておきたい、Webサイトの修正箇所をまとめていきます。

「img」タグの「src」属性

「img」タグの「src」属性が「http://〜」で始まるような書き方をしている場合は、SSL化対応が必要になります。

同じサーバー内にある画像ファイルであっても「http://〜」で記述する「絶対パス」で書かれている場合は「セキュリティの確保がされていないページを読みに行く」という解釈になるため、変更が必要になります。

「link」タグの「src」属性

「link」タグの「src」属性が「http://〜」で始まるような書き方をしている場合は、SSL化対応が必要になります。

これも「img」タグと同様に、「http://〜」で記述されていると「セキュリティの確保がされていないページを読みに行く」という解釈になるため、変更が必要になります。

CSSの「background-image」

盲点になりがちなのが、CSSに書かれている「background-image」が「http://〜」で書かれている場合です。

このパターンも「セキュリティの確保がされていないページを読みに行く」という解釈になるため、変更が必要になります。

同様に、フォントなどを外部から読み込んでいる場合も「http://〜」で呼び出している場合は、変更します。

「a」タグの「href」属性は変更不要な場合もあり

「a」タグの「href」属性は、条件によっては変更が不要になります。

不要なパターンは、「外部へのリンク」になる場合は、SSL化する必要はありません。
あくまでも、SSL化はWebサイト内部の話なので、外部へ移動するリンクに関しては、対応がいりません。

逆に内部リンクの場合は、SSL化の対応が必要になります。
ただし、.htaccess等でリダイレクト設定を行っている場合は、この限りではありません。

外部ファイルを読み込むときのポイント

「jQuery」などの外部ファイルを読み込む場合、多くのサービスではSSLでの接続ができるようになっています。

ですが、製作中のWebサイトがSSL化をするかどうかわからないという場合があります。

そういったときに「http://」と記述するのは、後に対応コストが増える可能性があります。

そういった場合は「http://」を「//」と書き換えることで、対応が可能です。

「//」とすることで、接続先の対応状況に応じて、接続方法を最適にしてくれるという機能があります。

外部ファイルがSSL対応している場合は「https://」と同じ効果を出してくれますので、積極的に活用するとよいです。

内部のリンクの記述方法

Webサイトの作成中に利用する「img」タグなどに「http://」と記述してしまうと、SSL化対応を迫られた時に、作業コストを多く必要とする場合があります。

そのため、制作の段階からファイルの読み込みはすべて「ルートパス」で記述するとSSL化対応が非常に楽になります。

「ルートパス」とは「/img/test.png」といったように「/」はじまりのパスになります。

まとめ

この1年程度でSSL化の波は大きくWeb界隈に広がっています。

現状では、SSL化は「推奨」ですが、近い将来に「必須」になることは十分に想像できる状態となっています。

ALAKIのサイトやこのブログも常時SSL化対応を行っています。

SSL化でお困りの際は、お問い合わせください!

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

You may also like...

  • 14800708_xl

    Webサイトに突然[email protected]と出て困っている方はいらっしゃいませんか?

    21 10月, 2016

  • スクリーンショット 2022-11-03 6.44.07

    OpenStreetMapから3Dモデル(OBJ)を生成してUnityにインポートする

    3 11月, 2022

  • 08fcf6e1f27d6947fe7719c898a78c8c_m

    CLOUD FLAREとIPアドレスの関係を理解しよう

    6 10月, 2017

デザイナー募集
  • Next story Adobe XD 正式版リリース!追加された新機能とは?
  • Previous story DTP入門part.2 グラフィックデザインで3種類の”黒”を使いこなす

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.