because it set 'X-Frame-Options' to 'sameorigin'

报错 because it set 'X-Frame-Options' to 'sameorigin'.

bash 复制代码
Refused to display 'https://xxx.xxx.cn/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

解决方法:

修改页面,增加meta配置

html 复制代码
<head>
     <!-- CSP 设置 -->
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://yourdomain.com;">
     <!-- 其他头部信息 -->
   </head>

原理

在网页开发中,当你尝试在一个iframe标签内嵌入一个设置了X-Frame-Options响应头为sameorigin的页面时,浏览器会阻止该页面在不同源的iframe中加载。这是因为X-Frame-Options是用于防止点击劫持(clickjacking)攻击的安全策略,它告诉浏览器该页面只能在同源(即协议、域名和端口号都相同)的页面中以iframe的形式展示。

解决方式:

  1. 更改目标页面设置 :如果你对被嵌入的Java页面具有控制权,你可以考虑修改服务器端的响应头配置,移除或更改X-Frame-Options为允许跨域。例如,可以将其设置为ALLOW-FROM <指定源>,但请注意,这个选项在现代浏览器中已经不被推荐使用,并且不是所有浏览器都支持

    http 复制代码
    X-Frame-Options: ALLOW-FROM https://your-allowed-origin.com
  2. 使用其他安全策略 :若你依然需要保持一定的安全性,可以考虑采用更现代的Content Security Policy(CSP)中的frame-ancestors指令来替代X-Frame-Options,并指定允许嵌入的源。

    http 复制代码
    Content-Security-Policy: frame-ancestors 'self' https://your-allowed-origin.com;

修改HTTP头部或Meta标签

Content-Security-Policy (CSP) 是一种通过HTTP头部或Meta标签在网页中设置的安全策略,用于控制浏览器允许加载哪些资源。具体添加位置如下:

  1. HTTP Header: 在服务器端配置,将CSP规则添加到HTTP响应头中,例如在Apache、Nginx等Web服务器的配置文件里,或者在应用程序(如Node.js、PHP、Java Servlets等)中设置响应头。以下是一个在HTTP响应头中设置CSP的例子:

    http 复制代码
    Content-Security-Policy: default-src 'self'; script-src 'self' https://trustedscripts.com; style-src 'self' https://stylesheets.com; img-src 'self' data:; object-src 'none'; base-uri 'self';
  2. HTML Meta 标签: 当无法通过服务器端设置时,可以在HTML文档部分使用标签来定义CSP。注意,这种方式支持的功能可能不如HTTP头部方式全面,并且某些现代浏览器可能不再支持通过meta标签设置某些CSP指令。

    html 复制代码
    <head>
      <!-- CSP 设置 -->
      <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trustedscripts.com;">
      <!-- 其他头部信息 -->
    </head>

选择哪种方式取决于你的应用架构和部署环境,通常推荐优先考虑通过HTTP头部来设置CSP以获得最佳兼容性和安全性效果。

欢迎关注公-众-号【TaonyDaily】、留言、评论,一起学习。

Don't reinvent the wheel, library code is there to help.

文章来源:刘俊涛的博客


若有帮助到您,欢迎点赞、转发、支持,您的支持是对我坚持最好的肯定(^_^)

相关推荐
2601_962055973 小时前
跟据spring boot版本,查看对应的tomcat,并查看可支持的tomcat的版本范围
spring boot·后端·tomcat
Lost of 程序猿4 小时前
ASP.NET Core API 幂等性设计深度实战:从一次重复申领事故说起
后端·asp.net
QQ_21696290965 小时前
【源码编号:project79475】SpringBoot校内二手交易平台:商品发布、分类检索、留言交流、订单管理全流程实战
java·spring boot·后端
郑州光合科技余经理7 小时前
本地生活服务系统:模块边界与结算字段怎么拆
java·开发语言·前端·后端·系统架构·uni-app·php
IT_陈寒7 小时前
Vue的嵌套组件竟然吃掉了我的事件?
前端·人工智能·后端
大辉狼_音频架构8 小时前
进阶:从源码编译 SOF 固件与 topology
后端
大辉狼_音频架构8 小时前
上板:让 SOF 在 FRDM-i.MX8MP 上跑起来
后端
大辉狼_音频架构8 小时前
FRDM-IMX8MP UUU 烧录 eMMC 指南
后端
运行时异常9 小时前
【WMS 仓储系统集成 AI Agent 实战】第 3 讲:Spring Security 6 + JWT——addFilterBefore 一词之差,全站 401
java·后端
LinMINGJing0079 小时前
PageHeaderData:Page 的页面头
后端