I made a website using the famous symfony framework. I wanted to add rich editing feature to it. And I found TinyMCE editor. But there comed a problem: how about the user embed some javascript code into the content? such as alert('hello world').
I tested wordpress, which is a very famous blog software. It faces the same problem. example.
It is no big deal if some one embed an alert script. But what if they embed some dangerous code? Have you encountered the same problem? Should I use markdown instead of html? Any good widget for markdown editing?
It's a good idea to use an existing library to clean out your user input, the html purifier project: http://htmlpurifier.org/ seems maintained and well made.
Don't allow any embedded javascript in your user input. This is easy to clean out either on the client or the server. Have a "white list" of HTML tags you support, and remove any event listener attributes from whatever you do allow.
Related
I'm working on a legacy web app that uses both the rich-text summernote editor, which can save formatted notes to our server, as well as a lot of instances of in-line Javascript.
Summernote can permit writing HTML/CSS/JS via it's "code" view, but doesn't seem to have any built-in support for preventing XSS. If you go to their homepage for instance, go to code-view for the editor, and write <script>alert(0)</script> and turn it back to text-view, it will execute the script. We want users to be able to do things like bold content, insert hyperlinks & images, etc, but no JS or probably even CSS.
We've just discovered the developer who originally implemented XSS protection for these editors in the app did a bit of a weak job, and are now trying to sure it up. Thus far, it seems my options are either: (a) creating/sourcing a whitelist which will parse the Summernote HTML and only allow certain HTML elements in the field; and/or (b) implementing CSP headers and moving all in-line JS / CSS to separate files.
Given it's only these editors that need to be able to return valid HTML to users, the rest of the site we can and do fully sanitize content, is it possible to disable inline JS / CSS in only a section of an HTML page (I.e. the area we load the editor's content to)? Or is that not an option / liable to be susceptible to workarounds?
Edit: Just as a note, I recognize that the rich-text editor can't prevent XSS if we're choosing to save content to the server, as it runs on the client-end. I meant that I couldn't find resources / suggestions regarding HTML whitelists, or example sanitization for various servers via their site.
Edit 2: Will definitely be implementing some sort of whitelist to be on the safe-side (possibly CSP as well, but refactoring will be a headache), but still want to know if this is possible: I.e. between two sections of HTML, is it possible to block all inline JS & CSS?
As I read in this note https://github.com/summernote/summernote/issues/1617
You have to validate at serverside anyway. It's a funny behavior, I
agree, but the user is allowed to do anything in his own browser. The
only thing you (you, and not this package) should taker care of, is
not letting users storing harmful code in your database (which is
later displayed in other users browser)
So, basically you are in charge of what users are trying to put in your database or web page. So you need to:
Make a "server-side" validation of the content (delete <script> tags with content, for example)
Implementing a client-size sanitization (it does not prevent you to make a server-side validation) to help the user notify he is not allowed to include scripts. This could be done while switching between code view and preview (See Summernote event for switch from code view to editor)
In wordpress we have shortcodes that let us place info inside html without using any programming like php or javascript. That's a great feature, as it allow us to be safer when we need to do simple things.
Example (Not real, just an example!), let's say I have the following text The current user is [myusername], and is allowed to do all sort of things in the website. inserted in WYSIWYG editor, while editing an article, then I save and open the article on the site's frontpage, here's what I get:
The current user is admin, and is allowed to do all sort of things
in the website.
Get it?
I wonder if joomla has something like that too. Any ideas?
UPDATE: The only shortcodes I know in Joomla are template related and are for styling only.
Natively Joomla! (3.4) doesn't implement shortcode in content input.
However, you can easily add this feature with an extension. If you google something like "joomla extension shortcode" you will find multiple solutions. Shortcode Ultimate seems to be what you are looking for.
Moreover, some extensions propose their own shortcode system (for example the excellent component for newsletter, Acymailing) for their particular purpose.
I would like to generate a PDF portfolio using JS from an HTML/CSS page on a local machine. I would use a PDF template file which includes a PDF portfolio Navigator in SWF form. I have successfully accomplished this using C# and a command line program, but can not identify the proper Javascipt components to do this browser-side or pseuo-server with Node.js. Basically, I am looking for something which will allow me to append a PDF to a new or existing PDF via configuration choices and an 'assemble' action using a JS or HTML button. iTextSharp provides the required PDF interaction functionality, but I can not figure out to run this inside an HTML to allow configuration via the HTML/CSS DOM (i.e. checkboxes, text field desciptors, etc...). Does a library with this type of functionality exist?
So you want to create a PDF using JavaScript?
On a quick google search, I found what appears to be a javascript library for creating and manipulating PDFs call jsPDF
If you want information on how to upload files with JavaScript alone, here is an article on how to do that. It also shows you how to use the file element.
For style, I recommend using a CSS Framework is you don't know much about CSS. I personally use Twitter Bootstrap for quickly prototyping things. It's quick and easy, and has good documentation. You can also use this to see how to make a form in HTML. I haven't got any good starter tutorials for HTML off the top of my list, sorry.
If you don't know much about JavaScript, when it comes to getting the options from the form, so that you can use them as configuration options, I'd suggest using the jQuery framework. It'll help you get up and running quickly enough
Note, all of this shouldn't replace basic training in JavaScript and HTML/CSS. Frameworks make things simpler, but if you don't know how to do something without a framework, you're going to have a hard time with a lot of the more complicated things. This goes for every language
The story is - I'd like to make some changes on my Blogger template but I don't want to do it in a way it could make my readers see what I'm doing.
So, I was thinking about using Greasemonkey or some kind of Firefox add-on to replace all the code in template just for current session and my browser since I'm the one using the script/add-on.
Is there a way to remove all the HTML visible in Bloggers's Template Edit HTML with one I provide in script?
Thanks!
It is always better to create a test blog for experimenting with designs. This is what almost all the webmasters do. You may also use some offline editors such as Adobe Dreamweaver.
Rich text editors are commonly implemented as plugins to CMS sites made with joomla, wordpress etc, but can these be used to work with a website that someone makes from scratch with just html php javascript and the works?
Most CMSes implement a rich text editor like CKEditor. This is written in JavaScript and can be implemented in any web application - for example by using html php and javascript as you suggest.
Check out their website for more info and examples on how to implement it.
Yes. Check out TinyMCE.
Quoting the website:
"TinyMCE is a platform independent web based Javascript HTML WYSIWYG"
Sure... take a look at the following links:
http://www.tinymce.com/
http://ckeditor.com/
Yes it is. and if you're looking for one, I suggest http://ckeditor.com/