https的页面中可以发起http的请求吗

昨天在面试的时候，最后面试官突然问了一个问题，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的请求地址'