How to block pop-up coming from iframe?

Asked
Active3 hr before
Viewed126 times

6 Answers

comingblock
90%

How to disable pop-ups coming from the iframe on exit?, Meta Stack Overflow , Stack Overflow help chat ,Use a modern browser - they all come with decent pop-up blocking capabilities

Replace your standard IFRAME HTML with this:

    <IFRAME SRC="http://www.yourdomainhere.com/framefilter.php?furl=http://www.domainname.com" WIDTH=1000 HEIGHT=500>
       If you can see this, your browser doesn't
       understand IFRAMES. However, we'll still
       <A HREF="http://www.domainname.com">link</A>
       you to the page.
    </IFRAME>

Framefilter.php

        <?php

//Get the raw html.
$furl=trim($_GET["furl"]);
$raw = file_get_contents($furl);

$mydomain="http://www.yourdomainhere.com/";

//Kill anoying popups.
$raw=str_replace("alert(","isNull(",$raw);
$raw=str_replace("window.open","isNull",$raw);
$raw=str_replace("prompt(","isNull(",$raw);
$raw=str_replace("Confirm: (","isNull(",$raw);

//Modify the javascript links so they go though a filter.
$raw=str_replace("script type=\"text/javascript\" src=\"","script type=\"text/javascript\" src=\"".$mydomain."javascriptfilter.php?jurl=",$raw);
$raw=str_replace("script src=","script src=".$mydomain."javascriptfilter.php?jurl=",$raw);

//Or kill js files
//$raw=str_replace(".js",".off",$raw);

//Put in a base domain tag so images, flash and css are certain to work.
$replacethis="<head>";
$replacestring="<head><base href='".$furl."/'>";
$raw=str_replace($replacethis,$replacestring,$raw);

//Echo the website html to the iframe.
echo $raw;

?>

javascriptfilter.php

< ? php

//Get the raw html.
$jurl = trim($_GET["jurl"]);
$raw = file_get_contents($jurl);

//Note, if trickyness like decode detected then display empty.
if (!preg_match("decode(", $raw)) {

   //Kill anoying popups.
   $raw = str_replace("alert(", "isNull(", $raw);
   $raw = str_replace("window.open", "isNull", $raw);
   $raw = str_replace("prompt(", "isNull(", $raw);
   $raw = str_replace("Confirm: (", "isNull(", $raw);

   //Echo the website html to the iframe.
   echo $raw;

}

?
>
load more v
88%

I spotted the perfect solution, at least for me to keep the ads for support, but prevent the pop-ups. And the solution is iframes.,Iframe has the attribute sandbox, which applies extra restrictions to the embedded web page. In our case we need to block pop-ups, but to accept scripts and everything else the page requires. After tweaking the settings, I ended with these:,In the sandbox attribute as value I allow the page to submit forms, to run scripts, to run same origin scripts and to navigate the top-level browsing context. You can check all other values on the MDN.,Create a simple sticky header only with functional components and React Hooks with no npm packages or other complicated functionality.

<iframe sandbox="allow-forms allow-scripts allow-same-origin allow-top-navigation" src="https://webpage.com/" allowfullscreen />
load more v
72%

In order to mitigate the risks associated with ads when using sandboxed iframes, developers can now add "allow-popups-to-escape-sandbox" to the frame "attribute". This allows the sandboxed document to spawn new windows without forcing the sandboxing flags upon them, hence creating a clean browsing context. For instance, a third-party advertisement could be safely sandboxed without forcing the same restrictions upon a landing page.,Popup windows can be spawned with window.open() and links.

<!-- No sandbox there... Popup window won't be sandboxed as well -->
<iframe id="red" src="iframe.html"></iframe>

<!-- This sandboxed frame will allow sandboxed popup window to open popups
     but not to execute JavaScript for instance. -->
<iframe id="green" src="iframe.html" sandbox="allow-popups"></iframe>

<!-- This sandboxed frame will create a clean non sandboxed popup window,
     allowed to execute JavaScript and open popups. -->
<iframe id="blue" src="iframe.html" sandbox="allow-popups allow-popups-to-escape-sandbox"></iframe>
65%

Sandbox attribute has following values: ,You can add sandbox attribute in your iframe. Only the values you add to the attribute will be allowed. Any value you do not add in the sandbox attribute will not be allowed by browser.,You can find more about sandbox attribute here. Please note that this attribute is new in HTML5.,I have modified your code to include sandbox option, but have NOT added allow-popups, so popups will not be allowed in this iframe.

.iframe {
   width: 100 % ;
   float: left;
   margin - top: 5 px;
}
<div class="iframe">
   <iframe width="1000" height="600" src="https://www.youtube.com/embed/Sb_60g3u1LU" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
load more v
75%

When the sandbox attribute is present, and it will:,The sandbox attribute enables an extra set of restrictions for the content in the iframe.,The value of the sandbox attribute can either be empty (then all restrictions are applied), or a space-separated list of pre-defined values that will REMOVE the particular restrictions.,An <iframe> sandbox allowing scripts:

Definition and Usage

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

sandbox
load more v
40%

You may need to embed an iframe into a popup to use a 3rd party widget. Here, we'll walk through a few real-world examples of working with iframes: videos and maps.,Here is an example of a 3rd party video player embedded in a popup:,Note that the video will still be playing in the iframe when the popup is closed. If available you can use the 3rd party API to stop the video on the popupafterclose event. Another way is to create the iframe when the popup is opened and destroy it when the popup is closed, but this would drop support for browsers that have JavaScript disabled., 3rd party API demos click to expand contents Backbone RequireJS Google Maps geolocation Google Maps list toggle

map.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Map</title>
    <script>
        function initialize() {
            var myLatlng = new google.maps.LatLng( 51.520838, -0.140261 );
            var myOptions = {
                zoom: 15,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions );
        }
    </script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <style>
        html {
            height: 100%;
            overflow: hidden;
        }
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #map_canvas {
            height: 100%;
        }
    </style>
</head>
<body onload="initialize()">

    <div id="map_canvas"></div>

</body>
</html>

Other "coming-block" queries related to "How to block pop-up coming from iframe?"