Laravel include css file from Mixed Content

Question

I'm attempting to release a Laravel website on a server that is behind a load balancer. The domain SSL is hosted on the load balancer to enforce HTTPS. However, the server hosting the website does not have SSL. This causes a miss-match of HTTPS and HTTP when requesting assets.

When on the server, the site works perfectly. (localhost/CentralizedSettings/login) When requesting outside the server(https://blahSite.com/CentralizedSettings/login), css file is blacked and I get this error:

Error message:

Mixed Content: The page at 'https://blahSite.com/CentralizedSettings/login' was loaded over HTTPS, 
but requested an insecure stylesheet 'http://blahSite.com/CentralizedSettings/css/app.css'. 
This request has been blocked; the content must be served over HTTPS.

head.blade.php

<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />

.env file:

APP_ENV=local
APP_URL=https://blahSite.com/CentralizedSettings

Things I've tried:

- Adding the APP_URL to the .env file
- Changing the url to localhost
- Using asset(mix('css/app.css'))

Can you run through the database values to see if you can find any `http` entries? Something [like this](https://i.stack.imgur.com/Q2JeJ.png)? — Praveen Kumar Purushothaman, May 18 '22 at 13:06
This barely is a PHP question, but it's all about a blatantly obvious server misconfiguration... while `APP_ENV=local` in combination with `https` doesn't provide much sense either. — Martin Zeitler, May 18 '22 at 13:09
@MartinZeitler, Setting up servers behind a load balancer is a common practice. I find it hard to believe that Laravel doesn't support this in some way — Sari Rahal, May 18 '22 at 13:13
then better set `ASSET_URL=https://blahSite.com` in your .env — Lk77, May 18 '22 at 13:15
Does this answer your question? [Load Blade assets with https in Laravel](https://stackoverflow.com/questions/34378122/load-blade-assets-with-https-in-laravel) — Martin Zeitler, May 18 '22 at 13:16
@Lk77 The problem with this "workaround" is, that it won't work locally... and that it would require two different `.env` in order to stay operational in both environments; but `ASSET_URL` sounds good. — Martin Zeitler, May 18 '22 at 13:17

score 4 · Accepted Answer · answered May 18 '22 at 13:23

4

I think the solution is to force https in production :

<?php

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\URL;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        if($this->app->environment('production')) {
            URL::forceScheme('https');
        }
    }
}

another solution is to use ASSET_URL :

.env

ASSET_URL=https://example.com

.env.local

ASSET_URL=http://local.example.com

answered May 18 '22 at 13:23

Lk77

2,203
1
10
15

The second approach is way better, because there's no need to force it. – Martin Zeitler May 18 '22 at 13:26
well http should not be allowed in production anyway, so forcing it is not really an issue, but i agree it's nicer to use the second approch, and it requires no code – Lk77 May 18 '22 at 13:28
Within a page, one can even inherit the protocol; instead of `http://` or `https://` just `//`... that's not applicable here, but in general, this works well to prevent mixed content. – Martin Zeitler May 18 '22 at 13:31
laravel will use the protocol of the incoming request, so http in that case, laravel does not know that it's behind a load balancer, setting X-Forwarded-Proto on header might help laravel choose the correct scheme – Lk77 May 18 '22 at 13:32

Laravel include css file from Mixed Content

1 Answers1