用js调用外部js报错，不能正常访问，X-Frame-Options

最新推荐文章于 2024-07-25 14:08:43 发布
最新推荐文章于 2024-07-25 14:08:43 发布
阅读量2.8k 收藏
点赞数
分类专栏： javascript html 文章标签： javascript html 浏览器安全设置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_15529837/article/details/89679663
版权

有关X-Frame-Options的介绍：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options

报错背景：写了一个html，用js打开目标网页
报错信息：chrome浏览器，refused to display ‘xxxthis is a url’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’;
ie11浏览器，此内容不能显示在一个框架中，为了帮助保护在此网站中输入的信息的安全，此内容的发布者不允许在框架中显示该信息;
firefox浏览器，load denied by X-Frame-Options: xxxurl does not permit cross-origin framing.
报错原因：浏览器安全设置里设置了X-Frame-Options响应头，而sameorigin是同源设置，使得网页不能跨域访问
修改方案：
查到的几种方案(我这里因为有登陆界面，所以需要先登陆目标网站，然后再刷新原html网页)
Google Chrome浏览器跨域设置
1.google chrome快捷方式 – 属性 --目标
在原内容后添加 --args --disable-web-security --user-data-dir --allow-file-access-from-files，然后从快捷方式打开谷歌浏览器
2.在iis的http响应标头，添加响应头
名称：Access-Control-Allow-Origin
值：*
IE11浏览器跨域设置
打开【Internet选项】–> 【安全】 -->【Internet】–>【自定义级别】–>【其他】
设置【跨域浏览窗口和框架】和【通过域访问数据源】为启用
如果站点为【本地intranet】，则选择对应选项，点击【自定义安全级别】，其他设置方法同上

微信公众号 - 超详细 H5 网页接入微信支付功能，开发网站微信支付最详细的教程示例代码（微信公众号前端支付 JS-SDK / JSAPI 微信H5授权登录支付，唤起微信支付）最新超级详细教程
王二红
03-11 7260
H5页面接入微信支付功能，前端网页端怎么做微信JSAPI支付，vue网站接入微信JSSDK支付，vueH5项目如何做使用微信支付，端h5调用微信支付jsapi方法，前端vue开发的H5网站怎么微信支付最详细的教程示例代码，vue怎么调取微信支付流程，将H5接入微信支付退款，vue网站怎么搞微信支付，H5前端开发网站在微信环境内H5调起微信支付，react项目h5如何调用微信支付的方法，nuxt.js项目vueH5集成微信JS支付，网站怎么做出H5微信公众号支付，请问vue.js这个框
Vue3 - 最新详解实现网站接入微信支付功能，调起微信支付页面或微信扫码支付效果详细教程，手机移动端H5或电脑PC网页 “微信环境内支付“与“脱离微信环境外部浏览器支付“ 示例代码，支持微信公众号！
王二红
06-22 1万+
vue3，nuxt3，微信支付，vue微信支付，微信公众号，h5支付，jssdk，JSAPI，公众号网页支付，pc网站，微信支付二维码，生成支付二维码，扫码支付，扫码支付，uni-app，详解微信支付，支付回调报错，微信支付报错，无法支付，无法唤起支付窗口，vue3如何使用微信支付，脱离浏览器怎么用微信支付，redirect_uri参数错误，回调地址错误，h5生成微信支付二维码，H5微信支付，PC端微信支付，前端支付，拉起微信支付，pc扫码支付，新手小白详细教程示例，SDK，vue对接微信支付，拉不起来微信
X-Frame-Options
CNXBDSa的博客
08-06 698
X-frame-options响应头三种类型 （1）DENY：不能被嵌入到任何iframe或frame中。 （2）SAMEORIGIN：页面只能被本站页面嵌入到iframe或者frame中。 （3）ALLOW-FROM uri：只能被嵌入到指定域名的框架中。 如果不做限制，则删除X-frame-options响应头 X-Frame-Options: DENY 由于在iframe.html中 <!DOCTYPE html> <html> <head>
X-Frame-Options简介
顺其自然~专栏
09-13 4918
表示该页面可以在相同域名页面的 frame 中展示。在支持旧版浏览器时，页面可以在指定来源的 frame 中展示。，不光在别人的网站 frame 嵌入时会无法加载，在同域名页面中同样会无法加载。表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。表示该页面不允许在frame中展示，即便是在相同域名的页面中嵌套也不允许。这是一个被弃用的指令，不再适用于现代浏览器，请不要使用它。表示该页面可以在相同域名页面的frame中展示。，那么页面就可以在同域名页面的 frame 中嵌套。
安全头响应头(二)​X-Frame-Options​
wzj_110的博客
07-06 4726
Sources源形式。
X-FRAME-OPTIONS未配置
zhaofuqiangmycomm的博客
02-19 1191
其中第5种方式，通过tomcat控制最方便，不过实际配置过程中，版本过低的tomcat会启动不了，建议tomcat版本不要低于7.0.69 .DENY 表示该页面不允许在frame中展示，即便是在同域名页面中嵌套也不允许。ALLOW-FROM uri 表示该页面可以在指定来源的 frame 中展示。SAMEORIGIN 表示该页面可以在相同域名页面的 frame 中展示。每个jsp页面都要写这段，太无语，我只声明我知道这种方式，但绝不会用。(推荐)加了之后就不用管tomcat等容器的事，一劳永逸。
in a frame because it set ‘X-Frame-Options‘ to ‘deny‘ 问题解决
LeeTom208的博客
08-18 8333
in a frame because it set 'X-Frame-Options' to 'deny' 问题解决 我们先百度一下X-Frame-Options的中文文档 从上面我们可以看到既然该页面不允许在frame框架中展示，那我们就用新标签页的方式打开即可。这个有多种方法，前端修改，或者js来修改链接属性target="_blank"，我项目是采用后端服务器代码的修改。 ...
微信小程序云开发--实现微信小程序中访问外部h5网页
需要点灵感
09-15 3376
小程序中需要在一些位置添加广告，链接到外部的h5网页。 整体实现思路：定义一个广告组件，一个用来展示外部网页的page outUrl, 在组件中使用wx.navigateTo()等跳转到页面outUrl, outUrl.wxml页面中使用 <web-view src="{{url}}"></web-view>来实现跳转。 步骤一：自定义一个advertising组件 <!-- components/advertising/advertising.wxml 文件 //在数据
跨域问题
hhhh
05-02 566
跨域问题 MDN Web Docs 中定义跨域，当一个资源从与该资源本身所在的服务器不同的域或端口不同的域或不同的端口请求一个资源时，资源会发起一个跨域 HTTP 请求。 即访问了一个网站，然后在这个网站返回的资源里面，请求了B网站/端口的资源。 跨域这个情况只会出现在浏览器页面里，因为实际上是浏览器由于安全原因限制了这些请求的访问。 CSRF攻击，如果前端可以跨域，那: 用户访问A,生成cookie存储在本地，点击弹窗广告进入地址B,B网站可以在自己的页面中获取A的cookie,然后模拟用户登录 同源
微信公众号 - 最新详细实现H5网页接入微信支付功能，开发移动端、PC端网站集成使用微信支付流程及示例代码，公众号网页利用JS-SDK/JSAPI/H5支付授权唤起微信支付，可脱离微信环境支付或内置浏
王二红
07-25 4930
微信公众号，微信支付，网页，移动端，h5，扫码支付，二维码付款，手机网页，电脑pc网页生成支付二维码，js-sdk，jsapi，外部浏览器调起微信支付，脱离微信环境，在微信内置浏览器如何进行微信支付，前端H5微信支付，web网站，vue2，vue3，nuxt2，nuxt3，jquery，微信公众号h5支付流程，如何实现，怎么做，回调报错，redirect_uri参数错误，必须部署才能调试吗，怎么不打包发布就能在本机测试，微信H5支付能力，uniapp微信支付，h5页面调起支付，支付没反应，无效，失败，H5页
“IE已限制此网页运行可以访问计算机的脚本或”解决办法
10-18
IE已限制此网页运行可以访问计算机的脚本或
Load denied by X-Frame-Options: does not permit cross 解决办法
dns007
09-28 6149
因为最近项目需要开启iframe形式来加载页面， 遇到浏览器 报错 Load denied by X-Frame-Options:  ************* does not permit cross  X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在 , 标签（又称内联框架元素）表示了一个嵌套的浏览上下文(browsing contex
SharePoint 2013 Dialog 此内容不能显示在一个框架中
段传涛 的专栏
06-07 1万+
SharePoint 2013 Dialog 此内容不能显示在一个框架中 此处内容是引用了SP.UI.Dialog。 与Iframe 引起的内容处理方法完全不一致。用了一天的时间，也没有修改完成。后来发现如下修改可以搞定。 此内容不能显示在一个框架中 为了帮助保护在此网站中输入的信息的安全，此内容的发布者不允许在框架中显示
AppUI自动化中的图像识别的使用
测试开发探秘
11-30 3136
人工智能现在使用的越来越成熟了，如人脸识别，图像识别等，在AppUI自动化测试中，也有越来越多的框架或是公司引入图像识别技术来提高自动化测试的执行效率。图像识别，是指利用计算机对图像进行处理、分析和理解，以识别各种不同模式的目标和对象的技术，是应用深度学习算法的一种实践应用。现阶段图像识别技术一般分为人脸识别与商品识别，人脸识别主要运用在安全检查、身份核验与移动支付中；商品识别主要运用在商品流通过程中，特别是无人货架、智能零售柜等无人零售领域。 图像的传统识别流程分为四个步骤：图像采集→图像预处理→特..
html打开时头部出现“为了帮助保护您的安全，您的Web浏览器已经限制此文件显示可能访问你的计算机的”
Dive的博客
12-15 4811
在和标签中间加上<!-- saved from url=(0014)about:internet -->代码, 可以免去浏览器的头部警告，直接指定页面运行，不考虑安全性。
解决“设备管理设置中不允许在此台iPhone上。。。。”的问题
热门推荐
梁森的博客
03-04 1万+
xcode7真机调试出现这么个问题：应该装到手机上了，却打不开，因为我是用的个人账号，而且是没有经过开发者认证的账号 2 解决办法很简单：跟着下面的步骤执行 3 1、点击设置 4 2、点击“通用” 5 3、滚动手机屏幕到最下面，点击“描述文件”
iframe 此内容不能显示在一个框架中
weixin_43841308的博客
08-30 9453
原因：所引用的链接设置了X-Frame-Options，可查看链接打开后，Http请求的响应头： 什么是X-Frame-Options？ 是用来确认是否浏览器可以在frame或iframe标签中渲染一个页面，网站可以用这个头来保证他们的内容不会被嵌入到其它网站中，以来避免点击劫持。 为什么要设置X-Frame-Options 攻击者可以使用一个透明的、不可见的iframe，覆盖在目标网页上，然后诱使用户在该网页上进行操作，此时用户将在不知情的情况下点击透明的iframe页面。通过调整ifram..
springSecurity6.4.1配置X-Frame-Options
最新发布
12-28
### 配置 X-Frame-Options 头 为了在 Spring Security 6.4.1 中配置 `X-Frame-Options` HTTP 安全响应头，可以利用内置的安全配置方法。此头部用于指示浏览器是否应该允许在一个 `<frame>` 或 `<iframe>` 中加载页面，以此预防点击劫持攻击。 通过自定义安全配置类并重载其配置方法，可以在应用程序中设置该头部。具体来说，在扩展了 `WebSecurityConfigurerAdapter` 的配置类中的 `configure(HttpSecurity http)` 方法内实现这一功能[^1]： ```java @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.headers() .frameOptions().policy(FrameOptionsPolicy.DENY); // Other configurations... } } ``` 上述代码片段展示了如何拒绝任何框架加载当前网页的方式之一——即调用 `.frameOptions().policy(FrameOptionsPolicy.DENY)` 来阻止所有尝试嵌入页面的行为。除了 `DENY` 政策外，还可以选择其他两种政策：`SAMEORIGIN` 和 `ALLOW_FROM uri`（后者仅适用于某些旧版本）。对于大多数情况而言，推荐使用 `SAMEORIGIN` 策略以确保只有来自同一源的页面才能将本页作为 iframe 加载。 如果正在使用的不是继承自 `WebSecurityConfigurerAdapter` 的方式，则可以直接在 `@Bean` 注解的方法里创建 `SecurityFilterChain` 实现相同的效果: ```java @Bean public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http.headers() .frameOptions().sameOrigin(); // 使用 SAMEORIGIN 策略 // 其他配置... return http.build(); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值