Here's my problem - I'd like to communicate between two websites and I'm looking for a clean solution. The current solution uses Javascript but there are nasty workarounds because of (understandable) cross-site scripting restrictions.
At the moment, website A opens a modal window containing website B using a jQuery plug-in called jqModal. Website B does some work and returns some results to website A. To return that information we have to work around cross-site scripting restrictions - website B creates an iframe that refers to a page on website A and includes *fragment identifiers" containing the information to be returned. The iframe is polled by website A to detect the returned information. It's a common technique but it's hacky.
There are variations such as CrossSite and I could perhaps use an HTTP POST from website B to website A but I'm trying to avoid page refreshes.
Does anyone have any alternatives?
EDIT: I'd like to avoid having to save state on website B.
My best suggestion would be to create a webservice on each site that the other could call with the information that needs to get passed. If security is necessary, it's easy to add an SSL-like authentication scheme (or actual SSL even, if you like) to this system to ensure that only the two servers are able to talk to their respective web services.
This would let you avoid the hackiness that's inherent in any scheme that involves one site opening windows on the other.
With jQuery newer than 1.2 you can use JSONP
#jmein - you've described how to create a modal popup (which is exactly what jqModal does) however you've missed that the content of the modal window is served from another domain. The two domains involved belong to two separate companies so can't be combined in the way you describe.
i believe #pat was refering to this
"As of jQuery 1.2, you can load JSON data located on another domain if you specify a JSONP callback, "
http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback
Related
I was wondering if there's a way to add html to a webpage (from another domain) before displaying it in a iframe. Basically my idea is to make a website that allows the user to type in a website and choose or add things to the page, like copy a yahoo anwsers page and still have it function (so javascript and all still works) but the background has changed or a button that does a specific thing to the page has been added in. So far I keep running into cross domain policies and I have no idea how to get round these.
No, you cannot, this will be a massive violation of information security codes.
Imagine if someone could access your code, js and html and just alter it and access your information.
even worse, if you have sensitive information stored in the client code (you shouldn't but lets imagine), everyone across the web will have access to that information.
Displaying the webpage is one thing, you have api's for this sort of things (for example, google, twitter, facebook api's) and you pay for them too.
The reason you are running into cross domain policies is because you are not allowed to make that request. Not by JsonP and not by CORS Requests.
If you want access, look for a proper api.
For beginners, here is the Yahoo Api (Yql)
And here is it's Terms of use
Read them before you continue.
You can't do that because, if you could, an attacker could use this to exploit referred page.
Source: https://developer.mozilla.org/pt-BR/docs/Glossary/Cross-site_scripting
I believe it should be possible to retrieve information from another page as long as it's from the same domain right? There are some information that I would like to retrieve from this page, and to display it on another Wikia page. (So that the information can update on its own regularly).
Unfortunately, I cannot identify which specific id do I need to retrieve on the Wikia WAM page. I simply don't know how to retrieve the Rank/WAM Score information. Since the WAM Score/Rank updates regularly, the arrow image also changes depending on whether you rose or descended in your rankings. This is why I would like to pull the data from the page so that it can update regularly without having to do it manually.
Is there a way to do this using javascript?
P.S. I apologize for the inconvenience, and to have asked without much knowledge on programming (I only know basic javascript).
I believe it should be possible to retrieve information from another page as long as it's from the same domain right?
The same origin, which is about more than just domain. This is defined by the Same Origin Policy.
The two pages you asked about are on different origins, http://www.wikia.com and http://asphalt.wikia.com, because the hosts are different even though the TLD is the same. So you won't be able to use ajax to retrieve information on one from the other unless the one you're trying to get the information from shares it with the one you're trying to get it on via Cross-Origin Resource Sharing and you're using a browser that supports it.
If it does support CORS, yes, you can use ajax to query the content of the page, parse it, and extract the information you need.
If not, you might look at using YQL as a cross-origin proxy. Basically that's calling a Yahoo service that uses a server to get the page (so the SOP doesn't come into it), parses it for you, and lets you query against the parsed results.
When I am using iframes or frames (older sites), as a extra security precaution I use the JavaScript function:
<SCRIPT LANGUAGE="JavaScript1.1">
if (top == self) self.location.href = "../index.cfm";
</SCRIPT>
then another hidden check to see if the page is being called correctly....
<cfif (HTTP_REFERER DOES NOT CONTAIN "referer_page.cfm")
<cfabort>
</cfif>
It works great to keep visitors (hackers?) from opening and/or trying to post to the page.
The problem is that the JavaScript displays in source code and the less they know...
I know the JS is client side but is there anyway to create the function in the server side CF or otherwise hide from prying eyes?
I a running cf9 on my and most of my client sites.
Thank in advance
No, it is not possible for any server side language to tell if the client that requested a page intends on displaying it inside of a frame. The only way to tell that is to ask the browser once your page reaches it.
What's the concern with the Javascript being visible?
There is literally nothing you can do to permanently avoid clients from seeing your source HTML and/or Javascript. Any attempt at security on the client side is in the end futile. You will keep out casual (i.e. non-web developer or programmer) users, but that is all. Anyone with a rudimentary knowledge of HTML and access to Google (or Alta Vista or ask jeeves for that matter) will be able to circumvent your barriers.
The use of HTTP_REFERER is suspect here as well (I know I know... I'm a negative Nellie :). That CGI var is dependent on the browser and web server working together. It will not be reliable overall because it is dependent on the client side. Someone up to no good will have no problem circumventing your barrier by simply constructing requests with the appropriate referrer.
If you want server side security then you are forced to use some form of authentication and session. This is a growing field what with oAuth and the use of Google, FB, Twitter etc as federated authenticaiton services. But plain old usernames and passwords tied to login sessions works too :)
To be clear, #Luke is saying that some users properly using your site, viewing iframe content, may have problems if they have a security setting, like an anonymity program, blocking their data, like cgi variables.
The only real solution is proper authentication and filtering on every page. If a list shows content for a user and loads details into an iframe, the iframe's page must also check that the user has access. At that point, it doesn't matter if they can get at the url.
For instance, if you get a list of user images like this.
<cfquery name="getImageList">
select imageid,imagefilename_mini
from images
where userid = <cfqueryparam value="#session.userid#">
</cfquery>
Which loads an iframe to load full sized images, you still need the and subclause
<cfquery name="getThisImage">
select imagefilename from images
where imageID = ...
and userID = ...
</cfquery>
That way, even if someone changes the image id in the url, it still only lets them see content bound to the userID.
Also, modern browsers make altering the source of a live page all too easy. I don't mean that browsers can alter the server side file, I mean that contents of the DOM as delivered to the browser. It's an incredibly useful tool for developing and debugging, but it does make mischievous/malevolent activity easier.
In chrome and firefox, you can inspect an element, change the attributes and the page will change before your eyes. Here, that works for iframe src's, so it still is within the DOM it expects to be in.
You should regard client side UI as how you'd like the page to be presented, and the way it works best but use server side safeguarding (proper validation) because it's too easy to get around client-controlled data/elements.
is there a function in ColdFusion that detects whether or not a browser window is the top window? (Similar to (if (window == window.top)) in JavaScript)
The reason I ask is because I would like to make certain page elements present when the page is directly accessed by the user, and not present if my page is iframed.
CFML code runs on the CF server, whereas any considerations about browser windows obviously run on the client. CF is completely unaware of the UI configuration of the client system, all it sees is "a request". Indeed the requests don't even come from the client, they come from the web server which acts as a go-between for CF-serviced requests: CF has no interaction with the client itself.
The only information the web server gives to CF that in any way relates to the client browser is some of the stuff in the CGI scope, and obviously that's limited. And none of it relates to the configuration of browser windows / iframes.
You will need to solve this with Javascript (which I will add to the tags of your question).
To trigger different code to execute on CF given a certain browsing situation, you are going to need to use Javascript to add some information to the request to identify the situation to CF. This could be adding a parameter on the query string, or something like that.
If someone was 'wrapping' one of my products I'd want to know who and how so I could improve the experience for the user and the site owner. With that in mind, what I would do is automatically break out of any frames by default. I would then create a simple api and provide instructions to other webmasters on the proper way to include your content. Display different content once you've determined if your content is PROPERLY being included in another site. For webmasters that want to include your content:
Provide recommended height/width for the iFrame so you can
include your logo or ads with the content.
Provide anything you want them to include in the query string to help track usage.
You could even add fun stuff to your api to make your content look more integrated into the including website like reacting to url.bgcolor or url.bgimage.
You could go as simple as looking for and recording the value of some url variable like url.remoteSiteAddress or as complicated as registering the site and providing unique key. Of course there are other considerations to take into account to enforce the key. Being that you don't really care that the content is being displayed on a remote site, I suspect just recording a simple url variable is more your speed.
If a different website is putting your page in an iframe on their website, then you could use the CGI.HTTP_REFERRER variable to check if the website domain is yours or not, and load content as desired.
I currently have a GWT project utilizes the Activities and Places model provided by Google. We are integrating with a third party cross domain JavaScript solution that renders an external domain's JSP in an iframe and utilizes window.location transport to notify our domain when the user has finished doing work in this JSP.
The issue is that by using window.location transport GWT's place system will catch the editing of the URL and attempt to navigate to a nonexistant place.
We do have some influence to get the third party to change so the three options I can see are:
Catch the attempted place navigation and ignore it if it contains a certain list of reserved strings that this third party JS uses.
Get the third party to change their solution to utilize window.name (less refactoring on their part)
Get the third party to change their solution to utilize JSONP (more refactoring on their part)
Is there any way to actually achieve #1?
EDIT So I figured out how to achieve #1 by rolling my own version of GWT's PlaceHistoryHandler and changing the handleHistoryToken method. The real question is which of these three solutions is the best practice?
My vote would be on changing the cross-domain signaling, if possible. The browser-displayed URL implies that the page can be bookmarked to be loaded again, and it provides a way to manipulate the history of the page. Building another mechanism based on that risks the user bookmarking or navigating to a page/place that has no meaning for the history token handling system, and may even signal the app that the iframe is loaded when it actually isn't.
That said, if you aren't actually using history with places, you could just as easily use Places + Activities with a custom PlaceHistoryHandler-like class that keeps a stack of recent places to allow returning to them if your application allows it. This would prevent the browser back button from making sense, but could still allow navigation by places internally.
Unless that is a case that makes sense (app doesn't need the hash token, so leave it to be used for inter-domain communication), I'd vote for #2 or #3.