今天尝试在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. js事件3

    一.loading——(用来加载位于网页中的文件,而非本地的) 例子: <!doctype html> <html lang="en"> <head& ...

  2. js 一个关于图片onload加载的事

    前几天一个项目让我头疼了很久,一个关于图片加载时的loading效果,因为不是太懂js,所以在网上各种找资料,但还是不理想,无赖苦心研究,终于有了一点眉目了,虽然个中还有一些道理不懂,至少目的达到了; ...

  3. [理解ASP.NET Core框架]一个五十行的控制台Web

    在阅读了Artech的ASP.NET Core管道深度剖析(2):创建一个“迷你版”的管道来模拟真实管道请求处理流程之后, 自己做了一个"迷你版"中的"迷你版" ...

  4. Android 自定义Gallery浏览图片

    之前写的<Android ImageSwitcher和Gallery的使用>一文中提到我在教室一下午为实现那个效果找各种资料.期间在网上找了一个个人觉得比较不错的效果,现在贴图上来: 其实 ...

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

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

  6. JamCam创业故事：辞掉工作，去开发一个应用

    编者按:这是JamCam创始人的自述.这家初创公司提供的应用很简单,但是极为成功:有了JamCam,你所录制的视频会自动添加你正在iPhone中聆听的音乐,作为视频的背景音乐.和朋友分享时是不是方便多 ...

  7. STL unique使用问题

    string strs[] = {"one","one","two","three","three" ...

  8. samba和squid 安装

    一. samba配置1. 什么是sambaSamba服务类似于windows上的共享功能,可以实现在Linux上共享文件,windows上访问,当然在Linux上也可以访问到.是一种在局域网上共享文件 ...

  9. CSS定位机制

    CSS中,存在3种定位机制:标准文档流(Normal flow) * 特点:从上到下,从左导游,输出文档内容 * 由块级元素和行级元素组成 浮动(Floats) * 能够实现横向多列布局 * 设置了浮 ...

  10. jquery解析XML(1)

    jquery解析XML文件 html代码 <!DOCTYPE html><html><head><title>解析XML</title>&l ...