I'm basically looking at a security problem between a parent page and an iframe with links to a third party.
I want to send a POST or a GET (doesn't matter which as I can control the other side) to the third party, but not expose any details within it (say a SID or a user token) and have it's HTML content (JS/HTML/Images) loaded into the iframe.
I've looked at server-side redirects, creating a proxy using webclinet/webresponse and am curious to whether there is a good way to do it.
Has anyone ever done this before, or think that the secrity is not possible? Hell, even if I'm barking up the wrong tree on how to solve this.
If anybody has any examples on this it would be greatly appreciated.
Cheers,
Jamie
[Edit] Was thinking I might need to add some more details.
Say I have a parent page: https://mycompany.com/ShowThirdParty.
This has an iframe in it at the moment which will have the content of another component (also owned by me, or another team more specifically)
Basically I'd like to send some credentials to content in the iframe in such a way that the external pages can't read it, the iframe is put into a modal (I've done that) and the iframe has the restricted content with the auhtentication almost seamless and invisible.
I currently have it working as a GET url generated dynamically via JS and then passed into the iframe src parameter, obviously that isn't secure.
I kind of want some kind of server side redirect across a full url, but I don't even think that's possible.
You could try using AJAX and load a PHP script (with any parameters to the script encoded/encrypted) to query the 3rd party page and load the response into the iframe. Not really sure how your code is setup but there should be a way.
It can also be done by POST Method (submit the data to iFrame using POST) as it is HTTPS so the data you send to iFrame is encryped.
Related
I need to create a custom Facebook Page Tab app which will show an external site in an iframe. This need to have adverts on it but I'm not sure if this is possible as the site is hosted externally.
I'm not sure if I need to sign up to the Facebook Audience Network to get approved etc. either?
Any help or advice would be great.
Many browsers have this limitation of not allowing external sites to be shown in an iframe. Imagine the case when you are working hard to create a site and others show all your content in iframes. That is, naturally frustrating.
However, there is a candidate-solution: Let's suppose you create a page which sends a request to the other site and appends all the content into the body and head of your page. This is very much possible, so the solution is to:
Create a page in your site, let's call it outsider
In the server-side code of your outsider page send a request to the desired page to be shown
You will get the html of the page. Process it and include its content into the head and body of outsider. This includes:
3.1. Checking all the CSS to be reached, as the target page might refer to local CSS, which is unreachable locally at your end. Process the URLs of CSS files
3.2. Checking all the Javascript to be reached, as the target page might refer to local JS, which is unreachable locally at your end. Process the URLs of JS files
3.3. Apply the idea described in 3.1. and 3.2. for other resources, like images, until you are satisfied with the content of outsider
Create an iframe, having the source to point to outsider. outsider is inside your scope, so it should be shown
NOTE: If the site owning the target page does not like the possibility of you showing their content inside iframes, they might protect it by, let's say, having Javascript in their code, which checks whether the page is inside an iframe. Remove that code while processing the response to your request. If nothing else prevents you from showing the page in an iframe, then you should achieve success.
I'm looking to pass data from a form into an iFrame, but I have a slight problem.
The form page I can edit with no restrictions
The page I send the data to I cannot edit unless its html or JavaScript
The data needs to end up in an iframe within this page, which I can edit with no restrictions
I'm incorporating a search function into a CMS system which is why I cannot edit the iframe's parent page, and why I am using iframes at all.
At the moment the data sends to the parent page but is not picked up within the iframe, I am sending via the POST method.
I got it..
Added and extra page which converted the post data into session data,
if anyone knows a better way i would like to hear it though.
And they are the same domain, but editing the CMS system would have taken ages to look through as its not mainstream or developed by me.
Maybe I'm oversimplifying the problem, but can't you use the "target" attribute of the form tag to post to the Iframe?
I have a facebook Iframe application with multiple PHP pages in it.
I have some links that point relatively to the files inside my "iframe folder".
Having some issues with session variables inside the iframe. I set some session variables but they do not persist from one page to another.
This does work on other browsers.
I've been reading that Safari does not support Cross-Domain cookies and this might be the problem , but im not sure how to fix this.
Any help?
I believe this solution has become obsolete with the latest (6.0 and later) versions of Safari.
Safari by default does not allow cookies to be set from third parties. This affects Facebook iframe applications because the user is accessing a page served from apps.facebook.com but the iframe is being served from yourdomain.com, the "third party" in this case.
There are several several solutions mentioned around the web. The best I've found and one recommended by Facebook in its list of miscellaneous issues is to fake a POST request to yourdomain.com using JQuery. This solution detailed by Anant Garg works in general for different host/iframe domains and needs to be adapted for Facebook apps. The key parts are:
$("body").append('
<iframe id="sessionframe" name="sessionframe" onload="submitSessionForm()" src="http://www.yourdomain.com/blank.php" style="display:none;"></iframe>
<form id="sessionform" enctype="application/x-www-form-urlencoded"
action="http://www.yourdomain.com/startsession.php"
target="sessionframe" method="post"></form>');
var firstTimeSession = 0;
function submitSessionForm() {
if (firstTimeSession == 0) {
firstTimeSession = 1;
$("#sessionform").submit();
}
}
Another solution by Will Henderson is to instrument each link on your page with session information using a Javascript function. Then modify your server code to capture this session information by reading it from GET parameters.
I wrote the blog post Dominic refers to in his answer.
The problem is that the default behavior of Safari is to only accept cookies from sites that you visit. This excludes "third party" cookies. Safari treats the page inside an IFRAME as a third-party site, and until you interact with that content (by clicking a link, for example), it will refuse those cookies.
Your PHP code needs to set a cookie on the first page that uses the session in order for that session to persist from one page to another, but if the session variables are in the very first page in the IFRAME, you have a chicken-and-egg problem.
My solution is to retain all of the special Facebook parameters through to the second page loaded into the IFRAME. Because you've interacted with it, cookies set on the second page will persist, and this allows your PHP code to keep whatever state it needs to communicate back to Facebook.
This won't likely help your PHP session, though, so I suggest adding another parameter to links on the first page that allows the second page to look the session up, or otherwise recreate it.
I think the best solution is to manually keep track of the session ID i.e. by using session_id($_GET['session]); Just make sure you do this before calling session_start(); and everything works.
Safari accepts cookies only from the page the user navigates to. The easiest and most effective way to fix this is to redirect the request from landing page of your canvas app to a different page on your domain using top.location.href and redirect the user back to the canvas app from that page.
For example, if abc.php is your landing page and the canvas URL is facebook.com/abc. First redirect the request from abc.php to a different page like xyz.php then redirect again from xyz.php to facebook.com/abc. Don't forget to start the session in xyz.php.
This is the simple fix...
and thanks for all the input. I ended up solving the problem by appending the "signed_request" paramter on every page. I just put it in as a hidden field and set it in the code behind. That way I managed to get it to work in Safari. Hope it works for you too.
With the release of Safari 7, not only 3rd Party cookie is being blocked. Local Storage as well as WebDB, any kind of website data are being blocked. When you go to Safari Preferences (CMD+comma), Under privacy tab, on Safari 7, it now says : "Block cookies and other website", originally was "Block cookies". That confirms the changes.
Other browsers might follow through in the future. Most probably Firefox. Chrome, cough *cough* probably not.
You probably have to employ some workaround using redirection technique or popup similar to what disqus did.
If you using .NET then there is a much simpler solution to this problem.
Just set cookieless to false in your web.config. Ex:
sessionState mode="InProc" cookieless="true" timeout="60"
Its a lot easier than posting an iframe, or opening a popup window with the url of the iframe.
kind regards,
David
I used this header with PHP, that fix my problems
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') ) header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');
I have a blog on BlogSpot.com, and I have a domain based on my own name. I want to have a URL on my site (like http://www.mydomain.com/blog) that will then pull in the content from my blog page, but I want the URL in the address bar to stay on http://www.mydomain.com/blog, so that it does not look like you left my site.
(I have a Windows hosting account on 1and1.com)
I did Google this question, and I found how a few things, like:
1: Adding a tag in to "refresh". Tried this, but it changes the address bar.
<meta http-equiv="refresh" content="0; URL=http://myblog.blogspot.com" />
2: I also learned about the html iframe thing, but it has height and scrollbar issues.
3: Then, I found this partial code snippet, but I don't know what to do with it, or if it will even work against the BlogSpot server, or on my server:
<%
Set objHTTP = Server.CreateObject("Microsoft.XMLHTTP")
objHTTP.Open "GET", "http://myblog.blogspot.com", false
objHTTP.Send
Response.Write objHTTP.ResponseText
%>
I am a client app guy, so this web stuff is all new to me.
Any help will be greatly appreciated.
The third option will probably work for the initial page load, but any links on the page will then direct the user to the BlogSpot page, and change the url. It simply fetches the page from blogspot, and then sends it to the user without any changes.
For me, the changing url is not a big deal, as long as it's easy for the user to get from one to the other easily; have prominent links on either page that tell the user where they go. Most people don't care about the url, they just care about the content.
Using an IFrame is probably your best bet. Many Facebook applications are in IFrames and still integrate very well.
I think using a regular frame or an iFrame is probably the easiest solution. What kind of scrollbar issues did you encounter? You can set custom values for some of these attributes, just check out the documentation here:
http://www.w3schools.com/TAGS/tag_iframe.asp
If you didn't want to use frames, you could actually proxy the entire page using a server side application like Squid. However, this is more difficult to setup, requires the ability to install software and configure firewall/iptable settings on your host, and must be configured properly to prevent malicious abuse.
-Mark
Here are some options you can try:
If you have PHP installed:
<?php
echo file_get_contents('http://myblog.blogspot.com'); // or you can use fopen()
?>
Or Server-Side-Includes installed:
<!--# include virtual="http://myblog.blogspot.com" -->
You can also pull blog content from Blogspot using the Blogger Data API.
The advantage of this is that you can reformat and reorganize the content to match the style of your website. The disadvantage is that it's more work than an iframe, and you probably won't match the full functionality of Blogspot.
I'm playing with this now to see whether I can use Blogspot as a type of CMS for a club news system.
I'm trying to implement a feature like that where a user inputs a url and when displaying that url I want to have a custom display (an embed object if it's a video from youtube, a thumbnail if it's an image link, title and excerpt of body if it's a normal link).
How can such a feature be realized?
There is a new idea called oEmbed that a few sites support (Flickr, Vimeo and a few others) that addresses this problem. oEmbed site
Otherwise, just check the site against a list of ones you pick and then pull out the relevant bits to construct an embed link.
I liked the idea of oEmbed a lot but unfortunately it doesn't has that much adoption yet.
oohEmbed tries to solve this issue by building oEmbed for many websites.
For the feature to work, it needs the server's interaction where I believe the following scenario is how it works
Assume that we have the site humanzz.com and that it provides such feature
A user enters a url on the humanzz.com's webpage and presses a button like facebooks' preview button
An AJAX call is made to a dedicated page on humanzz.com
humanzz.com does calls the remote website and gets its data
The AJAX call now returns the page's data (oEmbed JSON object)
This involves so much server's overhead.
I really wanted to do it using JavaScript as the server's role was only to bypass "Same Origin Policy"'s restrictions.
oohEmbed allows bypassing the server's step by specifying a callback parameter to oohEmbed so that the JSON object returned is passed to a callback function on your page.
An example illustrating this is as follows
Add a script tag dynamically to your page
< script type="text/javascript" src="http://oohembed.com/oohembed/?url=http%3A//www.amazon.com/Myths-Innovation-Scott-Berkun/dp/0596527055/&callback=myCallBack">< /script>
This would result in executing myCallback(oEmbedJSONObject) which is great.
The problem with that solution is you still have to have a fallback for websites that don't have oEmbed representations.
For the embedded things, I have been using auto_html ( https://github.com/dejan/auto_html) with great success (vimeo, youtube, images) and even added soundcloud myself. But I am still looking for a "thumbnail" generation with an image and text facebook-like.
I guess you have to construct it by yourself by manually parsing the kind of URL you get.
If it is an image url, well then you just have to rescale it and in case the user clicks on it, then handle that by opening the original one somehow.
If it is a link to some youtube video, then you have to take a look at how the embedding of Youtube videos works. You can just copy the code that is provided by Youtube itself, and then exchange the parts with the URL to the video with the URL you got from your user.
I did never implement something like that, but I assume it should work somehow like this.