3

After introducing ALB (Application Load Balancer on AWS) in front of one EC2 instance, Chrome browser shows Mixed Content Error. (I edited the content of the error a little by security reason)

Mixed Content: The page at 'https://www.sample.com/talk' was loaded 
over HTTPS, but requested an insecure EventSource endpoint 
'http://www.sample.com/api/getData?param1=123&param2=456'. This 
request has been blocked; the content must be served over HTTPS.

Pattern1 has no errors.

Pattern2 shows the above error. I don't know where is a problem in my technology stack.

Pattern1: ALB(443) => EC2(443)
Pattern2: ALB(443) => EC2(80)

My tech stack:

ALB
Apache 2.4
Laravel 5.7
React 16.9

I tried the following solution but the error still happened.

  1. Trust Proxy of Laravel.
  2. HTTP request to server from React is written like relative path (/api/getData?param1=123&param2=456) so I replace the code to absolute path specifying protocol and domain name (https://www.sample.com/api~).
  3. In Apache web server, rewrite http to https (I think this is bad idea).

Is this a general problem?

If you have any hints, please help me.

I'm sorry for my poor English.

mozukuzuku
  • 53
  • 1
  • 7

3 Answers3

2

The problem you are encountering has nothing to do with ALB, it is just a pass-through load balancer, listens on one port and forwards the requests to the target group as you configure.

Your requests are blocked by the browser due to the mixed content. As you understood you need to serve the contents using the same protocol either HTTPS or HTTP.

There are two possibilities that I can think of

  1. Your application code/configuration is mixing up the content
  2. Or your proxy server(Apache) is switching the protocol for your endpoints
Juned Ahsan
  • 67,789
  • 12
  • 98
  • 136
1

The mixed content error is solved. There are problems in my http request codes in front-end to my Laravel server .

I found URL notation is not appropriate. I don't know why the wrong url notation leads mixed content error.

Example 1. There is a slash in the end of url.

bad:  /api/sample/to/laravel/
good: /api/sample/to/laravel

Example 2. Notation of query parameter is not appropriate.

bad:  /api/sample/to/laravel/?param1=123
good: /api/sample/to/laravel?param1=123
mozukuzuku
  • 53
  • 1
  • 7
1

Thanks greatly to mozukuzuku. Your solution lead me to my solution. If you have AWS ALB in use and you just end the URL for the IFrame SRC with just the subdir name xxx.com/mmm or xxx.com/mmm/ both with no actual file name on the URL, the browsers will see this as mixed content as there is no content per se as no there is no file name. If you add index.asp or default.asp or your file name to the end of the URL, then the browsers will be happy and the mixed content message goes away (or it will show real CSP warnings, etc). There was no mixed content, the AWS ALB is just returning an answer that the browsers didn't link when the name of the file is not supplied.

darren
  • 11
  • 1