laravel備忘録シリーズ〜http通信とcss

困っていたこと

laravelで作成したアプリをデプロイしたところ、chromeのアドレスバーに「安全でない通信です」のような文言が出る(正確な文章は覚えていないです)。

原因

調べてわかったのは、「herokuの仕様として、何も指定しない場合に勝手にhttp通信になる」ということ。

herokuは自分自身が持っているセキュリティ対策の仕組みに自信を持っているらしく、よっぽどのことがなければそちらで事足りるという判断だろう。

しかし、chrome側にすればそんなことは知ったことではないので、https通信をしない限りは警告が出続けるというわけである。

対処法

以下の3点を行いました。

  • 実施環境の指定(@ターミナル)

  • https通信の強制(@AppServiceProvider)
  • http通信からhttps通信へのリダイレクト(@middleware)

順番に見ていきます。

実施環境の指定(@ターミナル)

heroku config:set APP_ENV=production

意外と忘れがちかもしれません。

https通信の強制(@AppServiceProvider)

App\Providers\AppServiceProviderに以下の内容を記述します。

public function boot()
{
if (\App::environment(['production'])) {
\URL::forceScheme('https');
}
}

public function boot(){}はすでに用意されているので、その中に書き足す感じですね。

 

注意点が3点あって、

  • VSCodeだと\Appと\URLの部分に赤線が表示されるが、無視してOK
  • これ以外に、上記の環境変数設定と次のmiddlewareの設定も必要。
    簡単そうなこれだけを最初に試しましたがダメでした。
  • "production"の部分は他の単語ではだめ。
    最初は環境変数が=productionではなく=herokuだったのでファイル内の記述をそちらに合わせようとしましたが、これもダメでした。

middlewareの記述

Middlewareディレクトリの中にforceHttpToHttps.phpを作成し、その中にhttpをhttpsにリダイレクトする処理を記述します。

最後にkernel.phpで読み込みます。

 

@ターミナル

php artisan make:middleware forceHttpToHttps

 

@App\Middleware\forceHttpToHttps

public function handle(Request $request, Closure $next)
{
if (\App::environment(['production']) && $_SERVER["HTTP_X_FORWARDED_PROTO"] != 'https') {
return redirect()->secure($request->getRequestUri());
}
return $next($request);
}

public function handle(Request~ とreturn $next~は記述されています。

if(){}の部分を追加してください。

ここでも\Appの部分に赤線がつきますが無視して大丈夫です。

 

@kernel.php

protected $middleware = []の中に以下の一文を追加します。

\App\Http\Middleware\ForceHttpToHttps::class,// 追加

これで先程作成したmiddlewareが読み込まれるようになります。

 

おまけ

上記の作業を実行したところ、CSSの読み込みが改善しました。

それまでは本番環境にアクセスした際には読み込まれておらず、ログインなどでページを切り替えるとスタイリングが有効化されるというなんとも言えない状態だったのですが、なぜか解決してしまいましたね・・・