Uncaught DOMException: Blocked a frame with origin "http://localhost:8000" from accessing a cross-origin frame.

简介: Uncaught DOMException: Blocked a frame with origin "http://localhost:8000" from accessing a cross-origin frame.

该错误提示是由于浏览器中的同源策略(Same-origin policy)导致的。同源策略指的是浏览器限制在脚本中加载的文档只能来自于相同的协议、主机和端口,即源相同的文档才能自由共享资源。

这意味着,当一个网站的源与其嵌入的 <iframe> 元素的源不同的时候,脚本是无法访问这个 <iframe> 中的文档对象的,浏览器将会抛出该错误提示。例如,从 http://localhost:8000 的源中加载的脚本尝试访问一个来自不同源的 <iframe> 元素,就会触发该错误提示。

为了避免这个错误的出现,可以考虑使用浏览器提供的跨域通信能力,如 window.postMessage() 等。这样,就可以在跨域情况下在窗口或帧之间安全地通信。例如:

// 父窗口 (http://localhost:8000)
const iframe = document.querySelector('iframe');

iframe.contentWindow.postMessage('hello', '*');

// 子窗口
window.addEventListener('message', event => {
   
  if (event.origin !== 'http://localhost:8000') {
   
    return;
  }

  console.log('Received message:', event.data);
});

上面的代码中,我们在父窗口中使用 postMessage() 方法向子窗口发送一条消息。在子窗口中,我们监听 message 事件,并通过检查来源来防止恶意脚本的操作。

相关文章
|
安全 前端开发
Refused to load the image 'http://localhost:9527/favicon.ico'
Refused to load the image 'http://localhost:9527/favicon.ico'
98 0
|
6月前
|
JavaScript
如何让Vue项目本地运行的时候,同时支持http://localhost和http://192.168.X.X访问?
如何让Vue项目本地运行的时候,同时支持http://localhost和http://192.168.X.X访问?
|
6月前
|
机器学习/深度学习 前端开发 JavaScript
源映射错误:Error: request failed with status 404 源 URL:http://localhost:8080/bootstrap/js/axios-0.18.0.js
源映射错误:Error: request failed with status 404 源 URL:http://localhost:8080/bootstrap/js/axios-0.18.0.js
141 0
源映射错误:Error: request failed with status 404 源 URL:http://localhost:8080/bootstrap/js/axios-0.18.0.js
|
Java Maven
IDEA 2021 整合 SSM 配置离线 Maven 3.8.1 报错大全 Since Maven 3.8.1 http repositories are blocked.
IDEA 2021 整合 SSM 配置离线 Maven 3.8.1 报错大全 Since Maven 3.8.1 http repositories are blocked.
6497 0
IDEA 2021 整合 SSM 配置离线 Maven 3.8.1 报错大全 Since Maven 3.8.1 http repositories are blocked.
|
1月前
|
安全 应用服务中间件 网络安全
修复HTTPS升级后出现 Mixed Content: The page at 'https://xxx' was loaded over HTTPS, but requested an insecure frame 'http://xxx'. This request has been blocked; the content must be served over HTTPS. 的问题
修复HTTPS升级后出现 Mixed Content: The page at 'https://xxx' was loaded over HTTPS, but requested an insecure frame 'http://xxx'. This request has been blocked; the content must be served over HTTPS. 的问题
|
JSON 前端开发 API
【跨域报错解决方案】Access to XMLHttpRequest at ‘http://xxx.com/xxx‘ from origin ‘null‘ has been blocked by
【跨域报错解决方案】Access to XMLHttpRequest at ‘http://xxx.com/xxx‘ from origin ‘null‘ has been blocked by
3441 0
|
3月前
|
JavaScript Java Spring
http://localhost:8282/user/findsomeuser[object%20Object]
这篇文章介绍了如何在Spring Boot应用中创建一个登录拦截器来检查用户登录状态,并在用户未登录时重定向到登录页面,同时展示了如何在控制器中处理特定请求并显示服务器时间,以及如何使用Thymeleaf在HTML页面中展示这个时间。
|
6月前
|
应用服务中间件 Android开发
Eclipse中启动tomcat后,无法访问localhost:8080(HTTP Status 404)
Eclipse中启动tomcat后,无法访问localhost:8080(HTTP Status 404)
179 0
|
Kubernetes Linux Docker
Kubernetes v1.22.1部署报错2: Get “http://localhost:10248/healthz“
Kubernetes v1.22.1部署报错2: Get “http://localhost:10248/healthz“
|
应用服务中间件 Linux 网络安全
【WEB】当HTTPS资源引入HTTP导致报错blocked:mixed-content (混合加载/Mixed Content)如何解决
【WEB】当HTTPS资源引入HTTP导致报错blocked:mixed-content (混合加载/Mixed Content)如何解决
【WEB】当HTTPS资源引入HTTP导致报错blocked:mixed-content (混合加载/Mixed Content)如何解决