在使用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)