I am making a website which allows users to create ads, apps, etc. Think of it like Adsense for ads and Facebook apps for apps.
So, I am allowing the users to create ads or apps the way they want using either tools provided or through their own HTML code which will then be rendered as ads and apps in the website for other users to see.
My Problem:
1) When I allow users to add their own code which is to be embedded in the website, am I exposing my website to security risks? (I am not sure but I think they will be able to add some malicious code in javascript)
2) If I think of isolating the embedded code from rest of the website using Iframes, will that be a problem or is there any better way to do this?
What I want to achieve:
Some sort of element to render user generated custom HTML, CSS code in a website without affecting security.
Depending on the types of ads or apps they are allowed to make and what languages they can use you can be at risk in a few ways especially if other users can see it.
Let's assume they can use html and they add this code
<img src='fake.jpg' onerror='alert("xss");'>
In this scenario all of your users who can see this are exposed to an xss attack. If this is the case, see this post -> How can I allow my user to insert HTML code, without risks?
I would not recommend server side languages and while iframes may inherently be more secure, the same thing applies, especially if your domain hosts the iframe. If the iframe src is on the same domain as where the iframe is displayed you can toss out any security iframes may pretend to offer.
The best solution is to offer your own wysiwyg editor where your special codes are turned into html code. Allowing JS is going to be something you want to consider doing in a safe way, this could be done through creating your own wrapper (even wrapping a series of jquery functions in a wrapper) and including them in your wysiwyg cleverly.
Related
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.
Quite a few of the sites that the schools I work in use have user accounts to protect the content from people who haven't paid for it which means that the users (aged 5+) have to type in some pretty weird usernames/passwords before they can do their work.
I was wondering if it possible to use Javascript to create a page that would let me do something along the lines of:
Fetch the Login Page
Fill out the form
Submit It
Redirect the user to the site
1-3 would happen in the background without the user seeing it.
In most cases these accounts are shared and the details are on displays etc... in the classrooms so there is no issue with the details being publicly accessible.
I have used Mechanize in ruby before and would imagine a solution like it but running client side.
I know that some inspection of the target site will be needed but once I have an in-principle example I should be able to tailor it to each site later.
If you have a standardized browser, you should consider building a plugin for that browser, that's the easiest way to interact with the web pages. Otherwise you'll get into issues with anti-CSRF protections and cross-domain-policies.
As for the language, Chrome extensions are written in javascript and are pretty easy to build. For the other browsers I don't know.
I want know if you can guide to users for a series of steps that imply visit different web pages using actions inside a Bookmarklet. What I want is a kind of Wizard or automated actions cross web pages.
Afraid not. What you're describing would actually be very dangerous. If there were any malicious code in the bookmarklet, it would have access to every site you are logged into, email, amazon etc. Some pseudocode for an attack could look like this:
window.location = "www.gmail.com";
ajax.post("www.gmail.com/deleteAllMail");
window.location = "www.amazon.com";
ajax.post("www.amazon.com/buyReallyExpensiveStuff");
You partially can, if you open the new pages inside an iframe. However, you won't be able to modifying the content of the webpages anymore, but just modifying the url of the iframe, and going through different websites (like a kind of slideshow).
Notice that if you're the owner of the pages, you can use postMessage to interact with them, even if they're in different domains.
Or, you could do a "tunneling" on server side, and inject each team you got the page back with the JS you need.
But probably the cleanest approach if you're not the owner of the pages is just create a simple restartless add-on for the browsers you want to support.
I am about to build a web application and I want to allow other developers extend it with their own applications.
Should I do this with iFrames like Facebook?
Is this a good practice?
Are there other alternatives that let other developers extend my application (that is for the user it looks like it's from my application).
To be specific:
I want developers to be able to code applications that is embedded on my web application. Eg. if I have a file on my application they could provide a way for the users to interact with that file. Maybe a "preview" application that let the users preview the file.
Another application might draw a mindmap tree view of all the user's files.
What is the best way of doing this?
iFrame + Restful API on backend for data exchange?
Let them insert javascript on backend + frontend + html + css on my web application?
Other alternatives?
If you meant "embed" rather than "extend" and you just want people to drop a little box on a page and that's it, then an iframe should be fine.
However, if you want two-way communication or mashupability — rather than "opaque blob of HTML and hope for the best" communication — then a JavaScript or REST API might be a better call.
More specifics would make for an easier answer. If the functionality you need is on the level of an embedded ad or stackoverlflow flair then an iframe would work, if the functionality is more along the lines of a Google Map then an API of some sort would work better.
It depends on what you mean by "extend". When you use iFrames with 3rd parties, presumably vended from different domains than the host page, then you are constrained by cross-domain issues and cannot interact with the contents of those iFrames. If that's not an issue for you, then you can go ahead and try that strategy, but I can't see how merely adding iFrames without interopability is "extending" your web application.
I need to be allow content from our site to be embeded in other users web sites.
The conent will be chargeable so I need to keep it secure but one of the requirements is that the subscribing web site only needs to drop some javascript into their page.
It looks like the only way to secure our content is to check the url of the page hosting our javascript matches the subscribing site. Is there any other way to do this given that we don't know the client browsers who will be hitting the subscribing sites?
Is the best way to do this to supply a javascript include file that populates a known page element when the page loads? I'm thinking of using jquery so the include file would first call in jquery (checking if it's already loaded and using some sort of namespace protection), then on page load populate the given element.
I'd like to include a stylesheet as well if possible to style the element but I'm not sure if I can load this along with the javascript.
Does this sound like a reasonable approach? Is there anything else I should consider?
Thanks in advance,
Mike
It looks like the only way to secure our content is to check the url of the page hosting our javascript matches the subscribing site.
Ah, but in client-side or server-side code?
They both have their disadvantages. Doing it with server-side code is unreliable because some browsers won't be passing a Referer header at all, and if you want to stop caches keeping a copy of the script, preventing the Referer-check from taking place, you have to serve with nocache or Vary: Referer headers, which would harm performance.
On the other hand, with client-side checks in the script you return, you can't be sure your environment you're running in hasn't been sabotaged. For example if your inclusion script tag was like:
<script src="http://include.example.com/includescript?myid=123"></script>
and your server-side script looked up 123 as being the ID for a customer using the domain customersite.foo, it might respond with the script:
if (location.host.slice(-16)==='customersite.foo') {
// main body of script
} else {
alert('Sorry, this site is not licensed to include content from example.com');
}
Which seems simple enough, except that the including site might have replaced String.prototype.slice with a function that always returned customersite.foo. Or various other functions used in the body of the script might be suspect.
Including a <script> from another security context cuts both ways: the including-site has to trust the source-site not to do anything bad in their security context like steal end-user passwords or replace the page with a big goatse; but equally, the source-site's code is only a guest in the including-site's potentially-maliciously-customised security context. So a measure of trust must exist between the two parties wherever one site includes script from another; the domain-checking will never be a 100% foolproof security mechanism.
I'd like to include a stylesheet as well if possible to style the element but I'm not sure if I can load this along with the javascript.
You can certainly add stylesheet elements to the document's head element, but you would need some strong namespacing to ensure it didn't interfere with other page styles. You might prefer to use inline styles for simplicity and to avoid specificity-interference from the page's main style sheet.
It depends really whether you want your generated content to be part of the host page (in which case you might prefer to let the including site deal with what styles they wanted for it themselves), or whether you want it to stand alone, unaffected by context (in which case you would probably be better off putting your content in an <iframe> with its own styles).
I'm thinking of using jquery so the include file would first call in jquery
I would try to avoid pulling jQuery into the host page. Even with noconflict there are ways it can conflict with other scripts that are not expecting it to be present, especially complex scripts like other frameworks. Running two frameworks on the same page is a recipe for weird errors.
(If you took the <iframe> route, on the other hand, you get your own scripting context to play with, so it wouldn't be a problem there.)
You can store the users domain, and a key within your local database. That, or the key can be an encrypted version of the domain to keep you from having to do a database lookup. Either one of these can determine whether you should respond to the request or not.
If the request is valid, you can send your data back out to the user. This data can indeed load in jQuery and and additional CSS reference.
Related:
How to load up CSS files using Javascript?
check if jquery has been loaded, then load it if false