Mixed Content (laravel)

Question

I get the following error (on every page)

app.js:703 Mixed Content: The page at 'https://sitename.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://sitename.com/index.php/getMessages'. This content should also be served over HTTPS.

The site is build with Laravel. Is there anybody who knows how to fix this error?

Answer 1

In my case it's because I wasn't aware that the asset() function didn't handle https automatically (as pointed out by frankfurt-laravel's answer).

To get around this, since I don't use SSL in dev, I set ASSET_URL in the .env to the https url:

APP_URL=https://example.com
ASSET_URL="${APP_URL}"

This overrides the asset() function to use the https url, without having to modify the function at all. See the docs for more context.

Answer 2

If you are moving the website from HTTP to HTTPS, and it's was working perfectly on HTTP, and if you have added the new URL with https in config/app.php and also in the .env file then you may need to add the below snippet in your app/Providers/AppServiceProvider.php file's boot function and do not forget to add "use Illuminate\Support\Facades\URL;" at the top of the file to fix this error. Please check attached for better sample code

use Illuminate\Support\Facades\URL;

public function boot()
{
       URL::forceScheme('https');
}

Answer 3

I had same problem few days ago. Do you use Cloudflare? Change flexible SSL to Full.

Answer 4

I suggest to use the method argument $secure Laravel (5.6 has it definitely) provides:

When you use asset loading, e.g.

 <!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

You can lookup the definition for asset(), if you have some kind of advanced IDE. If not, please check this file helpers.php.

However, the documentation says

/**
 * Generate an asset path for the application.
 *
 * @param  string  $path
 * @param  bool    $secure
 * @return string
 */

So you just need to pass true as the second argument, and then the resource is loaded in a secure way. For above examples it would be

<!-- Scripts -->
<script src="{{ asset('js/app.js',true) }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css', true) }}" rel="stylesheet">

Please note, this will cause conflict if you use php artisan serve, as artisan is not capable to serve via HTTPS protocol. Thus you need HTTPS setup e.g. with Valet on MacOS or Homestead on Windows. Follow the links for setup details.

Hope this helps, please let me know if it worked.

Answer 5

Make sure to remove trailing slashes from XMLHttpRequest endpoint URL.

Answer 6

If you are using Laravel Octane, I figured the fix by looking at octane.php config file.

Set your env to let octane inform upstream framework to use HTTPS.

OCTANE_HTTPS=true

Fixed the issues I was having with mixed-content and email verification signature failure.

Answer 7

In your .env file set your url to https APP_URL=https://sitename.com and in your config/app.php set url to 'url' => env('APP_URL', 'APP_URL=https://sitename.com'), that should solve your problem

Answer 8

I'm using Laravel 8 and Livewire 2. I created the app on Digital Ocean and to fix those issues, I had to do it like this:

<!-- Tailwind CSS -->
<link href="{{ secure_asset('css/app.css') }}" rel="stylesheet">
    
<!-- Alpine -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

<!-- Scripts -->
<script src="{{ secure_asset('js/app.js') }}" defer></script>
@livewireStyles

I had to used secure_asset instead. That's on the Laravel Documentation.

I also had to change all "route" references for secure_url like this:

<form method="POST" action="{{ route('logout') }}">
<form method="POST" action="{{ secure_url('/logout') }}">

Hopefully this will help.

Answer 9

You opened the page 'https://sitename.com/' . But the javascript of this page sent an http request, not https.

You should change your javascript code to send https request.

There are two ways to send https request:

1. Put the protocol together with path.

   $.get('http://sitename.com/index.php/getMessages')

2. Ignore the protocol, but put '//' before the path

   $.get('//sitename.com/index.php/getMessages')