惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Attack and Defense Labs
Attack and Defense Labs
N
News and Events Feed by Topic
L
LINUX DO - 热门话题
PCI Perspectives
PCI Perspectives
www.infosecurity-magazine.com
www.infosecurity-magazine.com
爱范儿
爱范儿
D
DataBreaches.Net
Simon Willison's Weblog
Simon Willison's Weblog
S
Secure Thoughts
S
SegmentFault 最新的问题
博客园 - 【当耐特】
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 叶小钗
P
Proofpoint News Feed
The Hacker News
The Hacker News
T
ThreatConnect
N
News and Events Feed by Topic
T
Threatpost
The Register - Security
The Register - Security
WordPress大学
WordPress大学
博客园 - Franky
Recorded Future
Recorded Future
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Project Zero
Project Zero
大猫的无限游戏
大猫的无限游戏
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
罗磊的独立博客
Stack Overflow Blog
Stack Overflow Blog
腾讯CDC
F
Future of Privacy Forum
F
Full Disclosure
Cyberwarzone
Cyberwarzone
J
Java Code Geeks
李成银的技术随笔
Schneier on Security
Schneier on Security
Know Your Adversary
Know Your Adversary
H
Hacker News: Front Page
人人都是产品经理
人人都是产品经理
博客园_首页
Scott Helme
Scott Helme
Google DeepMind News
Google DeepMind News
美团技术团队
Malwarebytes
Malwarebytes
Last Week in AI
Last Week in AI
T
Tailwind CSS Blog
T
The Exploit Database - CXSecurity.com
G
GRAHAM CLULEY
Recent Announcements
Recent Announcements
C
CXSECURITY Database RSS Feed - CXSecurity.com

CSS-Tricks

Revealing Text With CSS letter-spacing | CSS-Tricks Technical Writing in the AI Age | CSS-Tricks Cross-Document View Transitions: Scaling Across Hundreds of Elements | CSS-Tricks Cross-Document View Transitions: Scaling Across Hundreds of Elements | CSS-Tricks The State of CSS Centering in 2026 | CSS-Tricks Stack Overflow: When We Stop Asking | CSS-Tricks Cross-Document View Transitions: The Gotchas Nobody Mentions | CSS-Tricks What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More | CSS-Tricks Computing and Displaying Discounted Prices in CSS | CSS-Tricks rotateX() | CSS-Tricks rotateY() | CSS-Tricks rotateZ() | CSS-Tricks rotate() | CSS-Tricks Soon We Can Finally Banish JavaScript to the ShadowRealm | CSS-Tricks Using CSS corner-shape For Folded Corners | CSS-Tricks A Scrollytelling Gift for Mum on Mother’s Day 2026 | CSS-Tricks Google’s Prompt API | CSS-Tricks Making Zigzag CSS Layouts With a Grid + Transform Trick | CSS-Tricks Fixed-Height Cards: More Fragile Than They Look | CSS-Tricks What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More | CSS-Tricks The Importance of Native Randomness in CSS | CSS-Tricks contrast() | CSS-Tricks contrast-color() | CSS-Tricks Let’s Use the Nonexistent ::nth-letter Selector Now | CSS-Tricks Quick Hit #126 Recreating Apple’s Vision Pro Animation in CSS | CSS-Tricks Quick Hit #125 Enhancing Astro With a Markdown Component | CSS-Tricks Quick Hit #124 Markdown + Astro = ❤️ | CSS-Tricks Quick Hit #123 What’s !important #9: clip-path Jigsaws, View Transitions Toolkit, Name-only Containers, and More | CSS-Tricks A Well-Designed JavaScript Module System is Your First Architecture Decision | CSS-Tricks hypot() | CSS-Tricks The Radio State Machine | CSS-Tricks 7 View Transitions Recipes to Try | CSS-Tricks Quick Hit #122 Quick Hit #121 Selecting a Date Range in CSS | CSS-Tricks saturate() | CSS-Tricks justify-self | CSS-Tricks Quick Hit #120 Alternatives to the !important Keyword | CSS-Tricks Quick Hit #119 New CSS Multi-Column Layout Features in Chrome | CSS-Tricks Quick Hit #118 Making Complex CSS Shapes Using shape() | CSS-Tricks Quick Hit #117 Front-End Fools: Top 10 April Fools’ UI Pranks of All Time | CSS-Tricks Sniffing Out the CSS Olfactive API | CSS-Tricks What’s !important #8: Light/Dark Favicons, @mixin, object-view-box, and More | CSS-Tricks Quick Hit #116 Form Automation Tips for Happier User and Clients | CSS-Tricks Quick Hit #115 Generative UI Notes | CSS-Tricks Quick Hit #114 Quick Hit #113 Experimenting With Scroll-Driven corner-shape Animations | CSS-Tricks Quick Hit #112 JavaScript for Everyone: Destructuring | CSS-Tricks Quick Hit #111 Quick Hit #110 What’s !important #7: random(), Folded Corners, Anchored Container Queries, and More | CSS-Tricks 4 Reasons That Make Tailwind Great for Building Layouts | CSS-Tricks Quick Hit #109 Quick Hit #108 Abusing Customizable Selects | CSS-Tricks Quick Hit #107 The Value of z-index | CSS-Tricks Quick Hit #106 The Different Ways to Select <html> in CSS Quick Hit #105 Popover API or Dialog API: Which to Choose? Quick Hit #104 What’s !important #6: :heading, border-shape, Truncating Text From the Middle, and More Yet Another Way to Center an (Absolute) Element An Exploit ... in CSS?! Quick Hit #103 A Complete Guide to Bookmarklets Quick Hit #102 Loading Smarter: SVG vs. Raster Loaders in Modern Web Design Potentially Coming to a Browser :near() You Quick Hit #101 Distinguishing "Components" and "Utilities" in Tailwind Quick Hit #100 Spiral Scrollytelling in CSS With sibling-index() Interop 2026 Quick Hit #99 What’s !important #5: Lazy-loading iframes, Repeating corner-shape Backgrounds, and More Quick Hit #98 Making a Responsive Pyramidal Grid With Modern CSS Approximating contrast-color() With Other CSS Features Quick Hit #97 Trying to Make the Perfect Pie Chart in CSS Quick Hit #96 Quick Hit #95 CSS Bar Charts Using Modern Functions Quick Hit #94 No Hassle Visual Code Theming: Publishing an Extension Quick Hit #93
Serious Form Security
CSS-Tricks · 2009-05-19 · via CSS-Tricks

The Website Change Request Form has been a running topic around here for a little while and I’m gonna run with that for a little while. We are not going to rehash all the HTML and JavaScript that makes the form work, so if you need to catch up, go check out that first article.

What we have at this point is a pretty nice looking form that has a pretty nice user experience to it. I feel like it’s lacking two major things though. A) the notification emails themselves are pretty bland and basic text emails and B) there is almost no security at all on the form itself.

Thanks to Daniel Friedrich, I know have implemented some more serious security into the form and that will be the focus of this article. The two big goals are:

  • The form is being submitted by a human being
  • That human being isn’t doing anything nefarious

Token Matching

The first thing that we are going to do is generate a “token”, essentially a secret code. This token is going to be part of our “session”, meaning it is stored server side. This token also is going to be applied as a hidden input on the form itself when it is first generated in the browser. That means this token exists both on the client side and the server side and we can match them when the form gets submitted and make sure they are the same. What this does is ensure that any submission of the form is our form and not some third-party script wailing away at us from a different server.

First we’ll need to start a session, then create a function to build the token, apply it to the session, and return it for our use.

session_start();

function generateFormToken($form) {
    
       // generate a token from an unique value
    	$token = md5(uniqid(microtime(), true));  
    	
    	// Write the generated token to the session variable to check it against the hidden field when the form is sent
    	$_SESSION[$form.'_token'] = $token; 
    	
    	return $token;

}

The unique value here comes from a md5 hash of the microtime function, but Daniel says there are a slew of other crypting methods (like salt-values…). Now that we have this function, right before we build the form in the markup we can call it to create the value.

<?php
   // generate a new token for the $_SESSION superglobal and put them in a hidden field
   $newToken = generateFormToken('form1');   
?>

Then put the token as a hidden input into the form itself:

<input name="token" type="hidden" value="<?php echo $newToken; ?>">

Now we are prepared to check the token values against each other when the form is submitted. We’ll create a function to do that.

function verifyFormToken($form) {
  // check if a session is started and a token is transmitted, if not return an error
  if (!isset($_SESSION[$form.'_token'])) { 
    return false;
  }
	
  // check if the form is sent with token in it
  if (!isset($_POST['token'])) {
    return false;
  }
	
  // compare the tokens against each other if they are still the same
  if ($_SESSION[$form.'_token'] !== $_POST['token']) {
    return false;
  }
	
  return true;
}

This function checks to see if the token exists in both required places and that they match. If all those three things are true, the function returns true, if not, it returns false. Now we check that value before proceeding. The basic structure is:

if (verifyFormToken('form1')) {

   // ... more security testing
   // if pass, send email

} else {
   
   echo "Hack-Attempt detected. Got ya!.";
   writeLog('Formtoken');

}

Hack Logging

Notice in the structure above we use a function called writeLog() that takes a string. There are a variety of circumstances in which we have detected foul play and need to stop. In those cases we will call the writeLog() function to log the error for our own reference and then die()

This function attempts to write to a text file on the server (that file is going to need proper file permissions, user writeable) or if that fails, it will email it to you.

function writeLog($where) {

	$ip = $_SERVER["REMOTE_ADDR"]; // Get the IP from superglobal
	$host = gethostbyaddr($ip);    // Try to locate the host of the attack
	$date = date("d M Y");
	
	// create a logging message with php heredoc syntax
	$logging = <<<LOG
		\n
		<< Start of Message >>
		There was a hacking attempt on your form. \n 
		Date of Attack: {$date}
		IP-Adress: {$ip} \n
		Host of Attacker: {$host}
		Point of Attack: {$where}
		<< End of Message >>
LOG;
        
        // open log file
		if($handle = fopen('hacklog.log', 'a')) {
		
			fputs($handle, $logging);  // write the Data to file
			fclose($handle);           // close the file
			
		} else {  // if first method is not working, for example because of wrong file permissions, email the data
		
        	$to = '[email protected]';  
        	$subject = 'HACK ATTEMPT';
        	$header = 'From: [email protected]';
        	if (mail($to, $subject, $logging, $header)) {
        		echo "Sent notice to admin.";
        	}

	}
}

Nothing POSTED we didn’t ask for

If any values get posted to us that don’t have names from inputs in our own form, something funky is definitely going on. We’ll build a “whitelist” of acceptable post names and then check each one.

// Building a whitelist array with keys which will send through the form, no others would be accepted later on
$whitelist = array('token','req-name','req-email','typeOfChange','urgency','URL-main','addURLS', 'curText', 'newText', 'save-stuff');

// Building an array with the $_POST-superglobal 
foreach ($_POST as $key=>$item) { 
  // Check if the value $key (fieldname from $_POST) can be found in the whitelisting array, if not, die with a short message to the hacker
  if (!in_array($key, $whitelist)) {
			
    writeLog('Unknown form fields');
    ie("Hack-Attempt detected. Please use only the fields in the form");
			
  }
}

Valid URL

The client-side validation on this form watches for this, so it should be caught up front, but of course we should be checking on the back end too.

// Lets check the URL whether it's a real URL or not. if not, stop the script
if (!filter_var($_POST['URL-main'],FILTER_VALIDATE_URL)) {
   writeLog('URL Validation');
   die('Please insert a valid URL');
}

Cleaning values

At this point we have made all our security checks and are proceeding to create and send the email. Taking all the inputs exactly as entered and sending them on is a potential security risk. For example, JavaScript could be entered in a text field and then sent over email and potentially ran when the email is opened.

For the fields like “Name”, where there is no reason to use any special tags, we will strip them entirely with strip_tags(). For the textareas, where there may be occasion to use some tags, we’ll just the htmlentities() function to convert them safely.

Example:

$message .= "Name: " . strip_tags($_POST['req-name']) . "\n";

$message .= "NEW Content: " . htmlentities($_POST['newText']) . "\n";

More Better Cleaning

Krinkle writes in to say:

Originally you used strip_tags() for normal fields and htmlentities() for content. This is fine, except that it’s best practice to declare ENT_NOQUOTES and “UTF-8″ as well, since otherwise characters like the accent on the e (” é “) could become crap like Å@. And since most servers add slashes to input brought via $_POST[] it’s not a bad thing to run stripslashes just in case, else you’d have a slash in front of every single or doublequote that was typed entered in the form once it’s in the mailbox.

function stripcleantohtml($s){
  // Restores the added slashes (ie.: " I\'m John " for security in output, and escapes them in htmlentities(ie.:  " etc.)
  // Also strips any <html> tags it may encounter
  // Use: Anything that shouldn't contain html (pretty much everything that is not a textarea)
  return htmlentities(trim(strip_tags(stripslashes($s)), ENT_NOQUOTES, "UTF-8"));
}

function cleantohtml($s){
  // Restores the added slashes (ie.: " I\'m John " for security in output, and escapes them in htmlentities(ie.:  " etc.)
  // It preserves any <html> tags in that they are encoded aswell (like <html>)
  // As an extra security, if people would try to inject tags that would become tags after stripping away bad characters,
  // we do still strip tags but only after htmlentities, so any genuine code examples will stay
  // Use: For input fields that may contain html, like a textarea
  return strip_tags(htmlentities(trim(stripslashes($s)), ENT_NOQUOTES, "UTF-8"));
}

Usage in this example:

$message .= "Name: " . stripcleantohtml($_POST['req-name']) . "\n";

$message .= "NEW Content: " . cleantohtml($_POST['newText']) . "\n";

Why not use a CAPTCHA?

CAPTCHAs do a fairly good job of keeping spam off of forms, but we were worried more about hacking here than spam. Also, since this form is for people that we probably LIKE and are trying to HELP, we aren’t going to put them through the annoying hoop-jumping of a CAPTCHA. However, if you are interested, a super-duper simple home-brew captcha is to ask something like “What is ten minus five?” in a text input and then check for the values “5” and any capital letter combination of “five” and if it’s a match then continue, if not, don’t. This version of the form already has writeLog() function which is ready to use just for this, and the logic would fit in nicely around lines 75 and 76.

If you’d like a little more robust CAPTCHA, check out reCAPTCHA, which is pretty easy to use, helps people, and is very accessible.

Security Gurus?

When we talk about security around here, there tends to be a lot of opinions on how things are being done. If you have ideas, please share them below as constructively as you can, and I’ll be digesting and seeing how we can improve as we go along.

View Demo Download Files