今天尝试在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. EF中使用数据库的标量值函数

    参考资料:https://msdn.microsoft.com/zh-cn/library/dd456847(v=vs.110).aspx http://stackoverflow.com/quest ...

  2. Mysql 的一些异常解决

    一.关于大文件存储 1.利用mysql存储大文件时,异常截图 在配置文件中加上如下一行 2.改完后重启mysql,但是又报如下错误: 解决方案: 我的mysql 是5.6版本,查到网上说要修改配置文件 ...

  3. MVC小系列（九）【引入namespace】

    以前在页面引入一个namespace,可以这样: <%@ Import Namespace="Web.Helpers" %> 如果空间是所有页面都需要的,可以写进配置文 ...

  4. Ajax返回数据类型

    MVC中,如果从controller返回的不是一个html,而是一个文本,使用AJAX中如何获取? 后台代码: public ActionResult UploadPicture() { return ...

  5. HTTP协议认识

    一.HTTP协议概念 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议 HTTP是一个应用层协议,由请求和响应 ...

  6. jeesite 一对多，对子表单独修改时出现 HV000030: No validator could be found for type:

    这是由于springmvc校验功能造成的,解决办法参见我的百度回答 http://zhidao.baidu.com/question/2141673418419314468

  7. 引用传递&值传递

    下面的程序阐述了值传递与应用传递的区别. package com.liaojianya.chapter1; /** * This program demonstrates the use of arr ...

  8. IDC机房动力环境设备维护

    高低压配电                                              空调                                               ...

  9. Python问题记录：如何处理中文网页中的多余空格

    在制作Epub电子书的时候,因为有从网络上下载的格式比较混乱的电子书,现在打算自己用Pythonc处理一下. 1.如何删除掉网页(html)中的多余空额.尤其是包含在tag(标签:span.p)当中的 ...

  10. Codevs 1800 假面舞会 2008年NOI全国竞赛

    1800 假面舞会 2008年NOI全国竞赛 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 一年一度的假面舞会又开始了,栋栋也 ...