CODEWITHSUNDEEP
javascripthtmlcsshttpiframe
user7422244
user7422244

Reputation: 3

Embed iFrame to HTTPS from HTTP and embed only certain parts?

I want to embed a website via iFrame. But I have two problems:

  1. I have a HTTPS website and want to embed something from a HTTP website. So, how can I secure the connection? - Because otherwise my HTTPS website just doesn't display the iFrame if I load my website via HTTPS. Via HTTP it works. But I want a secured connection!

  2. I want to embed only certain parts of the website and not the completely website. Even much easier. I just want to embed the website starting at the table and till the end of the website. So, I just want to cut a little bit of the head of the website off. But here is my problem: I must cut it off and not use CSS and say display:none; because I want to make a perfect SEO website and I do not want to embed unimportant things!

Here is the website I want to embed and I want to embed everthing after the <iframe> tag:

<body bgcolor="#ECECEC" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" link="#CC0000" vlink="#666666" alink="#000000" )="" <center="">
    <iframe id="a8febc47" name="a8febc47" ...</iframe>
   ...
   ...
   ...
   ...
</body>

Would be very proud about help!

Upvotes: 0

Views: 2517

Answers (1)

Luca Kiebel
Luca Kiebel

Reputation: 10096

First off you cannot load any content over HTTP from a secured connection, every browser should and will block the request for that content. Otherwise a man-in-the-middle could replace the requested data by literally anything without you knowing and possibly execute malicious code.

In regards to only displaying a part of a website via iFrame, iFrames are made to act as if you opened the website in another window and resized it to your needs.

The only ways to only get a part of a website is either by having your webserver serve a file that is a clone of what you want to put in your iFrame, meaning that you use a server to cut the sections you don't want off, or you could use the jQuery function .load to only grab a part of your target:

var url = "https://example.com"; // any domain, as long as it uses HTTPS when you use it
var fragment= "div > p"; // any valid CSS-Selector

$("#target-div").load(url + " " + fragment);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Data from https://example.com. Not working due to CORS....</p>
<div id="target-div"></div>

As you see, this is not working, in this case it's the CORS header, but maybe the site you want data from has it's Access-Control-Allow-Origin header set to *...

With PHP available to you, you can use the DOMDocument Class to parse and manipulate some other website's HTML:

<?php

# Use the Curl extension to query your website and get back the full page
$url = "http://your-other-domain.com";
$tag = "table";
$ch = curl_init();
$timeout = 5;
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$html = curl_exec($ch);
curl_close($ch);

# Create a DOM parser object
$dom = new DOMDocument();

# Parse the HTML
# The @ before the method call suppresses any warnings that
# loadHTML might throw because of invalid HTML in the page.
@$dom->loadHTML($html);

# Iterate over all the <$tag> tags
foreach($dom->getElementsByTagName($tag) as $table) {
        echo $table;
}

You can modify this to take the $url and the $tag as GET parameters and make it more responsive. What this does right now is echo all Tables on your page, if you have only one, this should do the Job.

Upvotes: 1

Related Questions