Web 安全之混合内容

什么是混合内容#

在使用 https 协议下的网页引入了 http 协议的资源，比如图片、css、js、视频、音频，即视为混合内容。http 协议一般不会有混合内容，因为混合内容是建立在 https 协议下，https 是经过 SSL 协议加密，内容无法篡改。

混合内容包括哪些#

1. 被动内容，即无法修改页面内容的元素，主要包括： <audio> <img> <video> <object>

2. 主动 / 活动内容，即可能修改页面内容的元素，主要包括：<script> <link> XMLHttpRequest <iframe> <object> 以及 css 内容中通过 url 形式引入的字体文件，背景图片、浏览器 API Fetch 等等。

网页中有混合内容会遇到什么问题#

1. 浏览器没有小锁的图标，页面提示不安全。

2. 主动 / 活动内容会被拦截。

如何解决混合内容中 ajax 的请求#

1. 使用 http 协议，因为混合内容是建立在 https 之上的，当然这样做网页也就不安全了，容易被监听、窜改数据。所以不推荐。

2. 由后端提供 API ，前端请求到当前域名下由后端进行转发请求。

参考文档：

https://developer.mozilla.org/zh-CN/docs/S...
https://developers.google.com/web/fundamen...

本作品采用《CC 协议》，转载必须注明作者和本文链接