Prefilling form on extern webpage - javascript

There's some website (not mine, it's third party) that has a form on it. In order to spare the user from having to fill out this form, I want to somehow prefill it with data I have stored in my database.
Let's say it looks like this:
<form id='form1'>
<input type='text' id='input1' />
<input type='submit' />
</form>
I though a solution would be to create my webpage, and on it create an iframe with the form I want to fill.
<iframe id='myFrame' src='http://www.someSite.html'>
I have followed some suggestions here about how to access content in an iframe: Getting Contents of Iframe with Pure JavaScript, How to get the body's content of an iframe in Javascript?, but the problem is, when I follow them, it says that the content of the page is null.
I found out that it's because the page with the form is on a different domain, so web browsers don't allow it. It's possible to turn this off in the browser, but I need it to work independently of browser settings.

You can't do what you're asking in a simple web page. The security restrictions exist for a reason; imagine if a malicious user wanted to load, say, your banking site in an iframe and have you login. The malicious script on the hosting page would then have access to the form where you enter your credentials, account information, etc, etc.
As #mplungjan stated, you have to work around this by either making requests from your server and proxying them, so that the remote content actually goes through your site first, or by getting the user to modify their browser environment with a plugin or a bookmarklet.

Related

Is it dangerous to allow users to add javascript code in a page that's supposed to be viewed outside my app?

I have a Ruby on rails web application that helps users to create their portfolio. Initially they choose a template and they have the ability to change the text of the chosen template. here I provide them with a specific fields like "headline", "description", "projects"... these fields are validated server side to not permit html code.
I have two other fields:
embed video code (from youtube, vimeo etc...)
Another field which allow addition of custom JavaScript.(maybe they want to add a popup script, or a tracking code or whatever).
When they finish editing the template, they click "publish" button and their portfolio can be seen on their sub-domain which is based on my app domain ex: user-subdomain.myapp.com/portfolio
My question is : can allowing users to put in custom JavaScript or embeding video code affect the security of my application? Am I vulnerable to XSS, Hijacking, or hacking? If I am, how do I fix those issues using Rails?
If they are entering JavaScript code which you will then store and include when showing a page to other users, then yes, it's a security hole. It means that they can do anything you can do on that page, in the context of someone else's user account; this could be used to steal information from other users, etc.
If only they will ever view the page with the embedded JavaScript, no, it doesn't make your page less secure; they coudl easily inject JavaScript into your page via bookmarklets or even just using the console.

Security Issue - Allowing user to add his own JavaScript (only during runtime)

I'm currently working on a content generator and I have objects which allow users to add custom scripts to the page.
I'm concerned about the preview of my plugin. Pages cannot be saved in the preview, but can the user mess with my preview page permanently if I allow him to use dynamically added javascript?
I'd also like to mention, the javascript is sent via AJAX to a php file, then appended to the body.
Pages cannot be saved in the preview, but can the user mess with my preview page permanently if I allow him to use dynamically added javascript?
Not permanently, no. He can only mess up his own current page.
If the custom scripts and pages don't leave the client's computer, or you can make sure they will not be served to other people (which implies they're not stored on the server) then you're safe from XSS attacks.
However, notice that as soon as your plugin leaves "preview" and you allow saving pages that are shown to other visitors, you will have that problem.
Yes, this is a big attack vector known as Cross Site Scripting (XSS). You should never run JavaScript provided by your users on arbitrary pages, unless you absolutely must.
For instance, I could add:
document.body.style.display = 'none';
and that would hide the entire page.
Although your script only displays to the current user, your page may be vulnerable to a Cross Site Scripting attack. The way to handle it in this case (as you are allowing scripts) is to use a similar mechanism to a Cross Site Request Forgery prevention (although CSRF and XSS are completely different).
e.g. if your page https://www.example.com/preview displays all content (HTML and script) POSTed to it (for thie example assume the POSt parameter is called content), an attacker may include the following code on their page and then entice the victim to visit it whilst logged into your website.
On www.evil.com:-
<form method="post" action="https://www.example.com/preview">
<input type="hidden" name="content" value="<script>alert('foo');</script>" />
</form>
and this form could be submitted automatically via JavaScript (document.forms[0].submit()).
This will cause the script in content to be executed in the context of your site, possibly passing cookie values of the user's session to www.evil.com rather than my benign example of an alert box.
However, as your are POSTing the content value to your own site using AJAX, you can prevent this attack by checking that the X-Requested-With request header is set to XMLHttpRequest. This header cannot be POSTed cross domain (without your server agreeing to this using CORS).
Also, if your page is for a preview - what is the preview for if your preview cannot be saved? If this is related to your full save functionality, then it is possible to allow a user to save scripts safely by running the entered content within a sandbox.

Retrieve Elements From Other Sites With iframe and jQuery

I am trying to create a website which retrieves data from another website then pastes it into a table on my website. I am attempting to do this through an iframe and jQuery. Currently, I don't care about pasting the data in. I am simply trying to get jQuery to retrieve the div containing the data I need.
This is my iframe code:
<iframe id="data1" src="http://example.example" hidden="true"></iframe>
The div with the id frStatus2 is inside the body of the html document.
This is my javascript/jQuery code:
$(document).ready(function(){
var x = $('#data1').contents().find('#frStatus2').html();
console.log(x);
});
I came up with this after googling around for a while.
Thank you for your time.
You can't access the contents of the iFrame with JavaScript if its source is another website as this would break the same-origin policy. You'll need to do this on the server side. If the site you're trying to access has a JSONP API you should use that, otherwise you can implement your own.
Think about how insecure it would be if you were allowed to access the contents of the iFrame. Let's say you loaded up a bunch of bank websites, social networks, etc. in the background using this iFrame method and tested to see if any of them were logged in by parsing the HTML. You would then be able to do all sorts of nasty stuff, from transferring funds to changing passwords and scraping personal information.
The only time you can access the contents of the iFrame is if the domain, protocol, and ports all match.

Embedded Login Page in website

I'm working on a website that utilizes information from an external website and presents it in a neat chart.
The issue is that the user will have to login to that website in order to see the information (i.e. like logging into facebook).
I'm trying to develop something like embedding the login page of that external website into my website and then have the user login that way (see below)
<object data=http://www.website.com width="600" height="400"> <embed id="test" src=http://www.website.com width="600" height="400"> </embed> Error: Embedded data could not be displayed. </object>
My question is how are you able to know if the user has logged in? In the embedded window, I can log in and see the page but my website doesn't know that I have logged in. Is there a way to actively check the URL of the embedded page to see if has changed (i.e. you have logged in)?
I've tried just refreshing the page but the source link for the embed object is the same.
Thanks
For security/technical reasons, you can't directly retrieve whether or not the user is logged in to some other page unless there's an API, which most social media sites have. If you own the page, you can also build one.
Otherwise, if you have enough traffic available, you can also request the login data via a form that gets submitted to your server and then do some stuff to have the server login to that other website and retrieve the information you wanted. However, that's not feasible in a high-load environment (many users), because of multiple reasons:
The server would have to logout and login very often, which will take up a lot of performance
That would also cause a lot of traffic, as I don't see how you'd retrieve the info once logged in other than requesting some web page and parsing it
Finally, because of all those requests from the same IP in a short window of time, the server of whatever website you're looking at will end up denying you access because you've been spamming it with requests.
Of course, you could use an iframe that hides once the user has logged in (you can detect when it reloads and the hide it via display:none), then parsing its contents, but I doubt that'll work as the access to iframe contents is restricted for security reasons.

Security implications of textarea direct to DOM

I have a requirement to paste text from a textarea into the DOM as a preview area, much like the one you get on Stackoverflow when you make a comment etc.
I allow users to insert any and all html tags, including javascript tags. I know this will allow embedded javascript and flash content etc, but I then remove all of this server side so no other user will see, they just see plain text.
However are there any security issues in letting the user insert these things in there own page?
My guess is there isn't otherwise tools like firebug would be a security risk, but I'm not sure.
However are there any security issues in letting the user insert these things in there own page?
I can't see any - the DOM is freely manipulable in the client's browser, anyway. Whether they do it using a tool like Firebug or your JavaScript function, doesn't matter.
As long as the data isn't shown unfiltered in other users' browsers, I think you're safe doing this.
Actually in rare set of circumstance, it might be an issue. It highly depends on how this particular feature works, but I can imagine making first use of CSRF to 'post' in the preview area some malicious javascript/ajax, and use that to steal cookies, change account password or whatever tickles your fancy.
So the attack would go something like this; I send a user a link to a 'legitimate' website. On that website there is a hidden payload (eg via img tag in case of GET, or hidden iframe with auto-submitting form for POST) which silently redirects the user to your website with the XSS payload, which then will be executed by the user through the injection in the preview area, for instance logging user's cookies, without him ever knowing.
Again it all depends how your preview feature works, and if you for instance use form tokens etc., but the point is that it in fact could be an issue.

Categories

Resources