如何防止 iframe 显示外部网站？

Question

Let's say I display an iFrame on iframe.domain.com. I want this iframe to be able to display content from iframe.domain.com or sub.domain.com. But those websites contain link to external websites, for example google.com. If the users clicks on a link redirecting him to google.com, I want the iFrame to be redirected to sub.domain.com

How can I do that?

Answer 1

You can use e.preventDefault() to achieve this to achieve this

now to get the onclick handler set on the links in your frame you can use this function

function onLoadIF(frame)
{
    var elements = frame.getElementsByTagName('a'),
        len = elements.length;

    while( len-- ) {
        $(elements[len]).on('click', function(e){
          e.preventDefault();
        }
    }
}

Answer 2

I want to expand what Arno_Geismar said.

You have other options:

1) HTML5!

<iframe sandbox="value">

The sandbox attribute will:

The sandbox attribute enables an extra set of restrictions for the content in the iframe.

When the sandbox attribute is present, and it will:

• treat the content as being from a unique origin
• block form submission
• block script execution
• disable APIs
• prevent links from targeting other browsing contexts
• prevent content from using plugins (through , , , or other)
• prevent the content to navigate its top-level browsing context
• block automatically triggered features (such as automatically playing a video or automatically focusing a form control)

The value of the sandbox attribute can either be just sandbox (then all restrictions are applied), or a space-separated list of pre-defined values that will REMOVE the particular restrictions.

more info here

2) Javascript: If you're using jquery you could simply put this

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

Which is basically (almost) the same solution Arno_Geismar gave to you. The difference here is that I didn't need to loop through all "a" elements, thus improving a little the perfomance

Answer 3

I was having this issue and the solution I settled on was this:

1. Put a Content-Security-Police meta tag in your <header> section:

    <meta http-equiv="Content-Security-Policy" content="frame-src https://desired_domain.com/">

   • security.stackexchange.com - How can I restrict my iframe to only use local content?
   • developer.mozilla.org - Content-Security-Policy: frame-src

2. Use the sandbox attribute in your <iframe> if you want to prevent links from opening a new tab:

    <iframe src="https://desired_url.com" sandbox="allow-same-origin allow-scripts"></iframe>

   • W3Schools.org - HTML <iframe> sandbox Attribute