今天尝试在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