Should I remove all CSS while sending HTML emails in Django? - django

I have a Django-powered WebApp that occasionally needs to send pretty HTML emails to my users.
I'm learning how to send HTML emails using Django. Here are the instructions I'm following. They are quite simple and good: http://www.djangofoo.com/250/sending-html-email
By following these instructions I'm able to send HTML emails. However, the emails I want to send should share the styles and look-and-feel of my webApp of course. Each Django template on my website includes a bunch of CSS at the top that ensures a consistent look. However, when I simply send that template as and HTML emails, the styles do not kick in in the email. Does CSS not work while sending HTML emails through Django?? Do I need to manually and explicitly set the fonts, colors, bold, italics, of each element in the HTML template I would like to use for the email? How do other people do this?

CSS is very difficult to get right with html emails... The general rule is to use inline styles and try to stay as basic as possible.
This SO question has some good resources in it for guidance on designing html emails.

Instead of manually setting all styles in the email, I tend to use the same CSS styles as the site if I want emails that should be pretty. However, emails need the styles inlined, and for that I use the inlinestyler module, which will take the HTML and the CSS files and set the relevant styles inline before sending the email.
There are still some things to think about, if you are careless you get gigantic emails because you use big style settings everywhere, and many email clients will not do positioning correctly etc. so you may have to make custom CSS styles for your emails anyway. But even if you do, inlinestyler is useful, as you get much more maintainable emails with the CSS and the HTML separate.

CSS is supported by some email clients, and not supported by others. Some clients support inline styles and others do not. You can see a fairly verbose list here. Most of what can be done with HTML/CSS can be done with inline styles and (gasp) table layouts, but some of it is simply impossible. Tools like the one #Lennart mentioned are invaluable, but "just inline everything" doesn't accommodate for a number of issues. (Pseudo classes comes to mind as a major point (a:hover is supported by Outlook, while .classname:hover is not), as does background image (there is a hack to make that work though)).
I guess that my basic point is that you can try to shortcut the process by using inlinestyler or similar, but you are going to need to keep a separate set of files, and you'll definitely be doing a series of manual tweaks.

I think you will find that email clients will not retrieve the css.
Instead, in your email, put the contents of your CSS files directly into the email, with <style> and </style> around it.

Related

xss prevention with ckeditor

My situation is a little bit different, I'm using CKEditor for both editing and displaying things, and the submitted string will only be shown inside CKEditor, nowhere else.
I tried this XSS:
<IMG """><SCRIPT>alert("XSS")</SCRIPT>">
I added this to the database directly from backend, not by CKEditor since I know it doesn't matter what CKEditor does before going into the database as the attacker could always send some raw http request without dealing with CKEditor.
To my surprise CKEditor shows me this:
{cke_protected_1}">
So CKEditor is doing something to prevent XSS, and I realized that the XSS security could be achieved from client side.
My question is, how good is CKEditor doing and if it's reliable if I only use no-attribute tags plus
<a><img><table><span><pre>
(<a> and <table> could be disabled if it makes things easier)
PS: The CKEditor is using default settings.
You should protect against XSS on the server side. If you have this possibility, just strip any unsafe data before saving it.
Note that wysiwyg editors must protect somehow JavaScript code included in edited HTML, in order to not destroy edited contents, which includes e.g. hiding in Wysiwyg mode <script> tags or changing onclick event handlers into "data-" attributes.
{cke_protected_1} is a result of an attempt to hide the <script> tag by CKEditor, that did not work entirely properly because of a bit "hackish" HTML taken from XSS Cheat Sheet.
The partial built-in protection in wysiwyg editors should not be considered as a replacement for a server side protection against XSS.

Is Django design as good without css3 + html 5?

I've had a look at some really good website layout and design using Django, pinterest, (former)curse, disqus, and the django design template lpoks impressive.
Was just pondering thoughts as to were it is necessary to add css3 or html5 to enhance page design and interaction or would using Django features for eg. divs and headers, boxing text good enough or even better visually.
Lets for argument sake, say we are developing an extensive auction site like e-bay or networking site like facebook.
Django doesn't have any design. There is zero front-end included, so that if you made a template page and added divs/headers/whatnot in there it would have absolutely no custom formatting whatsoever beyond the specifications of vanilla HTML.
So if you want to design a site like Pinterest you'll definitely need your own CSS and HTML.
So, django make a view with HTML and CSS (you will have some div..) but no div will be declared and you will have a white page withall things aligned to left..
It is not complicated, if you want a beautiful site (or just not hugly :)) you will need both html and css, but not last versions if you don't wand (but its better..)

System for generating websites

I searched...can't find any good references. I have what I think is a pretty simple question: What are the basic concepts behind a system that allows customers to specify and generate a website, from a choice of style templates?
Say for example I created a simple website consisting of four static HTML pages. I can make those pages look like anything I want by using different CSS templates...good.
But if I wanted to give my clients an interface that says "hit this button and your site will be generated" -- I don't know what the basics are underneath that idea to make it happen. Is it simply a matter of creating the directories and copying files?
Before I go down a dumb path I just need some general guidance about how this type of thing is usually done. There are notable services out there that offer people the ability to sign up for an account, and in "three easy steps" generate a simple website. I want to learn the theory and basics behind how that is done.
Thanks...
EDIT:
I know how to change an existing set of static HTML pages using CSS. What I want to do is build a true website generator. You log into my system, pick a theme, hit a button and your site (e.g. www.foo.com or foo.parentsite.com) is ready to use. I can figure out how to allow customers to change content -- by integrating tinyMCE for example. I just need the basic concepts behind the "hit a button...generate a new site" idea.
You can change with javascript the css used. This will change the looks of the current page.
But you need to make multiple css with an unique look.
I suggest you to make a generic css and add the theme of your site into a small css.
The small one should contain only what is unique with this theme.
generic.css => Place content,menu, footer, etc...
theme1.css => Change background color to red, change text color to blue, etc
theme2.css => Change background color to blue, change text color to blue, etc
theme3.css => Change background color to blue, change text color to red, etc
JQuery Ui allow to change his interface easily.
Check this and change selected gallery on left
I don't think you can generate an website than customer will be very satisfy.
There's always something than client want to change.
EDIT:
You need to create folder on the server.
Put all necessary file with his selected themes into the folder
Configure apache for his domain. Then reload it for the new config.
I suggest you to use PHP or cgi.
The thing I don't know how is to register the domain if available and how to redirect his domain to your ip easily and automated.
Found something else tonight: There is a full set of APIs that can be used to gain access to cPanel functionality. So, almost literally, using their PHP wrapper it looks like only a few lines of code to instantiate a subdomain, set up email accounts, domain pointers, etc.
Looks promising...but being a total noob I have a lot of reading to do...

ColdFusion how to Prevent XSS Attacks in a WYSIWYG

I have a WYsIWYG editor in my coldfusion app and need to prevent XSS Attacks. Is there any Coldfusion ways to strip out all script type attacks?
http://blog.pengoworks.com/index.cfm/2008/1/3/Using-AntiSamy-to-protect-your-CFM-pages-from-XSS-hacks
http://code.google.com/p/owaspantisamy/downloads/list
The main question I would ask is what is this WYSIWYG for? Many WYSIWYG's allow you to define specific tags to have stripped out of the code.
For instance you can have TinyMCE strip out the script tags with
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/invalid_elements
This unfortunately does not solve your problem since all client side data form submissions are circumventable. If you must use a WYSIWYG ,then what you really need to make sure to do is to cover all your bases on the form's validation and display. You can strip out all script tags and make sure to remove any event attributes and javascript code in links href attributes.
If it is acceptable to only allow a specific subset of tags I would suggest either using BBML, BBCode, or Markdown.
http://www.depressedpress.com/Content/Development/ColdFusion/Extensions/DP_ParseBBML/Index.cfm
http://en.wikipedia.org/wiki/BBCode
http://sebduggan.com/projects/cfxmarkdown
You can use TinyMCE as a WYSIWYG for BBCode http://tinymce.moxiecode.com/examples/example_09.php and StackOverflow uses a great markdown editor http://github.com/cky/wmd
Here is some good info if you would like to render BBCode in Coldfusion
http://www.sitepoint.com/forums/showthread.php?t=248040
Something to consider is that while stripping the tags out in the browser with TinyMCE is a good idea, it makes a fatal assumption that the user is going to be submitting content via the browser. Anything that you do in the browser needs to be duplicated on the server because attackers can bypass any validation that happens in the browser.
With that said check this article: http://www.fusionauthority.com/techniques/3908-how-to-strip-tags-in-three-easy-lessons.htm which spells this out in more detail than I could here. Basically it discusses using regex and UDFs to strip tags out easily. The last example is particularly important... check it out.
To convert these tags <> or use HTMLEditformat function.

How do use fckEditor safely, without risk of cross site scripting?

This link describes an exploit into my app using fckEditor:
http://knitinr.blogspot.com/2008/07/script-exploit-via-fckeditor.html
How do I make my app secure while still using fckEditor? Is it an fckEditor configuration? Is it some processing I'm supposed to do server-side after I grab the text from fckEditor?
It's a puzzle because fckEditor USES html tags for its formatting, so I can't just HTML encode when I display back the text.
Sanitize html server-side, no other choice. For PHP it would be HTML Purifier, for .NET I don't know. It's tricky to sanitize HTML - it's not sufficient to strip script tags, you also have to watch out for on* event handlers and even more, thanks to stupidities of IE for example.
Also with custom html and css it's easy to hijack look and layout of your site - using overlay (absolutely positioned) which covers all screen etc. Be prepared for that.
The bug is not actually FCKeditors fault. As long as you let users edit HTML that will be displayed on your web site they will always have to possibility to do harm unless you check the data before you output it.
Some people use HTMLencoding to do this, but that will destroy all the formatting done by FCKeditor, not what you want.
Maybe you can use the Microsoft Anti-Cross Site Scripting Library. Samples on MSDN
Is it some processing I'm supposed to do server-side after I grab the text from fckEditor?
Precisely. StackOverflow had some early issues related to this as well. The easiest way to solve it is to use an HTML library to parse user's input, and then escape any tags you don't want in the output. Do this as a post-processing step when printing to the page -- the data in the database should be the exact same as what the user typed in.
For example, if the user enters <b><script>evil here</script></b>, your code would translate it to <b><script>evil here</script></b> before rendering the page.
And do not use regular expressions for solving this, that's just an invitation for somebody clever to break it again.
FCKEditor can be configured to use only a few tags. You will need to encode everything except for those few tags.
Those tags are: <strong> <em> <u> <ol> <ul> <li> <p> <blockquote> <font> <span>.
The font tag only should have face and size attributes.
The span tag should only have a class attribute.
No other attributes should be allowed for these tags.
I understand the DONTS. I'm lacking a DO.
Is use of FCKEditor a requirement, or can you use a different editor/markup language? I advise using Markdown and WMD Editor, the same language used by StackOverflow. The Markdown library for .NET should have an option to escape all HTML tags -- be sure to turn it on.
XSS is a tricky thing. I suggest some reading:
Is HTML a Humane Markup Language?
Safe HTML and XSS
Anyway, my summary is when it comes down to it, you have to only allow in strictly accepted items; you can't reject known exploit vectors because or you'll always be behind the eternal struggle.
I think the issue raised by some is not that Fckeditor only encodes a few tags. This is a naive assumption that an evil user will use the Fckeditor to write his malice. The tools that allow manual changing of input are legion.
I treat all user data as tainted; and use Markdown to convert text to HTML. It sanitizes any HTML found in the text, which reduces malice.