Glen on Programming: html

Thursday, April 15, 2010

POST vs. GET for HTML Form Security (and The Back Button)

At the last GreenJUG meeting, we talked about how you should always use POST instead of GET for any secure web sites. But when you use a POST form on an HTTPS site, navigate away, and click the Back button (on Internet Explorer), you get "The web page you requested is no longer available - try refreshing..." It essentially breaks the back button which UI designers will tell you never to do.

So for me, the rule is, for any view-forms (where the form sends selection criteria for what the user wants to view), make them GET. Such forms tend to submit only the ID number of whatever they are pulling from the database, usually do not involve entering sensitive information, and should work when the users navigates away and uses the back-button. For update forms (where the user submits new data or changes old data) make them POST because it's good to prevent accidental resubmittion and because people tend to enter private and proprietary information on such forms.

Friday, September 25, 2009

Alternative for spacer.gif in cross-browser standards-compliant html

Instead of spacer.gif I use:

CSS:
.spacer2px{font-size:2px;line-height:2px;}

HTML:
<div class="spacer2px"> </div>

Works with <td> as well. We have spacer1px, spacer4px, spacer6px, etc. as needed. Works the same on all browsers, so long as each HTML page starts with the following, which keeps IE from entering quirks mode and makes it as standards compliant as it gets (requires no blank lines until after the opening HTML tag):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    ... headers ...

<body>
    <div id="page">

    ... content goes here ...

    </div>
</body>

We currently have two lines of browser-specific code in the entire application, and they are both in the CSS file:

/* This sets defaults for all elements and helps overcome browser differences */
* {
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
 /* -moz-box-sizing: border-box; Firefox used to need this */
}

/* Add space for scrollbar on IE 6 so it doesn't obscure the page.
This uses the Commented Backslash Hack so only IE can see this: \*/
#page { margin-right: 16px; }
/* End Hack */

Well, that's my recipe that I've been using for 5-6 years now. Tested on IE 6, 7, 8, 9, Firefox 2, 3, Safari 3, 4, Chrome, Opera 9, Epiphany, Konqueror and on Windows XP, Windows 7, Mac OS-X, the iPhone, and Linux (Ubuntu/Xubuntu).

Special thanks to quirksmode.org for probably being the best resource for these kind of details. The O'Reilly CSS: The Definitive Guide and HTML & XHTML: The Definitive Guide books are great for the basic rules.