Loading http resources on https web pages: loading insecure scripts; loading https

Loading http resources on https web pages: loading insecure scripts; loading https

Https is the mainstream trend of the current website. Even large companies like Apple require users to Use https addresses.

However, for previous http links, we often have a compatibility problem, because it is impossible for you to switch all over. For a long time, https and http will coexist.

Https and http coexist in the following scenarios:

1. If the app has been released and Its called interface address is http, it must be compatible.

2. The h5 page is embedded in the app, which was accessed through http in the previous design. If it is changed to an https address, it is very likely that the h5 page cannot be opened.

3. For a traffic promotion business, the original http promotion address may have been sent to a third party, and even if you notify a third party to change the request to https, access with the http address is not excluded.

For the above scenarios, we must ensure that https and http coexist.

The change to https seems to be a problem of Domain Name Pointing. Maybe we just need to redirect the http request directly to the https address, then the https switching is completed. It is not that simple.

If an http resource is loaded in the https address, the browser will regard it as an insecure resource and will block it by default. This will cause incomplete resources, for example: images cannot be displayed, Styles cannot be loaded, and JS cannot be loaded. Because style classes are basically written locally, they are generally acceptable, but some common js files are usually stored on cdn or other servers. If they cannot be accessed at this time, this may cause the business to be completely unable to operate. For example, if jquery fails to simulate loading, all operations and requests may be invalid.

It is a solution to directly redirect http requests to https requests, and many companies do this, such as Baidu, but the premise is that, all your services have been switched over to https.

But how can we ensure compatibility with https and http protocols?

1. the most stupid method is to directly copy the original code and write it into two sets of code, one for http, one for https, and the other for http and https respectively pointing to their respective services.

2. available Methods: Use the same set of code to identify the protocol in the background request, and upload the variable to the html page for protocol replacement, such as: background variable, $ protocol = 'https: // '; front-end receiving variable src =' {$ protocol} res.aa.com/jquery.js '.

3. The h5 method uses js to load the Protocol. For example, in the body onload = 'aa () ', load the resource in the aa () method as needed.<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

4. the recommended method is to use resource protocol self-adaptation without specifying a specific protocol. For example, if the current page is an https page, it is an https resource. If it is an http page, it is an http resource. The specific method is very simple: <script src = '// www.aa.com/jquery.js'> </script>

5. Replace <a onclick = window. open ('HTTP: // jxipt.365960.cn/') style = 'cursor: pointer'> information address </a>

Use iframe

Using iframe to introduce http resources, for example, playing Youku videos in https, we can play Youku videos on an http page first, then you can embed the page into the https page.

Another typical example is to request http resources through Ajax on an https page. Chrome does not allow direct Ajax requests to http. If the content of both pages can be controlled, the current window can communicate with iframe.

Other usage

This tip also applies to CSS:

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