I am working on a game in Javascript, and I would like to be able to include a modding API. How can I allow a developer to execute arbitrary code using my API while keeping them from doing malicious activities (stealing cookies, redirecting to a malicious site)?
There's a project by Google that aims to allow you to do something like this.
I'm working on something like this and my solution was to run the script-ables inside an iFrame that points to a subdomain (http://bar.foo.com) instead of the main site (http://foo.com). Input is provided to the script via url #fragment#identifiers and output is provided through the URL fragment identifier of a nested, invisible iFrame pointing back at the original name.
Remember, you can set a child frame's URL even if you can't see it, and you can always check a frame's specific URL if it's on the same domain.
Related
In our app, we allow people to embed videos using iframe or script tags. But we dont want to allow the people watching the video to easily copy these embed codes and post them elsewhere.
For iframes - what we've done is, in the iframe tag, we replace the src attribute's value with a proxy URL we have setup inside our application which simply redirects to the actual src URL. Besides this, it also does the authentication at this stage.
Clever people will surely be able to crack this, but this seems like a good solution for most cases since when they try to inspect the dom they only see the proxy URL and not the actual one.
For < script/> - I tried doing the same, but did not work out.
Eg. -
<div id="wowza_player"><script src='//player.cloud.wowza.com/hosted/abcdefg/wowza.js' type='text/javascript'></script></div>
Is there anyway to obfuscate or prevent abuse of these embed codes?
Thanks!
In case of iFrame, it can be possible to verify the domain that "call" the iframe using the referer. See How to limit display of iframe from an external site to specific domains only
I want my webpage to have two parts. The top part has a textbox. When the user types a URL into the textbox, the bottom part browses to the content of that URL. When the user clicks a link within the bottom part, the bottom part navigates to the new URL, and the textbox in the top part changes to the new URL. How can I do it?
NOTE: This behavior is the same as in Google Translate (e.g. here), but without any translation.
first problem..
Same origin issue
The only way to achieve what you are asking is exactly the way google translate does what it does - which is to use a server-side powered script as a proxy request:
http://translate.google.com/translate_un?depth=1&hl=en&ie=UTF8&prev=_t&rurl=translate.google.com&sl=auto&tl=en&twu=1&u=http://de.wikipedia.org/wiki/USA&lang=de&usg=ALkJrhgoLkbUGvOPUCHoNZIkVcMQpXhxZg
The above is the URL taken from the iframe that Google translate uses to display the translated page. The main thing to note is that the domain part of the URL is the same as the parent page's URL http://translate.google.com -- if both your frame and your parent window do not share the same domain, then your parent window's JavaScript wont be able to access anything within the iframe. It will be blocked by your browser's in-built security.
Obviously the above wont be a problem if in your project you are only ever going to be navigating your own pages (on the same domain), but considering you are proffering Google Translate as an example I'm assuming not.
What would Google do?
What the above URL does is to ask the server-side to fetch the wikipedia page and return it so that the iframe can display it - but to the iframe this page appears to be hosted on translate.google.com rather than wikipedia. This means that the iframe stays within the same origin as the parent window, and means that JavaScript can be used to edit or modify the page within the iframe.
next problem....
Rewrite the proxied content
Basically what I'm saying is that this can't be achieved with just HTML and client-side JavaScript - you need to have something to help from the server-side i.e. PHP, Python, Ruby, Lisp, Node.. and so on. This script will be responsible for making sure the proxied page appears/renders correctly e.g. you will have to make sure relative links to content/images/css on the original server are not broken (you can use the base tag or physically rewrite relative links). There are also many sites that would see this as an illegal use of their site, as per their site's terms of use and so should be black listed from your service.
final problem..?
Prevent the user from breaking away from your proxy
Once you have your proxy script, you can then use an iframe (please avoid using old framesets), and a bit of JavaScript magic that onload or ondomready of the iframe rewrites all of the links, forms and buttons in the page. This is so that when clicked or submitted, they post to your proxy script rather than the original destination. This rewrite code would also have to send the original destination to your proxy script some how - like u in the Google translate URL. Once you've sorted this, it will mean your iframe will reload with the new destination content, but - all importantly - your iframe will stay on the same domain.
too many problems!
If it were me, personally, I'd rethink your strategy
Overall this is not a simple task, and it isn't 100% fullproof either because there are many things that will cause problems:
Certain sites are designed to break out of frames.
There are ways a user can navigate from a page that can not be easily rewritten i.e. any navigation powered by JavaScript.
Certain pages are designed to break when served up from the wrong host.
Sites that do this kind of 'proxying' of other websites can get into hot water with regards to copyright and usage.
The reason why Google can do it is because they have a lot of time, money and resources... oh and a great deal of what Google translate does is actually handled on the server-side - not in JavaScript.
suggestions
If you are looking for tracking users navigating through your own site:
Use Google Analytics.
Or implement a simple server-side tracking system using cookies.
If you are looking to track users coming to your site and then travelling on to the rest of the world wide web:
Give up, web technologies are designed to prevent things like this.
Or join an online marketing company, they do their best to get around the prevention of things like this.
add a javascript function to your second frame -
<frame id="dataframe" src="frame_a.htm" onload="load()">
let the text box have an id - say "test"
function load()
{
document.getElementById('test').value=document.getElementById('dataframe').src
}
I want to know why some ad codes or embed codes don't directly give you iframe code to embed on your site instead they give a JavaScript code which links to another JavaScript file on their server. The file on their server calls the iframe which serves the content. Why is this done and what are the benefits of this method.
Example: this is the code issued by Amazon:
<script type="text/javascript" src="http://www.assoc-amazon.co.uk/s/ads.js"></script>
Which opens another JavaScript file that calls the iframe.
The biggest reason I can see for using a JavaScript file is that they want to be able to access cookies stored on the path of your page. They can't do that if they're supplying an iframe directly (they would only see cookies stored in the iframe's path). It's important; those third-party cookies relative to your page give them a lot of information, and let them store information specific to your visitor and your site, in your visitor's browser cookie database.
As for why Amazon gives you a JavaScript file that sets a few variables and then includes another JavaScript file, it gives them the ability to set the variables based on what they see (perhaps that ads.js is dynamically generated on the basis of what cookies it seems), and it lets them change the other JavaScript file path as they see fit.
It is more flexible - if they decided to do something else later.
Also, JavaScript on your page has the freedom to parse the DOM and examine the content. An iframe on a different domain cannot access its parent.
Let's say I'm a js script living inside a html page. I need to know if I am inside a specific IFrame.
Something like
if (top.location.href === 'http://specificurl/') ...
However I need this working from any domain.
I have also tried adding a value to the window element in the iframe owner and checking on the child with the same result (permission error).
Any suggestions?
Thanks
Guido
Can't be done unless you have control over both pages/sites/domains (that is, the frame's page AND the main page).
If you do have control, check out the easyXDM framework or google for "cross domain communication iframe"
And the reason this can't be done is simple security. Imagine if you visited a site that contained a frame which appeared to take up the whole page, and then visited your online banking site -> easy to see how malicious javascript could get all sorts of details, which is why it can only be done if the two sites/pages/domains are explicitly coded to work together
I figured out how I can do it in MY scenario. Fortunately my client script (living in frame) gets loaded dynamically by one of my scripts. I simply added a #anchor to the url and that was accessible inside the frame.
Very straight forward really.
Thanks for the help Graza, that product looks very interesting fortunately I don't need it.
Thanks
Guido
What methods are available to monitor the status of IFRAME page, I know there are security limits but I hope some small notification system is still possible.
My situation is that I have created a parent page that is located on customer's server, and this page has has iframe page located on my server (my domain). I need to somehow communicate a little between these two:
Can I make javascript to the parent page that can check if my iframe page has a specific string on it, or somehow make iframe page to notify the parent page?
Is there e.g. any possibility to make a timer that checks iframe content time to time?
I also accept answer how mydomain/client.page calls callback on customerdomain.intranet.com/parentpage.htm that has client on iframe
You need to use cross site JavaScript techniques to be able to do this. Here is an example.
Put another file into your server, call it helper.html, include it to your file served by customers server using an iframe. Set the src of the helper.html iframe with adding get parameters, ie. http:/myserver.com/helper.html?param1=a¶m2=b, in the helper file use javascript to call method on parent's parent ( parent.parent.messageFromIframe(params) ). Which is the page on your server itself. Since helper and the container page are on the same domain it should work. The technique is popular, for instance Facebook was using it for their Javascript api.
I got information that this is possible by setting parent.location (from iframe) to have hash data like this "mydomain.com/mypage#mymessage"
By default, security restrictions in the browser will prevent access from/to the document in the iframe if it is in a different domain to the parent page. This is, of course, just as it should be.
I believe this would prevent even checking the current location of the iframe, but that's easily testable. If it's accessible, then you could poll the iframe for its location, and whenever the page in the iframe updates, have it append a random querystring parameter. Comparison of that parameter to the value from the previous poll would tell you if it's changed.
However, as I say, I suspect it's not possible.
Edit: This question suggests it is only possible for the initial src attribute: How do I get the current location of an iframe?