混合コンテンツ(mixed content)エラー？

前の記事でも紹介した配布サービス、cloudtypeで配布を進めながらcssが正常に適用されないことを確認し、ネットワークタブを確認したら、ファイルを正しくロードできないことを確認しました。Statusに(blocked:mixed-content)というエラーが発生していたので、これについて調べてみました。

君はどんなエラー？

"(blocked:mixed-content)" というメッセージは、WebページがHTTPSプロトコルを使用してロードされたが、その中でHTTPプロトコルを使用するリソース（CSSやJSファイルなど）をロードしようとしたときに発生するセキュリティエラーを示します。このような現象を「混合コンテンツ(mixed content)」と呼びます。

HTTPSプロトコルはウェブ通信を暗号化してセキュリティを強化しますが、HTTPプロトコルは暗号化されないため、セキュリティに脆弱です。したがって、ウェブブラウザはHTTPSページでHTTPリソースをロードしようとすると、これをブロックしてユーザーのセキュリティを保護します。

この問題を解決するには、すべてのリソースをHTTPSで提供する必要があります。

なぜ発生したのか？

エラー内容を詳しく見てみると、httpsではなくhttpで呼び出していることが確認できました。

どのように解決したか？

配布版の場合、すべてのURLにhttpsを適用させてくれるコードを追加しました。この他に配布環境にAPP_ENVを与えました。

// web.php
if (env('APP_ENV') == 'production') {
    \Illuminate\Support\Facades\URL::forceScheme('https');
}

変更事項を適用し、デプロイしたらこのようにcssが適用され、使えるようになりました！

📌 参考
https://laravel.io/forum/12-26-2014-routing-with-https