跨域问题（iframe）记录

最新推荐文章于 2024-08-15 17:48:17 发布
最新推荐文章于 2024-08-15 17:48:17 发布
阅读量2.4w 收藏 1
点赞数
分类专栏： web 前段杂 文章标签： 跨域 iframe csp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xixi880928/article/details/79876381
版权
在本地开发环境中，使用iframe嵌入jupyter页面时遇到Content Security Policy（CSP）错误，禁止了frame-ancestors。通过修改jupyter启动参数，设置合适的Content-Security-Policy头，允许特定源进行内联显示，成功解决了跨域问题。
摘要由CSDN通过智能技术生成

an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’

场景描述：
iframe内嵌jupyter页面；
本地安装jupyter,命令行jupyter notebook开启，在本地开发环境下的页面内嵌入iframe

<div id="left">
    <button class="button-test" >测试</button>
</div>
<div id="right">
    <
最低0.47元/天 解锁文章
haliofwu
关注
专栏目录
uni-app - Refused to display ‘xxx‘ in a frame because an ancestor violates the following Content Sec
王佳斌
07-19 4002
uni-app - Refused to display ‘xxx‘ in a frame because an ancestor violates the following Content Sec
iframe嵌入页面跨域通信
m0_51431448的博客
09-07 6270
在项目中可能会通过iframe直接将另一个页面嵌入进来，某些场景下还可能会进行一些消息的传递通信。之前做过一次，就是我们开发的主系统，然后下面还有很多子系统，子系统都是通过iframe嵌入进来的，然后为了实现某些需求，需要将token传递给子系统，拱子系统使用，但是当时一直忙着开发，忘记记录了，所以这篇算是补上吧嵌入进来的页面的window跟我们现在的window已经不是同一个了，更不是同一个document。
Nginx反向代理解决iframe跨域问题
banketan1026的博客
04-28 3186
前言 　这几天有个需求：做个表单页面，要求后台人员能自定义发布表单，用户来填写表单。我一想，这不麦克表单有现成的吗，拿来就用！发布表单后，可以选择使用iframe方式嵌入网站，一切顺利。 　当时的网站是http协议，后来升级了https，发现完全加载不出来。原因是浏览器的安全限制，在https协议下不允许有http的iframe请求。然而，除了交钱，...
an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘none‘”.
sqlora的专栏
09-01 2万+
一.从 iframe 说起 利用iframe能够嵌入第三方页面，例如： <iframe style="width: 800px; height: 600px;" src="https://www.baidu.com"/> 然而，并非所有第三方页面都能够通过iframe嵌入： <iframe style="width: 800px; height: 600px;" src="https://github.com/join"/> Github 登录页并没有像百度首页一样
img 标签引入验证码时报错：Refused to losd the image ‘＜URL＞‘ beceuse it violates the following content security
最新发布
虎康的博客
08-15 589
这个错误提示说明你尝试加载的图片因为内容安全策略（CSP）被阻止了。CSP 设置为只允许来自同一源（‘self’）的资源，而因为 img-src 没有明确设置，所以使用了 default-src 作为备选策略，导致图片被阻止。（拒绝加载图像“ ”，因为它违反了以下内容安全规定：“ default-src *”。请注意，未明确设置“ img-src”。设置 " img-src ‘self’ data: base64;要解决这个问题，你需要调整 CSP 设置以允许来自特定来源的图片。
解决iframe嵌套第三方网址不能访问
Davi的博客
05-11 2万+
X-Frame-Options 是一个 HTTP 响应头部，用于防止网站被嵌入到其他网站的 iframe 中。该协议定义了一些选项，使网站可以控制在哪些网站中可以嵌入自己的内容，从而防止网站被点击劫持攻击。如果网站设置了 X-Frame-Options 响应头部，浏览器会根据该选项来决定是否允许在 iframe 中显示该网站的内容。并隐藏来自该网站的两个响应头：“Content-Security-Policy” 和 “X-Frame-Options”。2.SAMEORIGIN：只允许同源网站嵌入。
nginx 的安全策略问题
zhangiser的专栏
05-09 3279
不允许被嵌入，包括, , , 和 在nginx的 nginx.conf 的http 下面 加入安安全策略。这里主要是 frame-ancestors的参数需要调整。# 只允许被白名单内的页面嵌入。# 只允许被同源的页面嵌入。
内容安全策略（content-security-policy）
我的LOG
12-31 3万+
iframe 在使用iframe 的时候 <iframe style="border:0;width:100%;height:100%" src="https://github.com/join"/> 经查 报的是 Refused to frame ‘https://github.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘non
javascript iframe跨域详解
10-21
因此，JavaScript在处理来自不同源的iframe时，会遇到跨域问题。 在提到的跨域问题中，我们首先关注的是Ajax的跨域问题。由于Ajax主要通过XMLHttpRequest对象进行数据交互，而浏览器出于安全考虑，禁止了这种跨域...
网络修养-内联框架iframe巧妙跨域
李dayday
10-29 298
iframe 常用属性 1.frameborder:是否显示边框，1(yes),0(no) 2.height:框架作为一个普通元素的高度，建议在使用css设置。 3.width:框架作为一个普通元素的宽度，建议使用css设置。 4.name:框架的名称，window.frames[name]时专用的属性。 5.scrolling:框架的是否滚动。yes,no,auto。 6.src：内...
JIRA出现Refused to display 'URL' in a frame because an ancestor violates the following Co错误
曲行客的专栏
10-10 6078
今天在Linux服务器配置安装好JIRA后，通过服务器IP地址加端口可以访问成功。 之后领导要求将服务器IP绑定到公司一个二级域名下。通过访问这个二级域名可以直接访问JIRA。 最开始的想法是修改JIRA访问端口，改为80端口，这样就可以直接访问。但80端口被占用了。之后选择将80端口流量转发给设定的8080端口，但是这样会导致服务器上其他软件访问80端口时肯定报错。 最后想到了通过配置域名解析隐...
iframe标签嵌入Jupyter 跨域问题
mxh的博客
02-13 5277
在window系统中，我想使用iframe嵌入jupyter，会报错： an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’ 修改jupyter的配置文件upyter_notebook_config.py，再文件的最后添加一行代码： c.Notebook...
frame-ancestors 'self'
吕小仙的欧巴的博客
12-30 7857
做iframe的时候渲染突然给我报了个错 in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors ‘self’ 赶紧去百度一下什么是Content Security Policy CSP ---- 内容安全策略 意思是限制iframe只能访问...
前端实现绕过源服务器限制嵌入iframe并解决图片防盗链
qq_44910894的博客
08-03 1737
在使用iframe时出现Refused to frame xxxxxxxx because an ancestor violates the following Contentt Security Policy directive: "frame-ancestors" self的解决方法和图片防盗链的绕过方法
【web】内容安全策略CSP（Content-Security-Policy）
m0_45406092的博客
02-26 3519
文章目录1. 前言2. CSP作用2.1 什么是资源2.2 资源列表3. csp语法3.1 完整示例3.1.1 复现iframe同源限制3.2 语法深入解析3.1 default-src 1. 前言 内容安全策略（CSP），其核心思想十分简单：网站通过发送一个 CSP 头部，来告诉浏览器什么是被授权执行的与什么是需要被禁止的。其被誉为专门为解决XSS攻击而生的神器。 xss是跨域脚本攻击的缩写，详细可以参见《XSS跨域脚本攻击》，举例来说，可以在页面被注入非法的js脚本，然后产生不安全的后果。 内容安全
关于'It violates the following Content Security Policy directive: ‘iframe-src'’
热门推荐
fengdetiankong的专栏
03-18 4万+
提笔写这个文章有些担心，因为毕竟技术不够好，英语不够好，好，废话少说，开始说。 最近在做一个产品的维护，SpeedyPassword，一款密码管理器。 SpeedyPassword介绍： SpeedyPasswor是一款可以记录各个网站密码的浏览器插件，跨浏览器使用。 它自己有一个主密码。假如我在chrome浏览器上安装了SpeedyPassword，但是没有登录SpeedyPassword
Refused to load the script because it violates the following Content Security Policy directive: "scr
无知人生，记录点滴
05-24 1万+
Refused to load the script because it violates the following Content Security Policy directive: "script-src 'self'最近在使用Chrome 54 版本编辑微信订阅号素材的时候，发现很多图片之类 的资源显示不出来，新浪微博个人中心主页也是完全没有样式了，根本没办法用了，搜索了一下Conte...
rrweb如何记录iframe中的内容
04-05
rrweb可以记录iframe中的内容，但需要注意以下事项： 1. 需要在父窗口中加载rrweb的脚本，并在iframe中加载rrweb的脚本。 2. 在记录iframe内容时，需要使用iframe的contentWindow属性获取iframe中的窗口对象，并将其作为参数传递给rrweb的record方法。 3. 如果iframe中的内容是跨域的，则需要使用postMessage等跨域通信方式将记录的数据传递给父窗口，并在父窗口中进行处理。 示例代码： 在父窗口中： ```javascript const iframe = document.querySelector('iframe'); const iframeWindow = iframe.contentWindow; const rrweb = new RRWeb(); rrweb.record({ emit(event) { iframeWindow.postMessage(event, '*'); } }); ``` 在iframe中： ```javascript const rrweb = new RRWeb(); window.addEventListener('message', (event) => { rrweb.replay(event.data); }); ```
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值