nFriedly Web Dev Tech Blog » security http://nfriedly.com/techblog Expert Advice on Website Development, Javascript, Ajax, and Security Tue, 20 Jul 2010 14:58:10 +0000 en hourly 1 http://wordpress.org/?v=3.0 How AJAX Security and Twitter callbacks work http://nfriedly.com/techblog/2009/06/javascript-security-ajax-json-and-twitter-callbacks/ http://nfriedly.com/techblog/2009/06/javascript-security-ajax-json-and-twitter-callbacks/#comments Tue, 16 Jun 2009 14:40:33 +0000 nFriedly http://nfriedly.com/techblog/2009/06/javascript-security-ajax-json-and-twitter-callbacks/ The twitter callback feature is nice – it makes it extremely easy to to add a twitter feed to a page. But to get the most benefit out of it, you really need to understand what it’s doing.

We’re going to look at how AJAX security works, specifically the Same Origin Policy, how Twitter gets around it, and the type of callback that twitter uses.

Note: the callback that twitter uses is entirely different from callback in the sense of passing a javascript function around as a variable. We’ll look at that in a future article.

AJAX Security

The XMLHTTPRequest Object, which is the javascript object used to make AJAX requests, has a “Same Origin Policy” which basically means that javascript on site1.com cannot use AJAX to directly load data from site2.com. This is a security feature, as it makes XSS (Cross-Site Scripting) attacks more difficult.

Worth noting, if the website is at site1.com, no scripts can communicate with any other site, even if the script was loaded from site2.com.

Work Arounds

There are a number of workarounds including iframes, java applets, and flash, but here’s a couple of the more common methods.

Line em up!Proxying Requests

The way proxying works is to have a file on your server that grabs the data from a remote server and passes it along. Then for javascript, the data appears to be coming from your server, even though it actually originated at a remote server. This is what the Fancy part of my twitter demo does.

We’ll look at using a proxy to get remote data in a future article.

Remotely hosted javascript files

Scripts stored on other websites can be included on a page. As long as the script doesn’t need to call home after the initial load, everything works great. This is how a basic twitter function works: you load a script from twitter’s website and it communicates with your site via the callback feature. This is what the Simple part of my twitter demo does.

Here is a very basic page that uses Twitter’s callback feature and a remotely loaded javascript file to show my twitter status – remote data – on my website, by interacting with local javascript.

<!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"  dir="ltr" lang="en-US">

<head>
<title>Simple Twitter Status</title>

</head>
<body>

<h1>My Twitter Status:</h1>

<div id="twitter_status">Loading...</div>

<!-- Put scripts down here for speed -->

<!-- this must come before we load the twitter script -->
<script type="text/javascript">

function showStatus(json){

	json = json[0]; // we only care about the most recent status;

	var myDiv = document.getElementById('twitter_status');

	myDiv.innerHTML = '<img src="'
		+ json.user.profile_image_url
		+ '" style="float:left; margin:5px 10px 10px 0">'
		+ json.text;
}
</script>

<!-- now load the twitter file -->
<script type="text/javascript"
src="http://twitter.com/statuses/user_timeline/nfriedly.json?count=1&amp;callback=showStatus&amp;random=<?php echo time(); ?>" />
</script>

</body>
</html>

You can see a live copy of this code at http://nfriedly.com/demos/twitter-extra-simple.

Digging into Twitter’s callback method

Below is a trimmed down example of what Twitter’s API sends back when we make the request in the example above.

showStatus([{"in_reply_to_screen_name":null,"text":" [ Lots of information that I'm omitting because it's not the point. ] "]);

Now, don’t worry about the jazz in the middle, just look at that showStatus(); that’s wrapped around it. First of all, how does Twitter even know that we have a function named show status? Because we said so in the url to the file -see how we added &callback=showStatus? That’s where the magic is.  (Ok, technically we said &amp; not just &, but that was just to pass XHTML validation. )

Cross-domain!

There’s a second important thing going on here – javascript from two different domains are interacting with each other. This is allowed because of how the Same Origin Policy works – everything is restricted to the local domain, but that means that everything can work together on the same plane.

It’s a beautiful thing

I hope this gave you a little bit better understanding of how AJAX security works and how Twitter gets around it and is still able to interact with your site. In the future, I’ll have an article on how “traditional” callbacks work that will use jQuery and more AJAX to dive a bit deeper into the topic.

Javascript Ninja for Hire

I have extensive experience working with AJAX, Twitter, and related technologies. I’m just the man you need to make your next javascript development project shine!

]]> http://nfriedly.com/techblog/2009/06/javascript-security-ajax-json-and-twitter-callbacks/feed/ 1 How to build a spam-free contact form without captchas http://nfriedly.com/techblog/2009/06/how-to-build-a-spam-free-contact-forms-without-captchas/ http://nfriedly.com/techblog/2009/06/how-to-build-a-spam-free-contact-forms-without-captchas/#comments Sun, 07 Jun 2009 08:12:53 +0000 nFriedly http://nfriedly.com/techblog/?p=23 data_security_3Most anti-spam methods used by websites today are annoying at best. They use impossible-to-read captcha images, or they make users jump through some kind of hoop to get the email address instead of just clicking on it. This can mean lost sales and opportunities for you, because each hurdle turns away more users.

This article looks at how to use some simple HTML, CSS, & Javascript to protect your private information without making your guests jump through hoops.


Download a working copy of the contact form discussed here.

The Goal

I want users to be able to contact me simple and easy, no captchas, no math problems, just a regular contact form, clickable email address, and everything copy-paste-able.

The Problem

Spammers love captcha-free forms and clickable email addresses. (And lately, copy-paste-able phone numbers.) I do not want to receive a ton of spam!

The Solution

With a little bit of CSS and JavaScript wizardry, we can make a simple, easy-to-use contact page that will not get you hardly any spam!

A downloadable example is provided at the end of the article.

Part 1: The Contact Form

We are going to make a standard contact form with one extra feature: an input named “url” and a note beside it that says “Don’t type anything here!”

The HTML:

<form method="post" action="/submit.php">
<p>Your name:
<br /><input name="name" /></p>

<p>Your email:
<br /><input name="email" /></p>

<p class="antispam">Leave this empty:
<br /><input name="url" /></p>

<textarea name="message"></textarea>

<input type="submit" value="Send" />
</form>

Then we use CSS to hide the input and the note.

The CSS:

.antispam { display:none;}

Then we make a rule in the server that says ‘if the user typed anything in the “url” box, then throw it out.’

The PHP:

<?php

// if the url field is empty
if(isset($_POST['url']) && $_POST['url'] == ''){

	// then send the form to your email
	mail( 'you@yoursite.com', 'Contact Form', print_r($_POST,true) );
}

// otherwise, let the spammer think that they got their message through

?>

<h1>Thanks</h1>
<p>We'll get back to you as soon as possible</p>

A regular person won’t even see the box normally, and will therefore leave it blank without even thinking about it. If the CSS fails to load, they get a note explaining what to do.

However, when a spam bot looks at this, it sees a good spot to stick whatever spammy url they’re trying to advertise.

Now the php script on the server can tell who is a spammer and who isn’t. The regular people get sent to your email, the spammers get ignored!

Part 2:  Click-able Email Address

Spammers steal your email address by scanning through the source code of the site and grabbing anything that looks like an email address. So we’re going to make sure that there is no email address in the source code and instead generate it by JavaScript.

The Javascript:

var first = "yourname";
var last = "yoursite.com";

The HTML:

<p>My e-mail address:
<script type="text/javascript">
document.write('<a href="mailto:'+first + '@' + last+'">'+first + '@' + last+'<\/a>');
</script>
<noscript>
Please enable javascript or use my <a href="/contact.php">contact form</a>
</noscript>
</p>

A regular user will see a regular email address and things just work. A user who happens to have javascript disabled will see an explanation and an alternative solution. And a spammer won’t see a thing!

This method can easily be extended to phone numbers and other personal information.

Complete Examples

A complete working copy of everything mentioned in this article is available here: http://nfriedly.com/stuff/spam-free-contact.zip

For a live demo of all of this and more, see my contact page.

Update: I found that there is an anti-spam plugin for WordPress that uses similar methods to the ones I describe here: http://wordpress.org/extend/plugins/nospamnx/

Does your website need help?

I am an Experienced Web Developer with a sharp eye for security. I can make your site easier to use while at the same time cutting down on level of spam you receive through it.  Contact me for more information and a free quote.

]]> http://nfriedly.com/techblog/2009/06/how-to-build-a-spam-free-contact-forms-without-captchas/feed/ 22 Why some users can’t see a https website http://nfriedly.com/techblog/2009/06/users-cant-see-https-website/ http://nfriedly.com/techblog/2009/06/users-cant-see-https-website/#comments Sun, 07 Jun 2009 05:02:13 +0000 nFriedly http://nfriedly.com/techblog/?p=1 lock_smallRecently a client of mine had me pulling my hair out trying to figure out why some users couldn’t see the the secure https sections of their website.

As it turned out,  the server had been upgraded to TLS only for PCI-compliance, and some users had TLS disabled.

This article goes in to the how, they why, and the solution to fix https websites that aren’t showing up for some users.

The Change

Recently a client of mine made some changes to their secure server in order to comply with PCI regulations.

The rather cryptic error the PCI compliance scan gave was

Synopsis : The remote service supports the use of weak SSL ciphers.
Description : The remote host supports the use of SSL ciphers that offer either weak encryption or no encryption at all.
See also : http://www.openssl.org/docs/apps/ciphers .html
Solution: Reconfigure the affected application if possible to avoid use of weak ciphers.
Risk Factor: Medium  / CVSS
Base Score : 5.0 (CVSS2#AV:N/AC:L/Au:N/C:P/I:N/A:N)
Plugin output :
Here is the list of weak SSL ciphers supported by the remote server :
Low Strength Ciphers (< 56-bit key) SSLv3 EXP-RC2-CBC-MD5 Kx=RSA(512) Au=RSA Enc=RC2(40) Mac=MD5 export EXP-RC4-MD5 Kx=RSA(512) Au=RSA Enc=RC4(40) Mac=MD5 export
The fields above are : {OpenSSL ciphername} Kx={key exchange} Au={authentication} Enc={symmetric encryption method} Mac={message authentication code} {export flag}

They disabled SSL 3.0 and lower in IIS and set it to only accept TLS connections. (TLS is essentially SSL 4.0). This allowed them to pass the PCI compliance, but brought on new issues.

The Problem

Immediately after making this change, they began to get complaints from a few users who could no longer see the secure sections of their website.

Most of these users were on older versions of Internet Explorer, so they were first asked to upgrade to the latest version. This didn’t fix the issue for most of them.

The Fix

After some digging around, I learned the IE has settings for disabling SSL & TLS.

  1. In Internet Explorer on the Tools menu, choose Internet Options.
  2. Go to the Advanced tab.
  3. Scroll all the way to the bottom and check ‘Use TLS 1.0‘
  4. Click Ok. You may need to restart your browser.

I have no idea why that would ever get unchecked, but apparently it happens.  It’s also worth noting that upgrading to a newer version keeps the old settings intact.

Need help with a secure website?

I have significant experience in e-commerce and other security heavy areas.  If you need secure web development, I can probably help you out.  I understand https from the high level implementation right down to the bits and bytes (.doc file).

]]> http://nfriedly.com/techblog/2009/06/users-cant-see-https-website/feed/ 2