{"id":2779,"date":"2009-05-19T09:38:23","date_gmt":"2009-05-19T16:38:23","guid":{"rendered":"http:\/\/css-tricks.com\/?p=2779"},"modified":"2020-08-06T07:32:35","modified_gmt":"2020-08-06T14:32:35","slug":"serious-form-security","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/serious-form-security\/","title":{"rendered":"Serious Form Security"},"content":{"rendered":"\n<p>The <a href=\"https:\/\/css-tricks.com\/website-change-request-form\/\">Website Change Request Form<\/a> has been a running topic around here for a little while and I&#8217;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.<\/p>\n\n\n\n<p>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&#8217;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.<\/p>\n\n\n\n<p>Thanks to <a href=\"http:\/\/schilhan-werbung.de\/\" rel=\"noopener\">Daniel Friedrich<\/a>, 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:<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul><li>The form is being submitted by a human being<\/li><li>That human being isn&#8217;t doing anything nefarious<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/tread2.jpg\" alt=\"\" title=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"token-matching\">Token Matching<\/h3>\n\n\n<p>The first thing that we are going to do is generate a &#8220;token&#8221;, essentially a secret code. This token is going to be part of our &#8220;session&#8221;, meaning it is stored server side. This token <strong>also<\/strong> 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 <strong>both<\/strong> 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 <strong>is our form<\/strong> and not some third-party script wailing away at us from a different server.<\/p>\n\n\n\n<p>First we&#8217;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.<\/p>\n\n\n\n<pre rel=\"PHP\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">session_start();\n\nfunction generateFormToken($form) {\n    \n       \/\/ generate a token from an unique value\n    \t$token = md5(uniqid(microtime(), true));  \n    \t\n    \t\/\/ Write the generated token to the session variable to check it against the hidden field when the form is sent\n    \t$_SESSION[$form.'_token'] = $token; \n    \t\n    \treturn $token;\n\n}<\/code><\/pre>\n\n\n\n<p>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&#8230;). Now that we have this function, right before we build the form in the markup we can call it to create the value.<\/p>\n\n\n\n<pre rel=\"PHP\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">&lt;?php\n   \/\/ generate a new token for the $_SESSION superglobal and put them in a hidden field\n   $newToken = generateFormToken('form1');   \n?><\/code><\/pre>\n\n\n\n<p>Then put the token as a hidden input into the form itself:<\/p>\n\n\n\n<pre rel=\"PHP\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">&lt;input name=\"token\" type=\"hidden\" value=\"&lt;?php echo $newToken; ?>\"><\/code><\/pre>\n\n\n\n<p>Now we are prepared to check the token values against each other when the form is submitted. We&#8217;ll create a function to do that.<\/p>\n\n\n\n<pre rel=\"PHP\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function verifyFormToken($form) {\n  \/\/ check if a session is started and a token is transmitted, if not return an error\n  if (!isset($_SESSION[$form.'_token'])) { \n    return false;\n  }\n\t\n  \/\/ check if the form is sent with token in it\n  if (!isset($_POST['token'])) {\n    return false;\n  }\n\t\n  \/\/ compare the tokens against each other if they are still the same\n  if ($_SESSION[$form.'_token'] !== $_POST['token']) {\n    return false;\n  }\n\t\n  return true;\n}<\/code><\/pre>\n\n\n\n<p>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:<\/p>\n\n\n\n<pre rel=\"PHP\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">if (verifyFormToken('form1')) {\n\n   \/\/ ... more security testing\n   \/\/ if pass, send email\n\n} else {\n   \n   echo \"Hack-Attempt detected. Got ya!.\";\n   writeLog('Formtoken');\n\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"hack-logging\">Hack Logging<\/h3>\n\n\n<p>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()<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<pre rel=\"PHP\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function writeLog($where) {\n\n\t$ip = $_SERVER[\"REMOTE_ADDR\"]; \/\/ Get the IP from superglobal\n\t$host = gethostbyaddr($ip);    \/\/ Try to locate the host of the attack\n\t$date = date(\"d M Y\");\n\t\n\t\/\/ create a logging message with php heredoc syntax\n\t$logging = &lt;&lt;&lt;LOG\n\t\t\\n\n\t\t&lt;&lt; Start of Message >>\n\t\tThere was a hacking attempt on your form. \\n \n\t\tDate of Attack: {$date}\n\t\tIP-Adress: {$ip} \\n\n\t\tHost of Attacker: {$host}\n\t\tPoint of Attack: {$where}\n\t\t&lt;&lt; End of Message >>\nLOG;\n        \n        \/\/ open log file\n\t\tif($handle = fopen('hacklog.log', 'a')) {\n\t\t\n\t\t\tfputs($handle, $logging);  \/\/ write the Data to file\n\t\t\tfclose($handle);           \/\/ close the file\n\t\t\t\n\t\t} else {  \/\/ if first method is not working, for example because of wrong file permissions, email the data\n\t\t\n        \t$to = 'ADMIN@gmail.com';  \n        \t$subject = 'HACK ATTEMPT';\n        \t$header = 'From: ADMIN@gmail.com';\n        \tif (mail($to, $subject, $logging, $header)) {\n        \t\techo \"Sent notice to admin.\";\n        \t}\n\n\t}\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"nothing-posted-we-didnt-ask-for\">Nothing POSTED we didn&#8217;t ask for<\/h3>\n\n\n<p>If any values get posted to us that don&#8217;t have names from inputs in our own form, something funky is <strong>definitely<\/strong> going on. We&#8217;ll build a &#8220;whitelist&#8221; of acceptable post names and then check each one.<\/p>\n\n\n\n<pre rel=\"PHP\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ Building a whitelist array with keys which will send through the form, no others would be accepted later on\n$whitelist = array('token','req-name','req-email','typeOfChange','urgency','URL-main','addURLS', 'curText', 'newText', 'save-stuff');\n\n\/\/ Building an array with the $_POST-superglobal \nforeach ($_POST as $key=>$item) { \n  \/\/ 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\n  if (!in_array($key, $whitelist)) {\n\t\t\t\n    writeLog('Unknown form fields');\n    ie(\"Hack-Attempt detected. Please use only the fields in the form\");\n\t\t\t\n  }\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"valid-url\">Valid URL<\/h3>\n\n\n<p>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.<\/p>\n\n\n\n<pre rel=\"PHP\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ Lets check the URL whether it's a real URL or not. if not, stop the script\nif (!filter_var($_POST['URL-main'],FILTER_VALIDATE_URL)) {\n   writeLog('URL Validation');\n   die('Please insert a valid URL');\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"cleaning-values\">Cleaning values<\/h3>\n\n\n<p>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.<\/p>\n\n\n\n<p>For the fields like &#8220;Name&#8221;, 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&#8217;ll just the htmlentities() function to convert them safely.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre rel=\"PHP\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">$message .= \"Name: \" . strip_tags($_POST['req-name']) . \"\\n\";\n\n$message .= \"NEW Content: \" . htmlentities($_POST['newText']) . \"\\n\";<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-better-cleaning\">More Better Cleaning<\/h3>\n\n\n<p>Krinkle writes in to say:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>Originally you used strip_tags() for normal fields and <code>htmlentities()<\/code> for content. This is fine, except that it&#8217;s best practice to declare ENT_NOQUOTES and &#8220;UTF-8&#8243; as well, since otherwise characters like the accent on the e (&#8221; \u00e9 &#8220;) could become crap like \u00c5@. And since most servers add slashes to input brought via $_POST[] it&#8217;s not a bad thing to run stripslashes just in case, else you&#8217;d have a slash in front of every single or doublequote that was typed entered in the form once it&#8217;s in the mailbox.<\/p><\/blockquote>\n\n\n\n<pre rel=\"PHP\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function stripcleantohtml($s){\n  \/\/ Restores the added slashes (ie.: \" I\\'m John \" for security in output, and escapes them in htmlentities(ie.:  &quot; etc.)\n  \/\/ Also strips any &lt;html> tags it may encounter\n  \/\/ Use: Anything that shouldn't contain html (pretty much everything that is not a textarea)\n  return htmlentities(trim(strip_tags(stripslashes($s)), ENT_NOQUOTES, \"UTF-8\"));\n}\n\nfunction cleantohtml($s){\n  \/\/ Restores the added slashes (ie.: \" I\\'m John \" for security in output, and escapes them in htmlentities(ie.:  &quot; etc.)\n  \/\/ It preserves any &lt;html> tags in that they are encoded aswell (like &lt;html&gt;)\n  \/\/ As an extra security, if people would try to inject tags that would become tags after stripping away bad characters,\n  \/\/ we do still strip tags but only after htmlentities, so any genuine code examples will stay\n  \/\/ Use: For input fields that may contain html, like a textarea\n  return strip_tags(htmlentities(trim(stripslashes($s)), ENT_NOQUOTES, \"UTF-8\"));\n}<\/code><\/pre>\n\n\n\n<p>Usage in this example:<\/p>\n\n\n\n<pre rel=\"PHP\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">$message .= \"Name: \" . stripcleantohtml($_POST['req-name']) . \"\\n\";\n\n$message .= \"NEW Content: \" . cleantohtml($_POST['newText']) . \"\\n\";<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"why-not-use-a-captcha\">Why not use a CAPTCHA?<\/h3>\n\n\n<p>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&#8217;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 &#8220;What is ten minus five?&#8221; in a text input and then check for the values &#8220;5&#8221; and any capital letter combination of &#8220;five&#8221; and if it&#8217;s a match then continue, if not, don&#8217;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.<\/p>\n\n\n\n<p>If you&#8217;d like a little more robust CAPTCHA, check out <a href=\"http:\/\/recaptcha.net\/\" rel=\"noopener\">reCAPTCHA<\/a>, which is pretty easy to use, helps people, and is very accessible.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"security-gurus\">Security Gurus?<\/h3>\n\n\n<p>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&#8217;ll be digesting and seeing how we can improve as we go along.<\/p>\n\n\n\n<p><a class=\"button\" href=\"https:\/\/css-tricks.com\/examples\/WebsiteChangeRequestForm\/\">View Demo<\/a> <a class=\"button\" href=\"https:\/\/css-tricks.com\/examples\/WebsiteChangeRequestForm.zip\">Download Files<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Website Change Request Form has been a running topic around here for a little while and I&#8217;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. [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":352211,"url":"https:\/\/css-tricks.com\/collecting-email-signups-with-the-notion-api\/","url_meta":{"origin":2779,"position":0},"title":"Collecting Email Signups With the Notion API","date":"September 27, 2021","format":false,"excerpt":"A lot of people these days are setting up their own newsletters. You\u2019ve got the current big names like Substack and MailChimp, companies like Twitter are getting into it with Revue, and even Facebook is getting into the newsletter business. Some folks are trying to bring it closer to home\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/s_C6DD37D8ED67AB804309E3524813327121D8EA01ECCF02AF2243019807FF6CCA_1631103543169_www.notion.so_ravsamhq_a35339595b6749cf988cabcfb19c2a68_v2a1f3d1ec43f4823b859bb8228800d9531.png?fit=1200%2C637&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":197463,"url":"https:\/\/css-tricks.com\/wordpress-front-end-security-csrf-and-nonces\/","url_meta":{"origin":2779,"position":1},"title":"WordPress Front End Security: CSRF and Nonces","date":"March 24, 2015","format":false,"excerpt":"In our last article, we covered Cross-Site Scripting (XSS) and the functions WordPress provides to prevent XSS attacks. Today, we'll look at another security concern for front end developers: Cross-Site Request Forgery (CSRF). Lest you think this security stuff isn't important, a major vulnerability was recently found in the WP\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":326533,"url":"https:\/\/css-tricks.com\/happier-html5-form-validation-in-vue\/","url_meta":{"origin":2779,"position":2},"title":"Happier HTML5 form validation in Vue","date":"December 3, 2020","format":false,"excerpt":"It's kind of neat that we can do input:invalid {} in CSS to style an input when it's in an invalid state. Yet, used exactly like that, the UX is pretty bad. Say you have <input type=\"text\" required>. That's immediately invalid before the user has done anything. That's such a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/08\/forms-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":15437,"url":"https:\/\/css-tricks.com\/html-forms-in-html-emails\/","url_meta":{"origin":2779,"position":3},"title":"HTML Forms in HTML Emails","date":"December 7, 2011","format":false,"excerpt":"You know how you can send HTML email? You know how things like text areas and radio buttons are HTML elements? Yep. I got thinking about this after getting this email from Google: HTML form right in an HTML email So clearly, it can be done. Inspecting the source of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/12\/netflixrating.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":367370,"url":"https:\/\/css-tricks.com\/designing-for-long-form-articles\/","url_meta":{"origin":2779,"position":4},"title":"Designing for Long-Form Articles","date":"August 10, 2022","format":false,"excerpt":"Designing a beautiful \u201carticle\u201d is wrought with tons of considerations. Unlike, say, a homepage, a long-form article is less about designing an interface than it is designing text in a way that creates a relaxed and comfortable reading experience. That\u2019s because articles deal with long-form content which, in turn, tends\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/long-form-content-collage.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":139,"url":"https:\/\/css-tricks.com\/nice-and-simple-contact-form\/","url_meta":{"origin":2779,"position":5},"title":"A Nice &#038; Simple Contact Form (Downloadable)","date":"October 19, 2007","format":false,"excerpt":"There are a million contact form examples out there, why this one? It's SIMPLE It's FREE It WORKS It's VALID and it's styled with CSS Take a look. Download it. Take it apart. Use it for whatever you'd like. Check out the nice clean emails it generates: View Demo \u00a0\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2779"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=2779"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2779\/revisions"}],"predecessor-version":[{"id":318807,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/2779\/revisions\/318807"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=2779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=2779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=2779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}