HTTPS Web page loading HTTP resource prompt loading unsafe script

HTTPS is a mainstream trend for today's web sites, and even large companies like Apple require users to use HTTPS addresses entirely.

However, for previous HTTP links, we often have a compatibility problem, because you can not switch all over the past, it should be for a long time, HTTPS and HTTP will coexist.

The scenario in which HTTPS coexists with HTTP is as follows:

1. The app has been published and the address of the calling interface is HTTP, so this must be compatible.

2. The H5 page is embedded in the app, which is accessed using HTTP in the previous design and, if replaced with an HTTPS address, will most likely cause the H5 page to fail to open.

3. For traffic promotion business, the original HTTP promotion address may have been sent to a third party, and even if you notify the third party to change the request to HTTPS, do not exclude the HTTP address access.

For the above scenario, we definitely want HTTPS to coexist with HTTP.

Change HTTPS at first look, is actually a domain name point to the problem, perhaps we just will HTTP request, jump directly to HTTPS address, then also completed the switch of HTTPS. The reality is not so simple.

Because the HTTPS address, if the HTTP resources are loaded, the browser will consider this is not a secure resource, will be blocked by default, which will give you the problem of resource is not complete, such as: Pictures can not be displayed, style can not be loaded, JS can not load. Because the style class, basically is writes in the local, so generally also can, but some common JS file, often is exists in the CDN or other server, this time, if cannot access, may cause the business to be completely unable to operate. For example, if jquery fails to load, all operations and requests will be invalidated.

Jumping HTTP requests directly to HTTPS requests is a workaround, and many companies do so, such as Baidu or something, but the premise is that all of your services have switched HTTPS to completion.

But for, to be compatible with HTTPS, HTTP two kinds of protocol, how to do it?

1. The stupidest method, copy the original code directly, write two sets of code, a set for HTTP use, a set for HTTPS use, HTTP and HTTPS each point to their respective services.

2. Available methods, with the same set of code, in the background request to identify a good protocol, the variable is uploaded to the HTML page, the protocol replacement, such as: background variables, $protocol = ' https://'; The foreground receives variable src= ' {$protocol}res.aa.com/jquery.js '.

3. H5 method, use JS to load the protocol situation, such as in the Body onload= ' AA () ', in the AA () method, the resources are loaded in accordance with the requirements.<script>!window.jQuery && document.write(unescape(‘%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E‘))</script>

4. Recommended method, do not specify the specific protocol, using the Resource Protocol adaptive, for example, the current HTTPS page, then is the HTTPS resources, if it is an HTTP page, then HTTP resources. The method is super simple: <script src= '//www.aa.com/jquery.js ' ></script>

5. Need to change to <a onclick=window.open (' http://jxipt.365960.cn/') style= ' cursor:pointer ' > Information address </a>

Using an IFRAME

Using an IFRAME to introduce HTTP resources, such as playing Youku video in HTTPS, we can first play the Youku video in an HTTP page, and then embed this page in the HTTPS page.

Another typical example is to request HTTP resources via Ajax on the HTTPS page, and Chrome does not allow direct Ajax to request HTTP. If the contents of the two pages can be controlled, the current window can communicate with the iframe window.

Other usage

<img src="//domain.com/img/logo.png">

This tip also applies to CSS:

.omg { background: url(//websbestgifs.net/kittyonadolphin.gif); }

HTTPS Web page loading HTTP resource prompt loading unsafe script