昨天在面试的时候,最后面试官突然问了一个问题,https的页面中可以发起http的请求吗?我的回答是不可以请求,基于
https的安全性是不可以发起请求的
,最后面试官又问有没有什么办法可以发起请求,当时没答上来,面试完后赶紧找了下相关的资源,顺便来记录下。
引言
首先来设定一个场景,自己写的web项目,为什么在https的页面中会出现http请求,按正常的开发流程,主站升级https后,相关的站点都会升级成https的,这样说确实没错,但前提是站点里面的内容都是自己管理的,但如果有时候引入其它平台的API或者资源时没有使用https了,这种情况该怎么办呢?所以就出现了https的页面中可以发起http的请求吗?这样的问题。
混合内容
https的页面页中为什么不能发起http请求,有人也行会觉得是同源策略的问题,同源策略的定义是这样的:1. 协议相同 2. 域名相同 3.端口相同
,尽管https
访问http
确实不符合同源策略中的协议相同,但反过来http页面中可以使用https请求。为什么又可以了,其实这不是同源策略的问题,而是跟混合内容的问题。
以下内容参考自MDN
什么是混合内容
当用户访问使用HTTPS的页面时,他们与web服务器之间的连接是使用SSL加密的,是安全的,从而保护连接不会受到攻击。如果HTTPS页面包括由普通明文HTTP连接加密的内容,那么连接只是被部分加密:非加密的内容可以被入侵,并且可以被中间人攻击者修改,因此连接不再受到保护。当一个网页出现这种情况时,它被称为混合内容页面。
混合内容又分为主动混合内容和被动混合内容。
- 被动混合内容是指不与页面其余部分进行交互的内容,包括图像、视频和音频内容 ,以及无法与页面其余部分进行交互的其他资源。
- 主动混合内容指的是能与页面交互的内容,包括浏览器可下载和执行的脚本、样式表、iframe、flash 资源及其他代码。
突破限制
但有时候就是想在https中发起http请求,碰到这情况会怎么办了?其实可以借助被动混合内容的加载方便来突破这一层限制,使用加载图片的方式来发起请求,如下所示:
const img = new Image();
img.src = 'http的请求地址'