WYSIWYG etc. in Lift

[Tobias Pfeiffer]

Hi,

in a Lift web application, how can I provide to my users an interface where
they can edit an object of a particular type (e.g., NewsArticle) and have a
field with "Rich Content", i.e. styled text, images, internal links etc.?

In particular I wonder how I could realize internal links (i.e. point to a
different NewsArticle with a warning if the target does not exist) and have a
component where the user can upload images and use them in his text. Is
there any existing solution for that?

Thanks for your help
Tobias

[Olek Swirski]

I don't think there is a built-in thing to do this with Lift, at least
I don't know of any and perhaps this should be something external,
to leave choice open. I think, that probably the way to go would
be to use some JavaScript wysiwyg frontend such as those
mentioned here:
http://blog.insicdesigns.com/2009/07/rounding-up-the-best-javascript-wysiwyg-and-markup-editor/
and then attach lift code to save the result of editing session
to the database. I'm not sure how would it be with placing
pictures, as you also need to upload them to some folder
on server - this part can be more involved. I'm also going to need
this functionality, so if anyone here already dealt with that, please
share your experience/opinion.

[Olek Swirski]

ok, I checked some previous messages on this mailinglist touching
on WYSIWYG & CMS in general and I found references to David Pollak's
Hoisted Content Management System

Can it be used for getting a working WYSIWYG thing?
If yes, please give some details what functionality it has?
If no, what would be the best route to get WYSIWYG functionality.

thank you

Here are some previous threads mentioning Hoisted
http://groups.google.com/group/liftweb/browse_thread/thread/2f7d1ffc03b22891/9f968741c6350e9f?lnk=gst&q=CMS#9f968741c6350e9f
http://groups.google.com/group/liftweb/browse_thread/thread/e3e0d137819c3a3f/dbd8ba122bda6c56?lnk=gst&q=hoisted#dbd8ba122bda6c56

On May 4, 10:26 pm, Olek Swirski <olekswir...@gmail.com> wrote:
> I don't think there is a built-in thing to do this with Lift, at least
> I don't know of any and perhaps this should be something external,
> to leave choice open. I think, that probably the way to go would

> be to use some JavaScriptwysiwygfrontend such as those
> mentioned here:http://blog.insicdesigns.com/2009/07/rounding-up-the-best-javascript-...

[Ben Phelan]

I don't think Hoisted will help you here.  Last time I looked at it it worked off of fairly static XML templates.

There may already be a Lift module somewhere for something like this, otherwise you could put together a solution yourself.

[David Pollak]

I'm going to be adding some Markdown goodness to Hoisted... that may bring things farther along.

--
Lift, the simply functional web framework: http://liftweb.net
Code: http://github.com/lift
Discussion: http://groups.google.com/group/liftweb
Stuck? Help us help you: https://www.assembla.com/wiki/show/liftweb/Posting_example_code

--

Visi.Pro, Cloud Computing for the Rest of Us http://visi.pro

Lift, the simply functional web framework http://liftweb.net

Follow me: http://twitter.com/dpp
Blog: http://goodstuff.im

[Olek Swirski]

Hi David,
I took a quick look at Markdown, seems like a good fit for producing
simple html by a regular site user, without the need to actual know
html. It's not exactly WYSIWYG, but seems lightweight and easy to
use, so it could well satisfy many common scenarios.
Please keep us informed.

[David Pollak]

Please see http://markitup.jaysalvat.com/home/

[Olek Swirski]

ok, this is what I need. hope it won't be too difficult to
integrate with my app :) thx for the hint

[Rouzbeh]

I wish had seen that jQuery plugin sooner. I assume it does emit
proper XHMTL.

Nonetheless, I got ckEditor working in an app here, if anybody is
interested

https://github.com/rfarahmand/lift-editor

Most of the WYSIWYGs do not emit proper XHTML so it was crucial to add
LiftRules.useXhtmlMimeType = false; in the Boot.scala. I wrote about
how its done here:

http://hichhacker.blogspot.ca/2012/05/ckeditor-example-for-lift-web-framework.html

R.

On May 14, 11:16 pm, Olek Swirski <olekswir...@gmail.com> wrote:
> ok, this is what I need. hope it won't be too difficult to
> integrate with my app :) thx for the hint
>
> On 15/05/12 05:09, David Pollak wrote:
>
>
>
>
>
>
>

> > Please seehttp://markitup.jaysalvat.com/home/

>
> > On Mon, May 14, 2012 at 7:55 PM, Olek Swirski <olekswir...@gmail.com
> > <mailto:olekswir...@gmail.com>> wrote:
>
> >     Hi David,
> >     I took a quick look at Markdown, seems like a good fit for producing
> >     simple html by a regular site user, without the need to actual know
> >     html. It's not exactly WYSIWYG, but seems lightweight and easy to
> >     use, so it could well satisfy many common scenarios.
> >     Please keep us informed.
>
> >     On 15/05/12 03:29, David Pollak wrote:
> >>     I'm going to be adding some Markdown goodness to Hoisted... that
> >>     may bring things farther along.
>
> >>     On Mon, May 14, 2012 at 4:50 PM, Ben Phelan <bem...@gmail.com

> >>     <mailto:bem...@gmail.com>> wrote:
>
> >>         I don't think Hoisted will help you here.  Last time I looked
> >>         at it it worked off of fairly static XML templates.
>
> >>         There may already be a Lift module somewhere for something
> >>         like this, otherwise you could put together a solution yourself.
>
> >>         On Monday, May 14, 2012 4:47:48 PM UTC+2, Olek Swirski wrote:
>
> >>             ok, I checked some previous messages on this mailinglist
> >>             touching
> >>             on WYSIWYG & CMS in general and I found references to
> >>             David Pollak's
> >>             Hoisted Content Management System
>
> >>             Can it be used for getting a working WYSIWYG thing?
> >>             If yes, please give some details what functionality it  has?
> >>             If no, what would be the best route to get WYSIWYG
> >>             functionality.
>
> >>             thank you
>
> >>             Here are some previous threads mentioning Hoisted

> >>            http://groups.google.com/group/liftweb/browse_thread/thread/2f7d1ffc0...
> >>             <http://groups.google.com/group/liftweb/browse_thread/thread/2f7d1ffc0...>
>
> >>            http://groups.google.com/group/liftweb/browse_thread/thread/e3e0d1378...
> >>             <http://groups.google.com/group/liftweb/browse_thread/thread/e3e0d1378...>

> >>     Visi.Pro, Cloud Computing for the Rest of Ushttp://visi.pro
> >>     Lift, the simply functional web frameworkhttp://liftweb.net

> >>     Follow me:http://twitter.com/dpp
> >>     Blog:http://goodstuff.im
>
> >>     --
> >>     Lift, the simply functional web framework:http://liftweb.net
> >>     Code:http://github.com/lift
> >>     Discussion:http://groups.google.com/group/liftweb
> >>     Stuck? Help us help you:
> >>    https://www.assembla.com/wiki/show/liftweb/Posting_example_code
> >     --
> >     Lift, the simply functional web framework:http://liftweb.net
> >     Code:http://github.com/lift
> >     Discussion:http://groups.google.com/group/liftweb
> >     Stuck? Help us help you:
> >    https://www.assembla.com/wiki/show/liftweb/Posting_example_code
>
> > --

> > Visi.Pro, Cloud Computing for the Rest of Ushttp://visi.pro
> > Lift, the simply functional web frameworkhttp://liftweb.net

[David Pollak]

It is considered super duper bad from a security perspective to allow a user to send HTML/XHTML and then to send that HTML/XHTML back.  That's a cross site scripting vulnerability waiting to happen.

Lift's Textile module is written such that it white-lists that tags and attributes that are allowed to avoid having anything that can be script-like appear on a page that a user generates.

I appreciate that you are sharing with the community, but I have to strongly, strongly caution people not to use your code or in other ways accept anything that looks like raw HTML and then present that raw HTML on any other page.

Visi.Pro, Cloud Computing for the Rest of Us http://visi.pro

Lift, the simply functional web framework http://liftweb.net

[Olek Swirski]

Hi David,
let say someone enters/edits some stuff through markitup and so
produces some xhtml fragments. what would be best route to
accept this kind of content and make sure it is not dangerous?
In what form should it be stored in the database? (A string field?)
And should it be parsed through some xml pipeline before
accepting? I mean, what I need is give the user possibility to
do some paragraph editing, basic formatting and include some
images or links to other resources. And this newly created content
would need to end up in the database. I should also make sure,
content is proper/safe xhtml. Any hints how to achieve that? :)

[Olek Swirski]

when it comes to images, I would make some separate thing to
upload them, and on completion display the link to the image
to be used within markitup, or maybe append it to the markitup
text field via javascript.
just I'm not sure what form should this created content have,
when it leaves the browser, and how should it be checked at
the server side and stored to keep things safe.

[Olek Swirski]

I'm not sure to what extent I can rely on markitup to produce
safe content, and also someone could always try to modify
what's sent from the browser, so this is why I'm concerned.

[Olek Swirski]

ok, so maybe whatever gets delivered from the browser
could go through same check route, that textile goes
through, to eliminate any attempt to inject scriptlike stuff?

[Tobias Pfeiffer]

Hi,

Am Mittwoch, 16. Mai 2012, 17:26 schrieb Olek Swirski:
> let say someone enters/edits some stuff through markitup and so
> produces some xhtml fragments. what would be best route to
> accept this kind of content and make sure it is not dangerous?

That's a very good question. I guess there are two ways for dealing with
user input:

1. Have them type stuff in Textile, save this data in the database and
process it using Lift's Textile parser on display. If that works as
David just wrote, then it should be impossible to for some attacker to
get malicious HTML being displayed.

2. Have them use whatever XHTML-generating WYSIWYG editor you want, but
before saving it, strip out dangerous elements (i.e. use a similar white
list as the Textile parser). For example, you could use jsoup to make
sure you get some meaningful XHTML with only a few allowed tags.

> In what form should it be stored in the database? (A string field?)

Maybe that's a good opportunity to push
https://www.assembla.com/spaces/liftweb/tickets/1023-mappedxml-field ?

Tobias

[Olek Swirski]

I've seen xml-typed column in postgres at least.
it is said to enforce proper xml format. If xml was
checked anyway by lift before saving to db, then
maybe it makes no substantial difference and
varchar or text could be just as good in this scenario.

So I was actually thinking about approach 2. I
imagine receiving xml/xhtml on the server side and
then allowing just some subset of safe tags, stripping
anything else.

The other way around, there could be a blacklist of
dangerous tags, that are removed, and all the rest
can stay. But here I'm not sure which tags would that
be. Surely <script> & <iframe> but probably <body>
and <html> as well and some more, that maybe are
not dangerous, but just should not appear there.

[Olek Swirski]

allowing <form> to stay would also not be too good :)
and stuff like onclick=" ". so It's not just tags but also
event related attributes, that need to be checked. I guess
white list would more feasible. Or use Textile processor, but
I didn't use it so far, so I'm not sure.

[Olek Swirski]

on markitup website, it is stated "it's not a WYSIWYG" but
anyway I would like to use it. but even if markitup would
produce 100% safe content, before sending from the
browser it may be tampered with and we can receive
something quite different than one would expect.

[Olek Swirski]

or perhaps just text and not xml/xhtml should be sent
from the browser, and then safe xml produced on the
server side by some parser. Is it how it works with
Textile?

[Rouzbeh]

Thanks David and everybody for the feedback. I have added a Warning
and Disclaimer to the code and the blog post and a pointer to this
discussion for now, until I understand how should I fix this:

So I guess here are my questions:

1. Is this the problem with the ckEditor or any editor that forces me
to add LiftRules.useXhtmlMimeType = false; ? Does this bypass some of
the checks that are done automatically by Lift? and now I have to
manually validate the incoming data as suggested above?


2. Is the way that I am doing it is wrong? ( and using ckEditor is
fine)... things like the way I execute a javascript code on the client-
side and fetch the body from the WYSISYG. I see that Olek points out
the [on click] might not be the best way. What is the best way of
doing it? I picked that approach based on this recommendation which I
believe is addressing the same problem: getting data from an editor.
In fact the topic suggests "how to read some data from html page"

https://groups.google.com/group/liftweb/browse_thread/thread/44d9136a1d761432

and the recommendation was:

David Pollak
View profile
More options May 20 2011, 7:16 pm

On Fri, Apr 8, 2011 at 1:11 AM, Lex <lexri...@gmail.com> wrote:
> Seems like ajaxCall is what I need.
> This code works for me:
> "#ajaxSubmit" #> SHtml.ajaxSubmit("Save",process _) &
> "#testSpan [onclick]" #>
> SHtml.ajaxCall(JE.JsRaw("ckeditor.getData()"), { x => value = x;
> println("======>"+x)})
> But how can I execute ajaxCall in ajaxSubmit?

Just change to:
"#ajaxSubmit [onclick]" #> SHtml.ajaxCall(....)


3. Is the way I am making the editor to appear in a form in the
template is not right?


I think these are relevant questions even if I were to pick any other
WYSIWYG.

Any ideas that could help me out here? So far I know that incoming
HTML must be somehow validated, now what I dont know is that if I put
Lift back into XHTML mode, there are less things that I should worry
about.

I am not sure about the latter two though.

Any help or suggestion is much appreciated,

Rouzbeh