Cross-Domain Iframe Drag Drop

Question

I know there is an easy solution to this problem but believe me I can't find it right now. Anyhow, my problem is that I have to drag an image from an Iframe (the contents come from another Domain) and drop into an image placeholder. The demo is here at

http://popupbuilder.webege.com/IframeDragDropadil/

The Image should be dragged to the box and it sits there nicely, only when the Iframe loads content from the same domain. If however, I load content from another domain like I did in the demo (^ Link has been provided above), the whole thing does not work.

Now I know that this is a cross domain issue. You can't just manipulate data that comes from another domain into your iframe. Fair enough!!

So I came across another idea, that is replicate the whole page to your server, via PHP and then serve it to the iframe. That sounds promising but php function

<?php file_get_contents(); ?>

only returns the html not the complete webpage. Again this will kill the whole concept of usability as the user won't know what to drag.

One last thing, if I drag and drop image from another browser window to this placeholder, it works! I don't know what problem iframe has been causing and how to resolve this.

Replicating the whole website on local server using PHP can be a solution but I can't see how!

Answer 1

Well after days of hard work I have come up with a solution that can actually help us bind events to the elements of Iframe even when we are opening another website (site that belongs to another domain). The best bet here is to proxy the complete website onto our own server and the opening it in the Iframe. Now we can easily bind events and manipulate this website.

Please Note that this technique is only 70-80% accurate. The PHP Script that I have created may not always open the site properly. And sometimes AJAX calls made by the proxy'ed site are not completed. But the script does provide a good starting point and other developers are welcome to extend it :)

   <?php

$opts = array('http' =>
    array(
        'method'  => 'GET',
        //'user_agent '  => "Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.2) Gecko/20100301 Ubuntu/9.10 (karmic) Firefox/3.6",
        'header' => array(
            'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*\/*;q=0.8
'
        ), 
    )
);

     function is_url_exist($url){
            $ch = curl_init($url);
            $status = false;
            curl_setopt ($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6");
            curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 120);
            curl_setopt($ch, CURLOPT_TIMEOUT, 120);
            curl_setopt($ch, CURLOPT_NOBODY, true);
            curl_exec($ch);
            $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);

            if($code == 200){
               $status = true;
            }else{
              $status = false;
            }
            curl_close($ch);
           return $status;
        }
    function get_web_page( $url )
    {
        $user_agent='Mozilla/5.0 (Windows NT 6.1; rv:8.0) Gecko/20100101 Firefox/8.0';

        $options = array(

            CURLOPT_CUSTOMREQUEST  =>"GET",        //set request type post or get
          //  CURLOPT_HTTPGET => true,
            CURLOPT_POST           =>false,        //set to GET
         //   CURLOPT_USERAGENT      => $user_agent, //set user agent
            CURLOPT_COOKIEFILE     =>"cookie.txt", //set cookie file
            CURLOPT_COOKIEJAR      =>"cookie.txt", //set cookie jar
            CURLOPT_RETURNTRANSFER => true,     // return web page
            //CURLOPT_HEADER         => true,    // don't return headers

            CURLOPT_FOLLOWLOCATION => true,     // follow redirects
            CURLOPT_ENCODING       => "",       // handle all encodings
            CURLOPT_AUTOREFERER    => true,     // set referer on redirect
            CURLOPT_CONNECTTIMEOUT => 120,      // timeout on connect
            CURLOPT_TIMEOUT        => 120,      // timeout on response
            CURLOPT_MAXREDIRS      => 10,       // stop after 10 redirects
        );

        $ch      = curl_init( $url );
        curl_setopt_array( $ch, $options );
        $content = curl_exec( $ch );
        $err     = curl_errno( $ch );
        $errmsg  = curl_error( $ch );
        $header  = curl_getinfo( $ch );
        curl_close( $ch );

        $header['errno']   = $err;
        $header['errmsg']  = $errmsg;
        $header['content'] = $content;
        return $content;
    }

     function GetDomainFromAddress($url){
       $parse = parse_url($url);
        $scheme = $parse['scheme'];
        $URL = $parse['host']; // prints 'domain.com'
        $URL = $scheme.'://'.$URL.'/';
        return $URL;
   }

    /*All functions end here*/

    $url=$_GET["url"];
//  $url="http://www.topshop.com/en/tsuk/product/new-in-this-week-2169932/new-in-this-week-493/blue-pleat-laceup-kilt-2441152?bi=1&ps=20";
    $input= get_web_page($url);

$domain = $url;
$doc = new DOMDocument;
   libxml_use_internal_errors(true);
   $doc->loadHTML($input);
    $tags = $doc->getElementsByTagName('img');

    if(count($tags) > 0)
    {
        foreach ($tags as $tag) {

           $src=$tag->getAttribute('src');

           if( !empty($src) )
           {
               if(strpos($src,"https")!==false||strpos($src,'//')!==false || strpos($src,"http")!==false)
               {                
               }
               else
               {
                    $src1 = null;
                    if(!is_url_exist($src))
                    {
                        $domain = GetDomainFromAddress($url);
                        $src1=$domain.$src;
                    }
                    $src=$src1;
               }
           }


           $tag->setAttribute('src', $src);

        }
    }

    $tags = $doc->getElementsByTagName('link');
    $i=0;
    if(count($tags) > 0)
    {
    foreach ($tags as $tag) {


           $src=$tag->getAttribute('href');

           if( !empty($src) )
           {
               if(strpos($src,"https")!==false||strpos($src,'//')!==false || strpos($src,"http")!==false)
               {                
               }
               else
               {
                    $src1 = null;
                    if(!is_url_exist($src))
                    { $domain = GetDomainFromAddress($url);
                        $src1=$domain.$src;
                    }
                    $src=$src1;
               }
           }

           $tag->setAttribute('href', $src);

        }
    }
        $tags = $doc->getElementsByTagName('script');

    if(count($tags) > 0)
    {
    foreach ($tags as $tag) {


           $src=$tag->getAttribute('src');

           if( !empty($src) )
           {
               if(strpos($src,"https")!==false||strpos($src,'//')!==false || strpos($src,"http")!==false)
               {                
               }
               else
               {
                    $src1 = null;
                    if(!is_url_exist($src))
                    { $domain = GetDomainFromAddress($url);
                        $src1=$domain.$src;
                    }
                    $src=$src1;
               }
           }

           $tag->setAttribute('src', $src);

        }
    }
echo $doc->saveHTML();
?>