8

I have this problem. In external web site I have a script like this:

<div id="idtest"></div>
<script src="//example.com/widget.js" type="text/javascript"></script>

example.com is in https (allow both http and https). In the server in the script widget.js I have:

 $('#idtest').load("https://example.com/index.html")

I get this error: Mixed Content: The page at 'thepage' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://example.com/index.html'. This request has been blocked; the content must be served over HTTPS.

I don't understand: why the error and why the endpoint is in "http"? thanks

EDIT

More information:

if in the widget.js I do this:

 $('#idtest').load("./index.html")

the content is load and all works perfectly if I load the script in my site.

If I do something like:

 x = "https://example.com"
 $('#idtest').load(x + "/index.html")

or 

 $('#idtest').load("https://example.com/index.html")

I get the error (if I put the script in my site or in external site). Why?

EDIT 2

more informations:

my site is in django

EDIT 3

In firefox I load the page in https and http. It doesn't work in Chrome. I see this situation in firefox net analyzer when call the url :

302 https://example.com/index.html 200 http://example.com/index.html [mixed content]

What understand this situation (https to http)? Could be a Django redirect problem?

RoverDar
  • 441
  • 2
  • 12
  • 32

3 Answers3

12

A mixed content error happens when:

  • you try to load secure content SSL(https) on a page served insecurely (http) served

Or the opposite

  • you try to load insecure content (http) on a page served securely SSL(https) served

Your error message is warning that your calling page has been loaded in insecure mode

You haven't explicitly explained this, but your error indicated your page is being served without SSL. When you try to load a protected resource this becomes a mixed mode problem of protected resources and insecure.

If possible, you try to serve the reference file the same way

or

  • Just as you have resolved it, request the partial page without protocol. Now your loaded file will be loaded using the protocol used by your page.

About your specific resource:

I tried loading:

http://example.com/index.html

and

https://example.com/index.html

The result was the same. I got a simple page with the message:

Example Domain

This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.

More information...

Dave Alperovich
  • 32,320
  • 8
  • 79
  • 101
  • The problem is that I try to put HTTPS (or http if the external site need it) in the URL but $.load() countinues to use http. Could be a django redirect problem? – RoverDar Jun 07 '15 at 18:45
  • @RoverDar, the `httprequest` will use the same protocol with which you loaded the page. You must use one protocol (`http` or `https`) for the page and all dependencies. Does that explain? – Dave Alperovich Jun 07 '15 at 18:48
  • This is the problem: I use HTTPS for load the page but it seems that httprequest doesn't use it (use http). I put https :/mysite.com/exemple.com but it doesn' work – RoverDar Jun 07 '15 at 18:55
  • @RoverDar, I see. Sorry, I have to ask, do you have a certificate for your site? – Dave Alperovich Jun 07 '15 at 19:03
  • Yes I have . it works perfectly . the problem is when I call the widget from an external site and try to load index.html. – RoverDar Jun 07 '15 at 19:07
  • Could be a django redirect problem? – RoverDar Jun 07 '15 at 19:17
  • @RoverDar, no this is a browser issue. I think it's a "Same Origin Problem". It is being difficult about loading cross domain in secure mode. – Dave Alperovich Jun 07 '15 at 19:18
  • How can I solve that and set same origin width jquery? – RoverDar Jun 07 '15 at 19:20
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79904/discussion-between-dave-alperovich-and-roverdar). – Dave Alperovich Jun 07 '15 at 19:21
1

I think it is more a problem of cross origin domain.

the $.load function of jquery use ajax to load the url and so you cannot do cross domain call if the target URL does not implement CORS headers.

In your example, the server example.com must return a header

Access-Control-Allow-Origin: *

You can also replace * with the domain of the page that want to load the content by AJAX.

A good blog post on how to use CORS: http://www.html5rocks.com/en/tutorials/cors/

Julien Bachmann
  • 753
  • 8
  • 18
  • This is definitely a CORS problem. The header should solve the problem. – alesc Jun 09 '15 at 18:58
  • If this was a CORS problem, I would expect request to fail always. But the request succeeds when nested in JS file. Would the server care where the request is nested? Wouldn't the server only be concerned with the requesting domain? – Dave Alperovich Jun 10 '15 at 00:20
  • @Julien Bachmann I set in my Django app django cors headers but the result is the same... the $.load works in http and not in https (mixed content) – RoverDar Jun 10 '15 at 13:02
  • based on your edit 3, it looks like effectively it is not a cross domain problem but more a problem where you try to get an http ressource from an https page. It looks like your server do a redirect to HTTP when it receive an HTTPS request and this is the problem. You should configure your server to support https and not do a redirect. – Julien Bachmann Jun 11 '15 at 08:14
0

I had this issue on Ruby on Rails webpage and the the mistake was to use "_url" helper instead of "_path" helper, on a https webpage:

in a view: wrong: borrar_linea_factura_url(l)

ok: borrar_linea_factura_path(l)

As a recap of said before:

"_url" helper generates /controller/action/params

"_path" helper generates https://controller/action/params

Albert Català
  • 2,026
  • 2
  • 29
  • 35