I'm creating a website where users enter a URL and it's displayed in an iFrame, to be brief. I know a lot of websites have code to break out of iFrames (popular example, Google).
Is there any way to check, with JavaScript or PHP whether a given URL will break out of an iFrame?
As a side-note, I don't mind taking a website snapshot but I haven't found an existing adequate website and I can't seem to install wkhtmltoimage/pdf...but that's a different question.
So long as the iframe's URL is different to that of the parent (your website) the iframe's JavaScript cannot access anything in its parent.
For cross-domain iframe communication to work one might use HTML5's PostMessage (which has decent support as of right now) or passing params via the URL of the iframe.
Both of these methods require the parent (your website) to explicitly intercept the 'calls' from the iframe and do whatever...
All in all, for security reasons an iframe from an unknown source can't simply alter the parent site holding the iframe.
Related
I have a rotator link and I dont want to allow people to open it in iframe.
How to stop php process in iframe?
header("X-FRAME-OPTIONS: DENY");
does not work in firefox and chrome. my link is (EDITED)
Check the Access-control-allow-origin header.
It allows you to control which domain can access or frame your scripts.
You can choose between 3 values :
Only from the same domain
Only from a domain listed on a list you made
From anyone (wildcard)
Since PHP is never in an iframe but executed on the server side there is no way to reliably know if the request originated from an iframe on your site of not.
If your intention (which is not quite clear) is to make sure people don't put an iframe of your site on another site, then you can check for the referrer of the request etc. But most of it can be spoofed.
Update due to comment:
Then there is unfortunately no good standardized way of getting this type of information reliably. If you yourself had an iframe on your site and for some reason didn't want that to be able to call your script you could probably do this by adding some GET parameters via javascript or something. But since you have pretty good control over your own iframes this shouldn't be a problem.
But when it comes to determining of the request from the browser to your server originated in an iframe or not there is no information in the HTTP header to disclose this. The only thing you could possibly be informed about is if that iframe is from a page hosted on another domain.
But if you have an iframe on your own site, don't add any extra parameters to the request and access your script in it and then normally from the browser's main window the two requests will look the same on the server.
I'm not completely sure if I understand your question, but here's a list of things:
If you want to stop your page being loaded in an iframe, there's not easy way of doing that, if the browser is ignoring X-Frame-Options: DENY.
If you have a link the user can click that opens in the iframe, not the parent frame, you can use the base html tag, to specify to the browser to open any links you click in the parent frame, with <base target="_parent" />
If you want to redirect automatically, and that causes an issue when loaded in an iframe because you use headers to do it or something, you could probably use the base tag and some javascript to automate clicking on the link as an alternative
I realized that many of web app use # in their app's URL.
For example, Google Analytics.
This address is in the URL bar when I am viewing the visitor's language page:
https://www.google.com/analytics/web/?hl=en#report/visitors-language/a33185827w60383872p61754588/
This address is in the address bar when I am viewing the visitors' geolocation page:
https://www.google.com/analytics/web/?hl=en#report/visitors-geo/a33185827w60383872p61754588/
I think that this is the Google Analytics web app passing #report/visitors-language and #report/vistiors-geo.
I know that Google analytics is using an <iframe>. It seems that only the main content box is changing when displaying content.
Is # used because of the <iframe> functionality?
There are several answers but none cover the backend part.
Here is a URL, one from your own example:
www.google.com/analytics/web/?hl=en#report/visitors-language/a33185827w60383872p61754588/
You can think about the post-hash (including the hash #) part as a client-side request.
The web server will never know what was entered after the hash sign. It is the browser pointing to a specific ID on the page.
For basic web pages, if you have this HTML: <a name="main">welcome</a>
on a web page at www.example.com/welcome, going to www.example.com/welcome#main will scroll your browser viewport to the welcome text in the <a> HTML tag.
The web server will not know whether #main was in the URL or not.
Values in the URL after a question mark are called URL parameters, e.g. www.example.com/?foo=bar. The web server can deliver different content based on those values.
However, there is a technology developed by Google called AJAX (Asynchronous JavaScript and XML) that makes use of the # part in the URL to deliver different content without a page load. It's not using an <iframe>.
Using JavaScript, you can trigger a change in the URL's post-hash part and make a request to the server to get a specific part of the page, for example for the URL www.example.com/welcome#main2 Even if an element named #main2 does not exist, you can show one using JavaScript.
A hashbang is #!. It is used to make search engine indexing easier by indicating that this part is a dynamic web page.
This is the "hash" in the url.
Many browsers support hash change event in javascript.
as per my knowledge the hash change is the revolution in the ajax callbacks.
as such when the user interacts with the any link with a hash then on the hash change the event is fired and you can apply any thing with the javascript.
one more thing is that hash change is supported by the browser history.
see below URL
SEO and the use of !# in a url
or Read it
'#! is called a "hashbang" and they are the root of all that is evil in web development.'
Basically, weak web developers decided to use #anchor names as a kludgy hack to get "web 2.0" things to work on their page, then complained to google that their page rank suffered. Google made a work around to their kludge by enabling the hashbang.
Weak web developers took this work around as gospel. Don't use it. It is a crutch.
Web development that depends on hashbangs is web-development done wrong.
This article is far more well worded than I could ever be, and deals with the Gawker media fiasco from their migration to a (failed) hashbang centric website. It tells you WHAT is happening and why it's bad.
http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs
Correct me if I'm wrong, the hashtag in that URL would be used as an anchor to scroll the page to an element with an id. For example, I send you to the url http://example.com/sample#example, and the page would scroll (just display) at the element (I'm using a div as an arbitrary example, it could be anything).
Ajax and hash mark in the url mostly used for quick action.
If you have a part in your site that can be visible only by fire event (mostly click) - it would be hard to share it. With hash mark in the url you can (by javascript) make the browser think that you did the required action and it will display the relevant part.
Normally the '#' is using in url will find the particular id which is next to '#' in that particular page. By using this we can view the particular content at middle of the page also.
my question is about this website - http://www.bits-apogee.org/2011/
whenever you click on the link in the side navigation bar, the middle part of the website is dynamically loaded. Also, the url also changes, everything else remains unchanged. how is this done?
is this some query plugin?
I totally agree with #JMCCreative. It looks like it's an actual refresh. You should look at the following post on StackOverflow.
Modify the URL without reloading the page
The site is using Hashes (#) in the URL to denote the new content being loaded.
This is useful for people bookmarking dynamically loaded content (normally hashes load to specific areas on a page, named anchors or ID's for new browsers), because they don't trigger the page to refresh...
http://www.highrankings.com/urls-with-hashtags-307 there are drawback (SEO) concerns to this... however you will notice more and more sites doing it so i would assume the SEO robots will get better.
There are 2 possibilities:
You can use the HTML5 capabilities to change the url (history pushState), however this feature isn't available in all browsers yet. For more information, look at this SO post: Is there a way to change the browser's address bar without refreshing the page? .
You can use a hashtag (#) part as fall back for browsers who don't have above feature yet.
If you use jQuery, you can use the handy plug-in jQuery Address. This will take care of both above cases.
They're not using a plugin. They're doing an ajax request to a URL like this:
http://www.bits-apogee.org/2011/getcontent/?even=Rachel+Armstrong
and dumping the overview in the container.
The circle of this type of process is usually like this:
listen for link clicks
on click, prevent default on event.
user window.history.pushState to update url
some other code - hears new history
generates a url to get the content.
ajax load the url
dump the data into a container
2 Libraries I have used, both are easier than the above, as they rely on loading a regular html page via AJAX instead the example site you point to, which used a JSON format to get the data.
Pjax - update peices of the page, by pulling that HTML node from a different URL.
Ajaxify - easiest solution, you could do that effect on an HTML site in 10 minutes.
I want to load external websites inside div and make it a bit smaller to accommodate inside div more properly.
just like Google search do
I tried this:
$("#targetDiv").load("www.google.com");
but it is not working.
I tried iframe but it has still 2 problems:
scrolling is still enabled by pressing arrow keys & PGUP PGDOWN
how to make contents inside iframe smaller
Don't know which method i should use
which is more optimized
or any alternative?
What you're trying to do is not going to work. Unfortunately, JavaScript isn't allowed to make cross-domain requests for security reasons (reference: http://en.wikipedia.org/wiki/Same%5Forigin%5Fpolicy).
If you create a script written in PHP that resides on your own server that submits the request, that could work but the user wouldn't have a valid session and there's a risk that the URL (links) from the other site won't work if they're relative.
Example:
$('#targetDiv').load('load.php?url=www.google.com')
You could also have a look at jquery-crossframe. I've never used it but it claims to do what you're looking for.
The best option is to use an iframe element.
You are not going to be able to load a cross domain ajax call like that with jquery. from http://api.jquery.com/load/
Additional Notes:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
If iframe is not an option you can retrieve the data via an ajax call to a php page using curl.
Francois is right in that your ajax requests are restricted to same origin policy. That means you cannot load contents from other websites directly. What your are trying to achieve, however, is possible if your source supports JSONP. If you want to specifically load google search engine results check out Google Custom Search API
I am creating a web app in php. i am loading content through a ajax based request.
when i click on a hyperlink, the corresponding page gets fetched through ajax and the content is replaced by the fetched page.
now the issue is, i need a physical href so that i can implement facebook like functionality and also maintain the browser history property. i cannot do a old school POSTBACK to the php page as I am doing a transition animation in which the current page slides away and the new page slides in.
Is there a way I can keep the animation and still have a valid physical href and history.
the design of the application is such:
the app grabs an rss feed.
it creates the DOM for those rss feeds.
upon clicking on any headline, the page animates and takes to the full story of the rss feed.
i need to create "like" button on the full story page. but i dont have a valid url.
While Alexander's answer works great on the client side, Facebook's linter tool does not run javascript, so it will get the old content. Neither of the two links provide a solution to this.
What amit needs to implement is server-side parsing of the url. See http://www.php.net/manual/en/function.parse-url.php. Fragment is what the server sees as the hash tag value. In your php code, render the correct og: tags for based upon the fragment.
Firstly, if you need a URL for facebook then think up a structure that gives you one, such that your server-side code will load the correct page when given that URL. This could be something like http://yourdomain.com/page.php?feed=<feedname>&link=<linknumber>, which would allow you to check the parameters using the PHP $_GET array. If you don't have the parameters then load the index page; if you do then load the relevant article.
Secondly, use something like history.js to give you cross-browser support for the HTML5 pushState() functionality so that you can set the page URL when you do the AJAX call, without requiring the browser to do a full reload.
You have to implement hash navigation.
Here is short tutorial.
Here is more conceptual introduction.
If you're using jQuery, I can recommend BBQ for hash navigation:
http://benalman.com/projects/jquery-bbq-plugin/
This actually sounds pretty straight forward to me.
You have the urls as usual, using hash (#) you can extract the info both in the client and server side.
There is only one thing that is missing, on the server side before you return the content, check the user agent string and compare it to the facebook bot (if i'm not mistaken it's something like "facebookexternalhit"), if it turns out to be the facebook bot then return what ever you want which describes the url for a like/share (open graph meta data), and if it's any other user agent string return the content as usual.