全部
常见问题
产品动态
精选推荐

解决网页中Mixed Content问题

管理 管理 编辑 删除

在Web开发中,作为开发者我们无可避免地需要引入资源文件,或者需要发起Ajax请求。在这个过程中,浏览器的开发者工具有时候会提醒我们当前网页中存在 Mixed Content,如图所示:

8ea42202303040946075813.png

上图中显示的是警告信息,而资源还是被浏览器成功引入了,所以不是特别大的问题。

而如果出现了如下报错信息,则情况则没那么乐观了:

dfefc202303040946182262.png

红色报错信息告诉我们资源加载失败了,它们不会被浏览器加载并处理。当发生这种情况时,意味着你的网站或者Web应用不能正常运行了,必须马上处理。

什么是Mixed Content?

Mixed Content(混合内容)出现于如下场景:HTML页面是通过HTTPS加载的,但是其他资源文件(如图片,视频,样式表文件,脚本)是使用HTTP方式加载的。之所以称为混合内容,是因为在一个网页中同时使用了HTTP和HTTPS,而最初的请求方式为 HTTPS。

现代浏览器可能会阻止此类内容,或者显示关于此类内容的警告,提醒用户此页面包含不安全的内容。阻止混合内容的浏览器可能会首先尝试将该内容的连接从HTTP “升级”到HTTPS。

Mixed Content 分类

混合内容可以划分为两种:主动混合内容和被动混合内容

被动混合内容指的是不与页面其余部分进行交互的内容,从而使中间人攻击在拦截或更改该内容时能够执行的操作受限。被动混合内容包括图像、视频和音频内容,以及无法与页面其余部分进行交互的其他资源。

例如:

img 标签的 src 属性

audio 标签的 src 属性

video 标签的 src 属性

object 标签

主动混合内容作为整体与页面进行交互,并且几乎允许攻击者对页面进行任何操作。 主动混合内容包括浏览器可下载和执行的脚本、样式表、iframe、flash 资源及其他代码。

例如:

script 标签的 src 属性

link 标签的 href 属性

iframe 的 src 属性

XMLHttpRequest 请求

fetch() 请求

在CSS中可以使用url的情况(如 @font-face,cursor,background-image等)

object 标签的 data 属性

navigator.sendBeacon() 请求

如何解决混合内容问题?

借助于现代浏览器的开发者工具,我们可以快速定位出有问题的混合内容。例如,在Chrome浏览器中打开开发者工具,然后切换到 Console 即可看到页面中的警告或者报错信息。

在找出混合内容在网站源代码中的位置后,按照下面的步骤进行修正。

将 Chrome 中的以下混合内容错误用作示例:

899e4202303040947599035.png

下面是在源代码中找到的内容:

f5141202303040948071100.png

第 1 步

通过在您的浏览器中打开一个新标签,在地址栏中输入网址,然后将 http:// 更改为 https://,检查该网址是否可通过 HTTPS 提供。

如果通过 HTTP和 HTTPS 显示的资源相同,则一切正常。 继续执行第 2 步。

如果您看到证书警告,或内容无法通过 HTTPS显示,则意味着无法安全地获取资源。

43a54202303040948338751.pngd01bf202303040948421562.png

这种情况下,你应考虑以下其中一个方案:

1.从另一个主机添加此资源文件。

2.在你自己的网站存放该资源文件。

3.将此资源从网站上完全删除。

第 2 步

将网址从 http:// 更改为 https://,保存源文件,并在必要时重新部署更新文件。

第 3 步

查看最初发现错误的页面,验证并确保该错误不再出现。

CRMEB-慕白寒窗雪 最后编辑于2023-03-04 09:51:35

快捷回复
回复({{post_count}}) {{!is_user ? '我的回复' :'全部回复'}}
回复从新到旧

{{item.user_info.nickname ? item.user_info.nickname : item.user_name}} 作者 管理员 企业

{{item.floor}}# 同步到gitee 已同步到gitee {{item.is_suggest==1? '取消推荐': '推荐'}}
{{item.floor}}#
{{item.user_info.title}}
附件

{{itemf.name}}

{{item.created_at}}  {{item.ip_address}}
{{item.like_count}}
{{item.showReply ? '取消回复' : '回复'}}
删除
回复
回复

{{itemc.user_info.nickname}}

{{itemc.user_name}}

作者 管理员 企业

回复 {{itemc.comment_user_info.nickname}}

附件

{{itemf.name}}

{{itemc.created_at}}   {{itemc.ip_address}}
{{itemc.like_count}}
{{itemc.showReply ? '取消回复' : '回复'}}
删除
回复
回复
查看更多
回复
回复
495
{{like_count}}
{{collect_count}}
添加回复 ({{post_count}})
CRMEB-慕白寒窗雪 作者
社区运营专员---高冷のBoy | 呆萌のGirl

回答

1102

发布

1750

经验

39820

快速安全登录

使用微信扫码登录
{{item.label}} {{item.label}} {{item.label}} 板块推荐 常见问题 产品动态 精选推荐 首页头条 首页动态 首页推荐
加精
取 消 确 定
回复
回复
问题:
问题自动获取的帖子内容,不准确时需要手动修改. [获取答案]
答案:
提交
bug 需求 取 消 确 定

快速安全登录

使用微信扫码登录

手机登录

{{codeText}}
{{isQrcode ? '手机登录' : '扫码登录'}}
CRMEB客服

CRMEB咨询热线 咨询热线

400-8888-794

微信扫码咨询

CRMEB开源商城下载 开源下载 CRMEB官方论坛 帮助文档
返回顶部 返回顶部
CRMEB客服