在使用https协议的网站里能否使用http

回答：

在之前还可以通过img，video等Upgradeable Content来使用http，现在是不可以的，因为在https协议的网站里使用http去请求/相应/下载东西，这个会产生mixed content，这是不安全的，会被浏览器直接block。

背景介绍

想象一个场景，当我们在使用https协议的网站中，使用http的get请求去获取一些数据，我们的浏览器会阻止这个请求并且在控制台报错，如下：

ts 复制代码

Mixed Content: The page at '<URL>' was loaded over HTTPS,

but requested an insecure XMLHttpRequest 

endpoint '<URL>'. This request has been blocked; the content must be served over HTTPS.

那么这里会涉及到一个重要概念，什么是Mixed Content，为什么会被blocked？

那么接下来我们会围绕着这些概念，看看浏览器为了保证我们的安全到底做了什么，以及如何去避免这些报错。

Mixed Content 介绍

关于什么是mixed content，理解它关键在于这个mix，译为混合。那么好了，也就是说产生mix的条件也就是我们在一个安全的 网站上使用到了不安全的操作，比如说：

request
response
又或者是通过不安全的download

等等这些都被成为是mixed content。

mixed content的安全性被分为了两大类：

比较不安全，可以升级的：Upgradeable Content
非常不安全，必须要升级的: Blockable Content

（PS：这里的升级比如说是http升级为https）

Upgradeable Content

这些资源类型是Upgradeable并不意味着它们是安全的，只是它们比其他资源类型的灾难性危险要小。

例如，图像和图标通常是应用程序界面中的中心 UI 元素。如果攻击者颠倒了"删除电子邮件"和"回复"图标，将对用户产生真正的影响。

常见Upgradeable Content 类型如下：

html 复制代码

<img> (src attribute)
<audio> (src attribute)
<video> (src attribute)
<object> subresources (when an <object> performs HTTP requests)

Blockable Content

定义：任何不可按照上面定义Upgradable mixed-content均被视为Blockable Content 。

常见Blockable Content类型如下：

html 复制代码

<script> (src attribute)

<link> (href attribute) (this includes CSS stylesheets)

<iframe> (src attribute)

fetch() requests

XMLHttpRequest requests
All cases in CSS where a url() value is used (@font-face, cursor, background-image, and so forth).

<object> (data attribute)
  Navigator.sendBeacon (url attribute)

参考

w3c mixed-content

mdn mixed-content