3

I am running ubuntu 14.04 with Nginx 1.8.0. While opening the web pages in https the pages appear to be broken as the css/js/images don't load. I get this error "Blocked loading mixed active content"

This is my nginx.conf: https://github.com/adithyakhamithkar/ansible/blob/master/roles/nginx/templates/nginx.j2

This is my virtual host file: https://github.com/adithyakhamithkar/ansible/blob/master/roles/nginx/templates/virtualhost_ssl.j2

Could some one please guide me how to fix this.

chicks
  • 3,793
  • 10
  • 27
  • 36
Adithya
  • 33
  • 1
  • 4
  • in ansible using `copy` instead of `template` for non-templated files avoids any chance of your file contents being munged on the fly. – chicks Aug 23 '15 at 14:32
  • I was reading a [similar issue](http://serverfault.com/questions/558511/nginx-not-serving-css-js?rq=1) the response code is 304 I see the same in my access logs. – Adithya Aug 23 '15 at 14:38
  • I can use the `copy` for nginx.j2 but i'll have to use `template` for the virtual host. – Adithya Aug 23 '15 at 14:39

2 Answers2

3

Mixed Active Content is now blocked by default in Firefox 23 and above. Not sure about other browsers

What is Mixed Content?

When a user visits a page served over HTTP, their connection is open for eavesdropping and man-in-the-middle (MITM) attacks. When a user visits a page served over HTTPS, their connection with the web server is authenticated and encrypted with SSL and hence safeguarded from eavesdroppers and MITM attacks.

However, if an HTTPS page includes HTTP content, the HTTP portion can be read or modified by attackers, even though the main page is served over HTTPS. When an HTTPS page has HTTP content, we call that content “mixed”. The webpage that the user is visiting is only partially encrypted, since some of the content is retrieved unencrypted over HTTP. The Mixed Content Blocker blocks certain HTTP requests on HTTPS pages.

Sounds like you are linking non-ssl static content. You should link your content like

<a href='//host.com/file.png>

If you need to link from another host.

Mike
  • 22,310
  • 7
  • 56
  • 79
  • Is there a way I can use a proxy to serve the non-ssl static content is ssl content? – Adithya Aug 23 '15 at 14:40
  • I did read it [here](http://www.programering.com/a/MjM0MDMwATI.html) – Adithya Aug 23 '15 at 14:43
  • Protocol relative urls are [now considered an anti-pattern](http://www.paulirish.com/2010/the-protocol-relative-url/) - the normal way to link to assets on the same host, with the same protocol is to simply not specify the host at all (i.e. ` – AD7six Aug 23 '15 at 15:05
  • Let me take an example of wordpress there would be a lot of code to be changed in that case what would you suggest me? I was thinking about running 3 virtual hosts 1. running on port 80 - redirects to port 443 2. running on port 81 - wordpress on plan http 3. running on port 443 - proxy to port 81 Will this approach help? – Adithya Aug 23 '15 at 15:13
0

Not fixable with nginx config

Consider the following html file:

  <html>
    <head>
    </head>
    <body>
      <img src="http://example.com/some/image.png">
    </body>
  </html>

If this html file is served over https - it will always generate a mixed content warning. Attempting to fix the subsequent request for /some/image.png will not work, the request is blocked by the browser and does not reach the server.

Fix the html

The only effective solution is to fix the html source for the main request, such that it requests all assets from https:// also i.e. change the html to this:

  <html>
    <head>
    </head>
    <body>
      <img 
        src="/some/image.png" 
        alt="same domain and port as this html page please"
      />
    </body>
  </html>

Or this:

  <html>
    <head>
    </head>
    <body>
      <img 
        src="https://example.com/some/image.png" 
        alt="explicit https" 
      />
    </body>
  </html>

In comments you've mentioned wordpress as an example; for a wordpress install the only thing required (in principle, in practice expect some messing about) is to change the site url so that wordpress considers https://example.com to be the root url for the installation.

Community
  • 1
AD7six
  • 2,920
  • 2
  • 21
  • 23