https页面中引入http资源的方式

柔光的暖阳◎ 2024-03-27 09:56 56阅读 0赞

## https页面中引入http资源的方式 ##

![image-20221216112333683][]

https引入http要根据具体情况分析，但是解决问题的前提是要先了解二者概念和区别，以及找问题出在哪里。不同项目有不同配置，不一定每次遇到同样的问题，都能用同样的办法解决，但是可以从以往遇到的情况和解决问题的方法进行分析，下面是我遇到https 页面中引入 http 资源遇到问题并解决的总结和分析。

#### 一、HTTP和HTTPS的基本概念 ####

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。

为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准(TCP)，用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

#### 二、HTTP与HTTPS有什么区别？ ####

HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL(Secure Sockets Layer)协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

HTTPS和HTTP的区别主要如下：

1、https协议需要申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

#### 三、HTTPS的工作原理 ####

我们都知道HTTPS能够加密信息，以免敏感信息被第三方获取，所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议。

![image-20221216111538214][]

客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤，如图所示。

(1)客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接。

(2)Web服务器收到客户端请求后，会将网站的证书信息(证书中包含公钥)传送一份给客户端。

(3)客户端的浏览器与Web服务器开始协商SSL连接的安全等级，也就是信息加密的等级。

(4)客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站。

(5)Web服务器利用自己的私钥解密出会话密钥。

(6)Web服务器利用会话密钥加密与客户端之间的通信。

#### 四、HTTPS的优点 ####

尽管HTTPS并非绝对安全，掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击，但HTTPS仍是现行架构下最安全的解决方案，主要有以下几个好处：

(1)使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；

(2)HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。

(3)HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。

(4)谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

#### 五、HTTPS的缺点 ####

虽然说HTTPS有很大的优势，但其相对来说，还是存在不足之处的：

(1)HTTPS协议握手阶段比较费时，会使页面的加载时间延长近50%，增加10%到20%的耗电；

(2)HTTPS连接缓存不如HTTP高效，会增加数据开销和功耗，甚至已有的安全措施也会因此而受到影响；

(3)SSL证书需要钱，功能越强大的证书费用越高，个人网站、小网站没有必要一般不会用。

(4)SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗。

(5)HTTPS协议的加密范围也比较有限，在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。

#### 六、https页面引入http的资源的方法 ####

> 有时候https页面需要同时引用https和http的外部资源，比如图片，视频，音频，外链等等。

> 我做的项目中https页面直接引用http的图片和视频，会导致图片或视频加载不出来。解决方法如下：

**1.需要将页面中所有的链接，例如js，css，图片等等链接都由http改为https。**

例如：http://www.baidu.com改为https://www.baidu.com

这里虽然将http切换为了https，还是建议保留http。因为有的http外链自身权限或者其他原因有一些限制，以至于就算将http改为https，外链也依然不能跳转，这种情况下就要好好测试，然后本身是http的还是用http，这种情况比较特殊。而本身外部资源所在的网站就算https，那直接改为https是可以的。

**2.使用相对协议**

在切换的时候可以做http和https的兼容，具体实现方式是，去掉页面链接中的http头部，这样可以自动匹配http头和https头。  
相对协议: 就是将URL的协议(http、https)去掉，只保留//及后面的内容。这样，在使用https的网站中，浏览器会通过https请求URL，否则就通过http发送请求。

<img src="//domain.com/img/logo.png">
     
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>  
     
    <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
     
    .omg { background: url(//websbestgifs.net/kittyonadolphin.gif); }

siteUrl是https://www.lzhpo.com

图片引入方式是这样子的，将站点前缀分离开来了

**3.将http自动升级为https**

HTTPS 网页中加载的 HTTP 资源被称之为 Mixed Content(混合内容)，不同浏览器对 Mixed Content 有不一样的处理规则。

HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。

在页面的header中加入：

/*自动将http的不安全请求升级为https*/
     
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

**4.使用资源协议自适配(js无法加载的情况)**

比如，当前为https页面，那么就是https资源，如果是http页面，那么就是http资源。

在页面中引入：

**5.使用iframe嵌入到https页面**

使用 iframe 的方式引入 http 资源，比如在 https 里面播放优酷的视频，我们可以先在一个 http 的页面里播放优酷视频，然后将这个页面嵌入到 https 页面里。

另外一个典型的例子是在 https 页面里通过 Ajax 的方式请求 http 资源，Chrome 是不允许直接 Ajax 请求 http 的。如果两个页面的内容都可以控制的话，当前窗口可以 iframe 窗口进行通信。

**6.使用相对URL**

使用相对URL和使用相对协议有点类似，不同的是，相对协议只是省略了http和https协议头的部分，而相对url，也叫相对地址或相对路径，不仅可以省略协议头http和https，还可以省略双斜杠//，及后面的域名！(前提是资源在本地)

[image-20221216112333683]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/a036ca30510c4e7695e90af952578a96.png
[image-20221216111538214]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e1fa3a14eec74165ad9929bb413966af.png