0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【非プログラマー備忘録】https化で必要そうなこととざっくり対応例

Last updated at Posted at 2018-11-13

そもそもなぜhttps化するのか、httpsにしたらなぜ作業が発生するのか

このへんは参考ページにたいへん詳しく書いてあります。

:page_facing_up:参考
SSL対応でhttpとhttpsが混在したコンテンツが表示できない原因を特定する
WordPressサイトのSSL化(通信の暗号化)をする際の手順や注意点
SSL化でhttpからhttpsに移行中、混在コンテンツの対応し緑の鍵マークを付ける工程
Googleも推奨!サイト全体を「常時SSL化」するべき理由とメリットについて

ほんとにさくっと適当極まりなく触れますと以下のような感じです。

:one: httpsにしておくとhttpよりも安全だからSEO的にも推奨されてるよ
:two: httpsのサイトではhttpのURLで読込するとエラーになったり動かないものがあるよ
:three: クッキーを使ってる場合は「セキュア」属性がオンになってないと安心じゃないよ

ここでいうエラーは「MixedContents」という..
httpsなのにhttpのURLを呼び出してるの危険じゃない?..的なやつが殆どです。
サイト内リンクを絶対パスにしている場合はURL違いによるリンク切れが起こりますし、
cssや画像、jsの読み込みファイルや埋め込み・インクルードなども絶対パスだとエラーが出ます。
ただの外部サイトへのaタグリンクは特に問題ありません。

対応が必要そうな項目

仕様によって違うと思いますが
大体このへんは共通かな..というものをリストアップしました。
が、まずはサイト全体で「https」の個所を検索・対応可否を検討し、
スケジュールを切って進行していくのが無難かなと...
そのへんの判断のための材料として、参考になればと思います。

WEBクリップ・OGP設定

ページでエラーは出ないけどツイッターやfacebookにてシェアした際サムネが表示されないため
phpなどでできるだけ共通ファイルに集約し、切替のタイミングでスッと「https」へ変更します。

:pencil2:記述例

image" content="https://www.○○○.com/images/img_ogp.jpg">
<meta property="og:url" content="https://www.○○○.com">

SNSボタン

こちらも特にページ上でエラーは出ませんが、
https化されるタイミングで取得しなおしたタグに差し替えておくのが堅実です。

:pencil2:記述例

//www.○○○.com/" data-width="125" data-layout="button" data-action="like" data-show-faces="false" data-share="false">

画像やcssが絶対パスで読み込まれている場合(ワードプレス等)

普通にリンク切れを起こす上にエラーが出ます。
手動での更新で絶対パスにしている箇所はそうそうないと思いますが、
ワードプレスの記事などは絶対パスで書かれていることが多いので、
もしルートパスにして問題なければ事前に対応しておくと、タイミングを分散できます。

:pencil2:記述例

//www.○○○.com/images/○○○/img_01.jpg" />
<img src="/images/○○○/img_01.jpg" />

:bulb:対応例
静的ファイルであれば使い慣れたコーディングツールで置換するとよいかと。
ワードプレスの場合は「Search Regex」にて置換するか、「db-manager」にて
バックアップファイルを手動置換・アップロードし、バージョン管理にて反映する感じが楽です。
FTP上でデータベースにアクセス権が無い場合は前者で対応します。

ワードプレス自体の設定

wp-conifg.phpと、管理画面にてWPアドレスとサイトアドレスをhttpsに変更

:page_facing_up:参考
ブログ初心者がhttp→httpsへ常時SSL化させて直面した問題&解決方法を公開!

:pencil2:wp-conifg.phpの記述例

$_ENV['HTTPS'] = 'on';

GoogleMapAPI

httpsになったときに警告が出るため対応が必要。
google自体はhttpsに対応しているので、事前に手動で変更しておくとよいかと。

:pencil2:記述例

new google.maps.MarkerImage('https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + (counter + 1) + '|○○○|000000')

Youtubeの埋め込みタグ

古いタグではhttpから始まる埋め込みタグになっている可能性があり、
そのままにしておくとエラーが出ます。
youtube公式が既にhttpsに対応しているため、
こちらもhttps化する前に差し替えておくとタイミングを分散できます。

:pencil2:記述例

//www.youtube-nocookie.com/embed/○○○" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

cookieのセキュア対応

これはいくらでも参考サイトがあるのですが
とにかく全容が見えていない人間には理解し難かった..
cookieはデフォルトだとhttpでの通信なので、
cookieがhttpsによるセキュリティ保護を適切に受けられるようにするための設定が必要です。
php.ini(サーバへの設定)と、ページ単位で使用している「setcookie()」のパラメータへ
個別に追加する対応があります。
ブラウザのデバッグツールにてセキュアの項目にチェックがあるかどうかで確認できます。

どちらの対応もhttpsのURLでみたときしかセキュアのチェックは入らず、
httpsのサイトでしか動かないようにするためのものなので
https化と同じタイミングで対応する必要があります。

全容に関して、個人的には以下の記事がくわしくてわかりやすかったです。
むしろcookieのセキュア対応に関してはこれを読めば完璧なのでは..

:page_facing_up:参考
Cookieとセッションをちゃんと理解する

:pencil2:php.ini記述例

ini_set("session.cookie_secure", 1);

:pencil2:setcookie()を各ページで使っている場合の記述例

setcookie('cookiename','num','time()','/○○○/','○○.com',1,0);
//※第6引数「secure」を1に設定
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?