如何防止iframe显示外部网站

How to prevent an iframe to display external websites?

本文关键字：外部 网站 显示 iframe 何防止      更新时间：2023-09-26

假设我在iframe.domain.com上显示一个iFrame。我希望这个iframe能够从iframe.domain.com或sub.domain.com显示内容。但这些网站包含外部网站的链接，例如google.com。如果用户点击链接将其重定向到google.com，我希望iFrame重定向到sub.domain.com

我该怎么做呢?

您可以使用e.preventDefault()来实现这一点要实现这个

现在要在框架的链接上设置onclick处理程序，可以使用这个函数

function onLoadIF(frame)
{
    var elements = frame.getElementsByTagName('a'),
        len = elements.length;
    while( len-- ) {
        $(elements[len]).on('click', function(e){
          e.preventDefault();
        }
    }
}

我想扩展一下Arno_Geismar的话。

你有其他选择:

1) HTML5 !

<iframe sandbox="value">

沙箱属性将:

sandbox属性为iframe中的内容启用了一组额外的限制。

当sandbox属性存在时，它将:

  • 将内容视为来自唯一来源
  • 块表单提交
  • 块脚本执行
    • <
  • 禁用api/gh>
  • 防止链接指向其他浏览上下文
  • 阻止内容使用插件(通过，，或其他)
  • 阻止内容导航到其顶层浏览上下文
  • 块自动触发功能(如自动播放视频或自动对焦窗体控件)

sandbox属性的值可以只是sandbox(然后应用所有限制)，或者是一个空格分隔的预定义值列表，将删除特定的限制。

更多信息在这里

2) Javascript:如果你使用jquery，你可以简单地把这个

$(document).ready(function(){       
    $('a').click(function(event) {
        event.preventDefault();
    });
});

这基本上(几乎)与Arno_Geismar给你的解决方案相同。这里的不同之处在于，我不需要循环遍历所有"a"元素，从而略微提高了性能

我遇到了这个问题，我确定的解决方案是:

  1. 在<header>部分设置Content-Security-Police meta标签:

    <meta http-equiv="Content-Security-Policy" content="frame-src https://desired_domain.com/">
      我如何限制我的iframe只使用本地内容?
    • developer.mozilla.org - Content-Security-Policy: frame-src

  2. 使用<iframe>的sandbox属性，如果你想阻止链接打开一个新的选项卡:

    <iframe src="https://desired_url.com" sandbox="allow-same-origin allow-scripts"></iframe>
    • W3Schools.org - HTML <沙箱属性
相关文章：