iframe 报错Mixed Content: The page at ‘xxx‘. This request has been blocked； the content must be served

最新推荐文章于 2025-04-04 23:43:33 发布

碧海生波之弄潮儿

最新推荐文章于 2025-04-04 23:43:33 发布

阅读量1.3k

点赞数

分类专栏：常见问题随笔文章标签： html javascript 前端 chrome firefox

本文链接：https://blog.csdn.net/weixin_43624796/article/details/118422090

版权

随笔同时被 2 个专栏收录

3 篇文章

订阅专栏

常见问题

1 篇文章

订阅专栏

当HTTPS页面嵌套HTTP内容时，由于安全策略限制导致资源加载失败。解决方法是在主页面模板中设置自动将HTTP请求转换为HTTPS，从而确保所有资源都能正常加载。然而，这种方法可能存在一定的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题原因

当前页面通过iframe嵌套其他页面时，因为主页面为https协议，加载页面协议也是https，但是iframe嵌套的页面内部的资源请求使用了http导致资源无法正常加载；

解决办法

在主页面的html模板中加入

自动将http请求升级https请求后可结局该问题；

缺点

兼容性问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

碧海生波之弄潮儿

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

「已解决」iframe 本地生效但是在测试环境不生效问题

Constantiny的博客

08-12

1115

我有一个表格中一列是个详情，这个详情可被点击，点击后弹出抽屉，抽屉里是后端传给我详情字段的值对应的 url 的 iframe 展示。后端传的网址是以 http 开头，用 replace 方法把 http 换为 https，其他不变即可解决问题。问题是，在本地 localhost 下运行，ifame 运行正常，但是部署到测试环境就看不到 iframe！看起来像是 https 的问题。

This request has been blocked； the content must be served over HTTPS.

猿小白的博客

05-27

1517

Mixed Content: The page at 'xxxxxx' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://xxxxxx'. This request has been blocked; the content must be served over HTTPS. 解决办法：在HTML中的head标签中添加下面代码，即可解决此问题。 <meta http-e...

参与评论您还未登录，请先登录后发表或查看评论

解决浏览器报错Mixed Content

最新发布

qq_73797346的博客

04-04

852

前端代码中混合内容（Mixed Content）导致被浏览器拦截，通过nginx添加强制https响应头解决

This request has been blocked; the content must be served over HTTPS.

嘻嘻哈哈

05-30

5442

相对协议对于同时支持HTTPS和HTTP的资源，引用的时候要把引用资源的URL里的协议头去掉，浏览器会自动根据当前是HTTPS还是HTTP来给资源URL补上协议头的，可以达到无缝切换。iframe方式使用iframe的方式引入HTTP资源，然后将这个页面嵌入到HTTPS页面里就可以了。用meta升级HTTP请求在页面的head标签中加入 meta http-equiv=”Content-Secur...

Mixed Content混合内容错误 Iframe Http页面无法访问

rth362147773的博客

12-15

2万+

问题描述今天在做一个https站点的时候，需要用iframe打开一个http页面。但发现在手机上和chrome上就是无法打开，显示Mixed Content（混合内容）。因为https协议站点，读取的资源文件js css png,包括请求post和get，还有iframe的页面，都必须是https协议的。所以就会报出下面的错误，其实是浏览器为了HTTPS网站不会受到不安全的HTTP资源的攻击的出现错

【WEB前端】【报错解决】This request has been blocked; the content must be served over HTTPS....

萌狼蓝天の技术栈

11-24

7207

问题描述部署WEB项目后，开启了强制HTTPS，产生如下错误： Mixed Content: The page at 'https://ask.mllt.vip/index.php/data1.html' was loaded over HTTPS, but requested an insecure favicon 'http://ask.mllt.vip/imgs/profile.png'...

Mixed Content: xxx This request has been blocked; the content must be served over HTTPS.

Abracadabra__的博客

03-11

1578

问题：如何在HTTPS 网页中引入HTTP资源： Mixed Content？原因：HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。解决方案：<meta http-equiv="Content-Security-Policy" content="upgrade-insec...

谷歌浏览器：This request has been blocked； the content must be served over HTTPS.

飞越蓝天的专栏

09-10

6965

最近是做百度小程序的时候，使用百度api_debug工具调试接口的时，出现了下面的报错： xhr.js:172 Mixed Content: The page at 'https://open.baidu.com/static/newopen/api_debug/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://forge.speedtest.cn/api/v2/baidu/deal'.

nginx代理服务报Mixed Content: The page at ‘https://xxx.com‘ was loaded over HTTPS

Bertram的博客

04-18

9002

使用nginx代理后端服务时出现如下错误: Mixed Content: The page at ‘https://xxx.com’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://xxx.com’. This request has been blocked. the content must be served over HTTPS. 错误原因: nginx代理的https页面中加载的内容使用的http协议导致报

解决无网络或网络差和跨域报错：request:fail net::ERR_CONNECTION_RESET has been blocked by CORS policy: . . . . . .

weixin_44730534的博客

11-06

4910

uniapp的index.vue文件运行到小程序和Chrome遇到的报错：request:fail net::ERR_CONNECTION_RESET Uncaught (in promise) has been blocked by CORS policy: . . . . . . 这个代码写完，(运行了app端的nvue文件没有报错)，vue文件运行到谷歌浏览器和小程序端都报错：request:fail 关于解决方案： manifest.json添加: “networkTimeout”

遇到问题--jsp---Nginx转发https导致静态资源无法加载--This request has been blocked

直到世界的尽头

11-22

1万+

转发请注明出处:遇到问题–jsp—Nginx转发https导致静态资源无法加载–This request has been blocked 遇到问题使用nginx作转发，强制tomcat部署的web项目使用https访问。导致静态资源无法加载访问。如图浏览器报错如下: Mixed Content: The page at 'https://xxxx.com/' was loaded ov...

Mixed Content错误问题This request has been blocked； the content must be served over HTTPS.

easyboot的专栏

12-04

2106

调用nginx的时候发现出现下面的错误！是http和https的问题百度后知道在页面中加入 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta na...

错误:Mixed Content: The page at ‘https://XXX’ was loaded over HTTPS, but requested an insecure.

weixin_54197236的博客

08-29

3万+

浏览器Mixed Content问题

转载 Mixed Content Page

weixin_30603633的博客

04-17

295

网站配置了https之后，网页上的百度地图无法正常显示，报错类似于： Mixed Content: The page at 'https://url_1' was loaded over HTTPS, but requested an insecure script 'http://monitor_analytic.js'. This request has been blocked...

this request has been blocked;the content must be served over https

止于至善

07-19

2万+

1、错误： this request has been blocked;the content must be served over https 2、遇到错误的情况：在github page搭建自己写的页面时。搭建成功后，访问自己的页面返回的错误。我的页面阻止的是jQuery的官网引入的jQuery。 <script src="http://code.jquery.com/jqu...

网页访问报错This request has been blocked; the content must be served over HTTPS.

热门推荐

yan_dk的专栏

07-01

3万+

问题：网页有时访问https网站，由于网站中一些资源是http的，网页执行会报错“This request has been blocked; the content must be served over HTTPS.”，chrome浏览器审查元素可以看到。解决： <meta http-equiv="Content-Security-Policy" content="upgrade...

网页访问报错This request has been blocked; the content must be served over HTTPS.

shenxiaomo1688的博客

04-10

2万+

最近搭建服务器，在阿里云上申请了免费Symantec SSL证书(赛门铁克)。安装好证书之后，访问项目时项目样式布局和各项功能均不正常，用谷歌浏览器F12查看时，发现报This request has been blocked; the content must be served over HTTPS.错误，全是CSS和JS文件被拦截了。真是纳闷了。之前我的SSL证书是用letsencrypt+...

flutter webview报错This request has been blocked; the content must be served over HTTPS.

12-05

在Flutter中使用WebView时，如果遇到错误"This request has been blocked; the content must be served over HTTPS"，这是因为现代浏览器和WebView都默认启用了安全策略，要求所有的请求必须通过HTTPS协议进行，而不是不安全的HTTP协议。要解决这个问题，可以尝试以下几种方法： 1. **使用HTTPS**：确保你请求的资源是通过HTTPS协议提供的。将所有的资源链接从HTTP改为HTTPS。 2. **允许不安全的请求**：如果你无法使用HTTPS，可以在WebView的配置中设置允许不安全的请求。不过，这种方法不推荐在生产环境中使用，因为它会降低应用的安全性。 ```dart WebView( initialUrl: 'http://example.com', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController webViewController) { // 允许不安全的请求 webViewController.loadUrl('javascript:(function() {document.cookie = "cross-site-cookie=whatever; SameSite=None; Secure";})();'); }, ) ``` 3. **使用混合内容**：如果你使用的是混合内容（即在HTTPS页面中加载HTTP资源），可以通过配置WebView来允许混合内容。 ```dart import 'dart:io'; WebView( initialUrl: 'https://example.com', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController webViewController) { if (Platform.isAndroid) { webViewController.loadUrl('javascript:(function() {document.cookie = "cross-site-cookie=whatever; SameSite=None; Secure";})();'); } }, gestureNavigationEnabled: true, ) ``` 4. **检查请求的URL**：确保你请求的URL是正确的，没有拼写错误或其他问题。通过以上方法，你应该能够解决WebView中出现的"This request has been blocked; the content must be served over HTTPS"错误。