Check if my iframe is in a Facebook document? - iframe

I have created a Facebook app to house my site within an iframe.
At every request I want to check that the site is inside the Facebook app, otherwise I want to redirect the user to the Facebook app.
I can check that I am within an iframe with javascript:
if (top != self)
But I don't know if I'm actually inside the Facebook app.
The cross-domain security hinders me from accessing the parent document's info. For example, "top.location.href" cannot be accessed.
Can someone help me out? :-)

Facebook attaches a value to window.name so you can use JavaScript to check.
if(window.name.indexOf('iframe_canvas_fb') != -1){
// in Facebook
} else {
// not in Facebook
}

You can check FB.Canvas namespace methods from facebook's javascript library. It will work on Facebook canvas.
https://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/
check what info do you get while in the facebook's iframe, outside iframe or in another iframe.
hope this helps

Well if the user is outside of Facebook this bit of script before the body html tag should redirect them back to your page on Facebook:
<script language="JavaScript" type="text/javascript">
<!--
if (self == top) {
window.location = "http://apps.facebook.com/YOUR_APP_PAGE";
}
-->
</script>
remember to change the 'YOUR_APP_PAGE' bit to something like:
'my-application?app_data=page-location'
you can send the request ?app_data to your Facebook page using php and append the page that your website was redirected from so that the app_data can tell your app to load this page but within Facebook.
So it is worth looking up Facebook app_data
If you want to change the style of your page depending if it is displayed on Facebook or not then use this:
<script language="JavaScript" type="text/javascript">
<!--
if (window.self = "http://apps.facebook.com/") {
var element = document.getElementById('html');
element.className = "facebook";
}
-->
</script>
and modify your html tag with the id=html like so:
<html id="html" xmlns:fb="http://www.facebook.com/2008/fbml">
this will allow you to use a class name .facebook remap any style for your page that you like.
If you need to set some initial php settings like the redirect page, then you can use this code in php to detect if you are within Facebook, however this code can not detect if the user is on Facebook or not after they have logged in:
if(!empty($_POST['signed_request'])){
//do something with php here...
}
Note:
It is unlikely the Facebook user on your app page has JavaScript turned off which is why we can use the above php code to set redirects etc...
php should not really rely on $_SESSION or cookies for this in case the user decides to visit your page having logged in to your Facebook application, it would take a page refresh for php to determine that they are no longer in Facebook from the session or cookie.
After thought:
All this information should be on the Facebook SDK's as managing redirects and application detection is a nightmare with Facebook's horrific documentation.
Hope this helps you out :)

Related

REST API Wordpress back button

I have been trying for a while to find a method to prevent the the browser from using cached data while the user is logged out. I am trying to force the browser to use the information from the database once the user is logged out instead. This will prevent the back button from exposing information on previously visited pages from being shown. I have used the PHP destroy session. I do not have a clue how to work with REST API.
Well, the REST API doesn't have anything to do with the frontend, but there are ways you can force the frontend page to reload on the back button being pressed.
Here is a similar question.
Essentially, you need to store some local storage data that get's checks on page load and force the page to refresh.
Page One
<script>
if (sessionStorage.getItem("Page2Visited")) {
sessionStorage.removeItem("Page2Visited");
window.location.reload(true); // force refresh page1
}
</script>
Page Two
<script>
sessionStorage.setItem("Page2Visited", "True");
</script>
Now, this isn't full-proof. If a user has javascript turned off or has some other block or something in there, it won't work. Companies do not allow sites to control a users browser. And for very good reason. But something like this can be a partial solution for the majority of users.

Dotnetnuke browser back button redirect to custom page

On browser back button click i want to redirect to a Custom Page that i create,
Example: In most banking applications while transacting if you click browser back button you get Page expired page and from there you can provide some links to login again.
the below code only prevents form navigating to previous page
<script type = "text/javascript" >
function disableBackButton() {
window.history.forward();
}
setTimeout("disableBackButton()", 0);
I am using DotNetNuke, could you provide any solution for this.
You can include that in a custom Module on every page of your website, or you could embed your JS into the SKIN for your website in DNN.

Need parent name of Iframe

I've been searching for a couple hours and haven't found a solution. Hopefully you can help.
I want to get the name & path of the parent page within an Iframe. The reason for this is to prevent the page within the Iframe to be displayed outside it's intended location. If I can get the session variables of the parent page, that would be even better as I could verify the user.
The Iframe will be written in ASP.NET, while the parent page is PHP.
I have found Javascript code that might work, but I'm very unfamiliar with javascript and how to pass the return value to the code behind in ASP.NET. If your solution involves javascript, I will need the whole thing from calling it in the form load to getting back the value.
I have tried these functions, but they don't show what I need.
Request.Url.AbsoluteUri.ToString
Request.ApplicationPath.ToString
Request.UrlReferrer.AbsolutePath.ToString
Thanks
I understand that you looking for a code behind solution and redirect, but the code behind can not recognize if the page is calling from some other.
You may try the Request.ServerVariables["HTTP_REFERER"] but this can make mistake, and can even been disable by some users, or changed.
One simple working solution with javascript is to check on the iframe it self if its inside your master page or not. So this code go to the page that lives inside the iframe, and if see that is alone is redirect the user back to the master page.
<script type="text/javascript" language="javascript">
// this line is check if its inside an iframe.
// if top==self then is not in iframe
if(top == self)
{
alert("This page can not be viewed alone, please press ok to load the master page");
top.location.replace("MasterPage.aspx");
}
</script>

Script generated image onclick event change

I have two scripts inside my webpage
<script type="text/javascript" src="http://somesite/somefile.js"></script>
<script type="text/javascript" >somecode('a','1z4j73');</script>
This script is generating a visitor map on my web page, now I don't want my user to click on the script and get redirect to that website.
How can I restrict that?
can I make a div tag and make all element inside the div tag to read only?
I have make sure that this restriction doesn't falls under company rules, they just want their logo under the map.
EDIT1
Can I catch this thorugh any event and again redirect the user to the default page?
Like when user click the image, I check the URL and if the URL contains that site name I again redirect to the default page.
I guess you create the sitemap for search engine optimization, and would like to keep sitemap links accessible for search engines (indexers), but want to get rid of redirect functionality for visiting users.
If that is so, then all you need to do - is just to assign your own onclick function to all links in your sitemap.
// onClick event
onClickFunction = function ( ) {
return function ( ) {
// do nothing
return false;
}
};
something
or simply:
something
this will still work for search indexers, which will look for all <a> tags and read href value. But because of "return false;" in the onClick event handler function - the redirection for users will be disabled.
Please see this article
http://www.bradino.com/javascript/onclick-return-false/
If you can figure out what the HTML elements are that you don't want, you can remove them using a script library like JQuery:
$("#targetelement").remove();
Or replace it with your own content.
You don't need a script library to do this though, but it can be helpful to have one.
HTH.

Facebook Connect login button not rendering

I'm trying to implement a Facebook Connect Single Sign-on site. I originally just had a Connect button (<fb:login-button>), which the user had to click every time they wanted to sign in. I now have the auto login and logout features working. That is, my site will detect a logged-in Facebook account and automatically authenticate them if it can find a match to one of my site's user accounts, and automatically deauthenticate if the Facebook session is lost. I also have a manual logout button that will log the user out of both my site and Facebook. All of those are working correctly, but now my original Connect button is intermittently not being rendered correctly. It just shows up as the plain XHTML (ie., it looks like plain text--not a button--and is unclickable), and no XFBML is applied. Here is the basic code:
On every page:
<body>
{...}
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript>
FB.init('APIKey', '/xd_receiver.htm');
var isAuth; // isAuth determines if the user is authenticated on my site
// it should be true on the logout page, false on the login page
FB.ensureInit(function(){
var session = FB.Facebook.apiClient.get_session();
if (session && !isAuth) {
PageMethods.FacebookLogin(session.uid, session.session_key, FBLogin, FBLoginFail);
// This is an AJAX call that authenticates the user on my site.
} else if(!session && isFBAuth) {
PageMethods.FacebookLogout(FBLogout, FBLogoutFail);
// This is an AJAX call that deauthenticates the user on my site.
}
// the callback functions do nothing at the moment
});
</script>
{...}
</body>
On the login page: (this page is not visible to logged in users)
<body>
{...}
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript>
FB.init('APIKey', '/xd_receiver.htm');
{...} // auto-auth code as on every page
</script>
<!-- This is the button that fails to render -->
<fb:login-button v="2" onlogin="UserSignedIntoFB();" size="large" autologoutlink="true"><fb:intl>Login With Your Facebook Account</fb:intl></fb:login-button>
<script type="text/javascript">
function UserSignedIntoFB() {
{...} // posts back to the server which authenticates the user on my site & redirects
}
</script>
{...}
</body>
On the logout page: (this page is not visible to logged out users)
<body>
{...}
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript>
FB.init('APIKey', '/xd_receiver.htm');
{...} // auto-auth code as on every page
</script>
<script type="text/javascript">
function FBLoggedOut() {
{...} // posts back to the server which deauthenticates the user on my site & redirects to login
}
function Logout() {
if (FB.Facebook.apiClient.get_session()) {
FB.Connect.logout(FBLoggedOut); // logs out of Facebook if it's a Facebook account
return false;
} else {
return true; // posts back if it's a non-Facebook account & redirects to login
}
}
</script>
<a onclick="return Logout();" href="postback_url">Sign Out</a>
{...}
</body>
Some things I've already looked at:
The automatic login and logout are working great. I can log in and out of Facebook on another tab and my site will notice the session changes and update accordingly.
The logout seems to be working fine: when clicked, it deauthenticates the user and logs them out of Facebook, as intended.
The issue seems to usually happen after a Facebook user is logged out, but it happens somewhat intermittently; it might happen before they ever login, and it goes away after a few minutes/refreshes.
Some cookies are left over after the login/logout process, but deleting them does not fix the issue.
Restarting the browser does not fix the issue.
The user is definitely logged out of Facebook and my site when the problem occurs. I've checked for Facebook sessions and site authentication.
All external script calls are being served up correctly.
Edit: Also, when the login button does render, it works fine.
I have a suspicion that there's something else I need to be doing upon logout (like clearing session or cookies), but according to everything I've read about Facebook Connect, all I need to do is call the logout function (and deauthenticate on my server-side). I'm really at a loss; does anybody have any ideas what could be wrong?
make sure to call the facebook js include (FeatureLoader) at the VERY END of your page, so your page renders then the facebook JS does some magic after the fact to turn the text into a button. otherwise it's a race between calling fb's servers and loading your sites content in the browser...
at least that was the problem I had run into.

Resources