今天尝试在iframe中嵌入外部网站, 碰到了一些小问题.

如何让自己的网站不被其他网站的iframe引用?

我测试的时候发现我把iframe的src指定到github不起作用. 原来是它把X-Frame-Options设置为了DENY, 这样就禁用了别的网站的iframe引用, 避免点击劫持(clickjacking).

X-Frame-Options有三个可能值: DENY, SAMEORIGIN, ALLOW-FROM uri.

详见: The X-Frame-Options response header

如何禁用自己iframe中链接的外部网站的JS?

我发现我把一个外部网站引入到我的iframe中时, 该网站的恶心JS会让我的网页跳转到它的网站! 蛋疼. 但是我在测试的是否发现, Codepen就能够避免这个跳转, Console中有信息:

Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://codepen.io/lzl124631x/pen/jWeOPL' from frame with URL 'http://keepvid.com/?url=https://www.youtube.com/watch?v=wY2vhSb3cVo'. The frame attempting navigation of the top-level window is sandboxed, but the 'allow-top-navigation' flag is not set.

(anonymous function) @ ?url=https://www.youtube.com/watch?v=wY2vhSb3cVo:108

?url=https://www.youtube.com/watch?v=wY2vhSb3cVo:579 GET http://www.5kplayer.com/kvads/keepvid-728-90.png net::ERR_BLOCKED_BY_CLIENT

原来是iframe的属性sandbox的作用.

sandbox属性可以设置的值包括:

allow-forms

allow-modals

allow-orientation-lock

allow-pointer-lock

allow-popups

allow-popups-to-escape-sandbox

allow-same-origin

allow-scripts

allow-top-navigation

如果给iframe加上sandbox="allow-forms allow-scripts", 就会打开allow-forms和allow-scripts两个选项, 其他的全部禁用.

如果想禁用让外部网站的JS, 不要加allow-scripts就好了.

如果想禁用外部网站的JS跳转, 不要加allow-top-navigation就可以了.

详见: <iframe> Sandbox

iframe的安全问题的更多相关文章

  1. Web前端之iframe详解

    iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm" ...

  2. iframe标签

    转载文章:Web前端之iframe详解 iframe基本内涵 通常我们使用iframe直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_ifram ...

  3. Web前端安全之iframe

    防嵌套网页 比如,最出名的clickhacking就是使用iframe来 拦截click事件.因为iframe享有着click的最优先权,当有人在伪造的主页中进行点击的话,如果点在iframe上,则会 ...

  4. Web前端之【 iframe 】

    iframe基本用法 1.最基本的用法 iframe 标签指定 src <iframe src="demo_iframe_sandbox.htm"></ifram ...

  5. iframe,我们来谈一谈

      某大咖说: "iframe是能耗最高的一个元素,请尽量减少使用"某大牛说: "iframe安全性太差,请尽量减少使用"...wtf, 你们知不知道你们这样浇 ...

  6. 两个本地(localhost)html文件之间的传值

    什么是iframe? iframe 元素会创建包含另外一个文档的内联框架(即行内框架).可以理解为把iframe解释成“浏览器中的浏览器“ 在IE中: document.frames[i].docum ...

  7. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  8. 利用 iframe解决ajax的跨域问题

    问题 1. form提交或a标签跳转方式提交不会引发跨域问题. 2. ajax出于安全问题就有了跨域问题,因为一次请求中既访问了外部域最后返回了自己的域. 3. 用iframe其实就是想仿照ajax的 ...

  9. 如何根据iframe内嵌页面调整iframe高宽续篇

    接着昨天的工作 如何根据iframe内嵌页面调整iframe高宽 来说,按照文章中说的第二种方法实现代码如下: 实现 A.com/detail/view 页面的iframe代码如下: <ifra ...

随机推荐

  1. c#面向对象编程基础

    1.  为什么要有面向对象? (1)       增加代码重用. (2)降低维护负担,将具备独特性质的代码封装起来,修改程序时,相互不会影响. 2.数据封装用来解决全局变量不易维护的问题. 3.多态: ...

  2. Eclipes中使用BASE64Encoder及BASE64Decoder报错

    也没有提示让导包,这是因为Base64的加密解密都是使用sun.misc包下的BASE64Encoder及BASE64Decoder的sun.misc.BASE64Encoder/BASE64Deco ...

  3. 启动 XPs 代理

    Xps代理:扩展了 1 : 运行sp_configure检查代理XPs 的 值. EXEC SP_CONFIGURE 'agent xps'查看run_value 值是否为0,如果为0:需要更改此设置 ...

  4. Struts1和Struts2的区别和对比（完整版）

    Struts2其实并不是一个陌生的Web框架,Struts2是以Webwork的设计思想为核心,吸收了Struts1的优点,因此,可以认为Struts2是Struts1和Webwork结合的产物. 简 ...

  5. ADB操作多台设备

    1.adb devices 查看所有连接设备. 2.adb -s <设备名> shell 指定device来执行adb shell. 3.adb -s <设备名> <指令 ...

  6. 网站部署后，ie不能显示本地的图片

    html:<div id="imgPreview"  style='width:144px; height:80px;'>                        ...

  7. JQuery的几种页面加载完执行三种方式

      jquery加载页面的方法(页面加载完成就执行) 1. $(function(){ $("#a").click(function(){ //adding your code h ...

  8. iOS 制作发布证书，发布到App Store

    ---恢复内容开始--- 1.登陆 iOS Dev Center 选择进入iOS Provisioning Portal. 2.在 iOS Provisioning Portal中,点击App IDs ...

  9. Swift 学习手记1,pod 的 类库使用

    问题: 在Swift中,我们无法使用像Objective-c 一样的 #import 例如 在头部输入 #import <ReactiveCocoa/ReactiveCocoa.h> 是不 ...

  10. 每天一条linux命令——crontab

    crontab命令被用来提交和管理用户的需要周期性执行的任务,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond进程每分钟会定期检查 ...