用HTTPS访问分析https网页加载http资源导致的页面报错原因及其解决方案

admin3个月前前端js技术446

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />


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 域名和路径完全一致的场景。


原文链接:https://blog.csdn.net/ganquanzhong/article/details/80392346

相关文章

radio选项卡 变成框选样式

radio选项卡 变成框选样式

<style type="text/css">        li{list-style:none; }   ...

代码中引用百度搜索结果地址

<iframe src="http://www.baidu.com/s?wd=%c6%f8%cc%e5%c3%f0%bb%f0%b3%a7%bc%d2" width...

图片懒载技术

参考文章https://www.cnblogs.com/liliangel/p/6122836.html原网站图片替换src=  替换为下面class="lazy" sr...

多行文字溢出[...]的实现(text-overflow: ellipsis)

多行文字溢出[...]的实现(text-overflow: ellipsis)

css:.oneLine {    width: 200px;    overflow: hidden;    white-space: n...

js实现微信号随机切换并复制

js代码:     <script type="text/javascript">  arr_wx =new Arra...

搜索表单-提交按钮 图片显示

<form method='get' name='product_myformsearch' action='/search.asp'  ...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。