jquerymobile user html widget - jquery-mobile

I am working on porting a legacy application (runs on IE 6/compatibility) using jQueryMobile. In the legacy app, they let the user use HTML to format their text for display. I understand that when rendered, they use iFrames so that when the user's HTML doesn't break the whole page (and lose navigation controls etc..,) So the HTML is not always 'clean', but only messes up display in a localized way.
I'm looking for a widget or something that I can pass it a string that may or may not be good HTML, and it will contain any display problems to that area and not break the whole page.
Every user able to enter the HTML has to log into the system, and all changes are logged by user, so we are not concerned about them trying to enter malicious HTML, we just want to protect them from honest mistakes and 'really old' deprecated HTML. And because we run offline (appcache/local database) we don't want to force them to go back to the server and reload data just because they made a mistake with their HTML.

Related

How to safely insert to and display html text from database

I am inserting html in database for the first time so I need some advice am I making it right and safe.
I have class with property:
[AllowHtml] public property Description {get;set}
In View I have a tinyMCE (on text area) where user input his data.
When I display that html later I use:
#Html.Raw(Model.Description)
I don't know should I do something else to prevent some attack on site.
I have tried to input:
<script>alert('attack');</script>
but nothing happens it saves it in database and display as a normal text later.
Also I wonder if user leave some tag unclosed can he break my layout somehow.
What are smart steps when dealing with scenario like this?
What should happen is that the html should be encoded before it is written to the database. If you look in your database you should see something like this (or at least if things are safe you should):
<script>alert('attack');</script>
Now when this is written to the page by html raw, it appear on screen as it did when it was submitted, but if you inspect the page you will still see the same thing.
ASP.Net actually makes it very difficult to write code that opens your site up to abuse, so you should generally be fine. It is worth doing some more reading around the topic though as it's good stuff to be aware of especially if mentoring others.
Some links:
Preventing Javascript and XSS attacks
http://msdn.microsoft.com/en-us/library/ff649310.aspx
You can use the Microsoft AntiXSS from the Windows Protection Library.
TinyMCE, AntiXSS, MVC3 and GetSafeHtmlFragment
Cheers.

detecting a change in the page including refresh

so i am working in a .tpl file meaning i am open to js, html and php answers. what i want to do is whenever a person refreshes the page, experience a change in the url or exits the browser, my site would take an action based on this change of state. so basically, when they leave that specific page of mines in any way, i would call a function. the reason i want this is because i am saving this editable image on my site. but whenever they leave the page, i want the image the created to be autosaved.
this task splits into client-side and server-side parts. At client side you should bind to interesting browser events, triggering some background http requests to some service URLs of your website, this is probably JS. At the server side, you should provide corresponding reaction to these requests, which is probably PHP.
As long as these service URLs are to be called intermittently by various visitors, be sure to keep an eye on what request came from which client's window. PHP sessions should help you.
I'd propose to work this separately, first to get saving machinery working -- just bind everything to explicit big buttons at the page (page close, url change, etc), then replace each button with the binding to exact JS event. Keep in mind differencies among browsers.

How can I support user edited content in a complex web application?

I'm building a web site (using ASP.NET, MVC 3, Razor) and I'm not using an off the shelf CMS. This is because I evaluated a lot of existing CMS's, and found them all to have a massive learning curve, tons of features I didn't need, and they force you into a page oriented model. By "page oriented model", I mean that you can specify a general page layout and stylesheets, but the object that the user can edit is a whole page, which displays, for example, in a central panel, and maybe you can customize the sidebars as well.
But this site is very design centric, and needs to be much more fluid and granular than this. By "design-centric", I mean that the site was built in Photoshop by a graphic designer, and there is heavy use of images and complex styling to map the design to HTML/css/js. Also, every page on the site is totally different. There are also UI elements such as accordion panels, in which we need the user to be able to edit the content of each panel, but certainly not the jQuery+HTML that powers the accordion. The users are subject matter experts but very non-technical.
So I'll have a page with lots of complex layout and styling, which I don't want the user to access, but within this there will be, say, a div containing text that I would like the user to be able to edit.
How can I best accomplish this?
So far, I'm implementing this by having snippets, which are little units of html, stored in external files, that the user can edit. In run mode, these are loaded and displayed inline (with a little "Edit This Content" button if you're logged in and have permissions). If you click the Edit button, you get a little WYSIWYG editing screen, where you can edit and save changes. So I can control all the messy stuff, and put in little placeholders for user editable content. But this isn't entirely simple for me, and I'm wondering if there's a better way.
Don't mean to necro this, but it seems to be the most relevant question to what I'm currently researching. I recently built something similar as you described above, but I'm pulling data from a database instead of static files. For each page (like /about or /contact) in the Controller I pull data for that page from the DB in the form of a Json string key/value pair. Key is the placeholder tag, Value is the.. value. After deserializing, I simply populate a list and assign it to a ViewBag, then in the CSHTML I ViewBag.List.Keyname to grab the text.
I have a small admin control panel which allows me to modify the text in the database. Having little hover-overs like you do is a great idea though!
Well, I stuck with my original plan:
So far, I'm implementing this by having snippets, which are little
units of html, stored in external files, that the user can edit. In
run mode, these are loaded and displayed inline (with a little "Edit
This Content" button if you're logged in and have permissions). If you
click the Edit button, you get a little WYSIWYG editing screen, where
you can edit and save changes. So I can control all the messy stuff,
and put in little placeholders for user editable content. But this
isn't entirely simple for me, and I'm wondering if there's a better
way.
It works reasonably well for now.

JQuery Mobile - constant url with native back button support

I'm working on a JQM app that has multiple pages, most of which can be automatically generated based on the data they need to display.
I'm using ajax calls to pull-in the json and moustache to generate the html. So far so good.
I wanted to avoid having the url change with every transition because not only does this interfere with the notion of an "app", but it also causes not a small amount of havoc should the user refresh a "sub" page.
So I handle all the page transitions directly with $.mobile.changePage, which allows me to set changeHash to false.
The problem is that when the user hits the browser back button they are taken out of the app.
Is there a way to keep a constant url in the browser bar and still have native back button support?

Flash and ASP.NET MVC to post data to server

what design approach would you take for security and scalability (and perhaps level of effort) when posting an ASP.NET MVC HTML form that also has a Flash component, as described in the scenario below?
I have a scenario where there's an ASP.NET MVC site, and a page that requires user authentication & authorization to access (using ASP.NET forms authentication). On that page there's an HTML form. The form also has a Flash component. The form has a few text fields, and the Flash component has binary data that needs to get submitted to the server in tandem with the HTML form fields. When the user hits the submit button on the HTML form, the form contents and binary data from the Flash need to get submitted as part of one atomic unit, so to speak.
I know that I can use HTML / Flash JavaScript bridging to post the form either through JavaScript, or through the Flash component. I could even do both, perhaps posting the binary data from the Flash component when the user clicks submit, and then posting the HTML form content following that.
From your experience, what approach would be the path of least resistance to post the form with? Considering the user authentication and authorization part, I imagine that Flash would higher effort than HTML. What about the user authentication aspect? If the page posted from Flash to the server, would Flash also have to authenticate the user, in addition to the standard HTML authentication form?
My Flash binary data should not typically be greater than 300KB, often less...any opinions / insights are greatly appreciated!
EDIT:
I also vaguely remember that with Flash 10.1, ExternalInterface seemed to not work right when transferring binary data to JavaScript, am I mistaken with that, and that you can easily transfer 300KB or more of binary data from Flash to a JavaScript variable that is then posted to the server?
Thanks!
That's one way of doing it:
Make your flash component call a javascript function through ExternalInterface.call().
Make the called javascript function change a hidden field inside the form.
When the form is posted, the hidden field will send the desired value to the server.
I guess this is also the safest way - since the Flash component will not communicate with the server. Everything you need is a standard, non-AJAX form post.
Edit
Sorry, I guess I should have paid more attention... If there is too much data being sent from the flash component, maybe you should post it directly to the server.
Still, you could use ExternalInterface to synchronize the whole process. Make Flash call a server-side method (I would use FluorineFX for that, but your opinion may vary). Then .NET will return an ID, meaning it has received and saved the binary data for future use. Then call ExternalInterface to set that ID to a hidden field. After that, when the HTML is posted to the server, the server-side action method just need to retrieve the binary data using the posted ID...
The problem here is that you will end up with some binary data that will never be associated to any form post... But that's OK I guess, just run some "garbage-collector" script from time to time.
About the authentication issue: FluorineFX does implement .NET authentication, and it is able to retrieve the current logged in user. Of course, there are some issues.

Resources