分析https网页加载http资源导致的页面报错原因及其解决方案
ForFuture Code 2018-05-21 15:16:27 31235 收藏 15
分类专栏： 开发环境配置 文章标签： https
版权
开发环境配置
专栏收录该内容
9 篇文章0 订阅
订阅专栏
https网页加载http资源导致的页面报错及解决方案
https是当下的网站的主流趋势，甚至像苹果这样的大公司，则完全要求用户必须使用https地址。
然而对于以前http链接来说，我们往往就存在一个兼容性问题，因为你不可能一下就全部切换过去，应该在很长一段时间内，https与http将共存。
https与http共存的场景有如：
1. app已经发布出去，其调用接口的地址为http的，那么这是必须兼容的。
2. app中嵌入了h5页面，而这页面在以前的设计中是使用http访问的，如果换成https地址，极有可能将导致h5页面无法打开。
3. 对于流量推广一类的业务，可能原有的http推广地址已经发送给第三方，而且即使你通知到第三方要求改为https，也不排除有http地址的访问。
针对以上场景，我们肯定是要https与http共存的。
改https初看起来，其实就是一个域名指向的问题，也许我们只要将http的请求，直接跳转到https地址去，那么也就完成了https的切换。实际并不是这么简单的。
因为https地址中，如果加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止，这就会给你带来资源不全的问题了，比如：图片显示不了，样式加载不了，JS加载不了。因为样式类，基本上都是写在本地的，所以一般还可以，但是一些公共的js文件，往往就是存在于cdn或者其他服务器上，这时候，如果访问不了，可能就导致了业务就完全操作不了。比如：jquery效法加载失败，可能所有的操作、请求都将无效了。
如项目中的js文件无法加载，直接导致项目实效（使用$都报错）。如下图所示：
将http请求直接跳转至https请求，是一种解决办法，而且很多公司都是这么干的，比如百度什么的，但是前提是，你所有的服务都已切换https完成。
但是对于，要兼容https、http两种协议的情况，怎样才能做到呢？
1. 最笨的方法，直接复制原有代码，写成两套代码，一套为http使用，一套为https使用，http和https各自指向各自服务。
2. 可用的方法，用同一套代码，在后台请求标识好协议，将该变量传到html页面中，进行协议替换，如：后台变量，$protocol = ‘https://‘; 前台接收变量 src=‘{$protocol}res.aa.com/jquery.js‘。
3. h5方法，使用js自己加载协议情况，如在body οnlοad=‘aa()‘, 在aa() 方法中，将资源按照需求加载进来即可。
4. 推荐方法，不指定具体协议，使用资源协议自适配，比如，当前为https页面，那么就是https资源，如果是http页面，那么就是http资源。具体方法超简单：<script src=‘//cdn.bootcss.com/jquery/3.3.1/jquery.min.js‘></script>
【补充】Mixed Content
HTTPS 网页中加载的 HTTP 资源被称之为 Mixed Content(混合内容)，不同浏览器对 Mixed Content 有不一样的处理规则。
HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。
解决：
页面的head中加入：<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
意思是自动将http的不安全请求升级为https
upgrade-insecure-requests详细介绍
历史悠久的大站在往 HTTPS 迁移的过程中，工作量往往非常巨大，尤其是将所有资源都替换为 HTTPS 这一步，很容易产生疏漏。即使所有代码都确认没有问题，很可能某些从数据库读取的字段中还存在 HTTP 链接。
而通过 upgrade-insecure-requests 这个 CSP 指令，可以让浏览器帮忙做这个转换。启用这个策略后，有两个变化：
页面所有 HTTP 资源，会被替换为 HTTPS 地址再发起请求;
页面所有站内链接，点击后会被替换为 HTTPS 地址再跳转;
需要注意的是 upgrade-insecure-requests 只替换协议部分，所以只适用于 HTTP/HTTPS 域名和路径完全一致的场景。
点击跳转原文章