ClickPopMedia

Password information storage and security

Sean — Thu, 26 Mar 2009 06:06:11 +0000

There are several techniques used for storing passwords; some are very good, while some are downright terrible. Without mentioning the name of the organizations (for security purposes), I am, and have been associated with 2 groups that, without a doubt in my mind, store passwords in an extremely insecure manner. And of course, they’re not alone.

It is easy to spot an organization that stores passwords either completely unencrypted or encrypted using a method that allows for decryption easily. One method to spot this insecure behavior is the ability to “recover your password” without the need of resetting it. If you can recover your password, then someone else can easily access it as well (with the right tools). Another method is one to spot carefully… it’s not to fear when a company requires your password to be different from your previous X passwords, but when they also look for similarities and judge your password to be “too close”. This may come off as being a very secure tactic, when indeed it must mean that they are storing not just one, but several old passwords in a way that would make them, once again, an easy target.

So now we know some things to spot visibly that should throw up some caution flags. What else is there to know. There are methods of storing passwords that are more secure. For instance, storing a “hash” or checksum of a password using an irreversible, or one-way, algorithm is a good start. There are several hashing methods out there, some of which are better than others, but before we continue, allow me to explain what a hash is and how it can benefit secure data storage.

Sparing you from all the techno-jargon, a “hash” or checksum is an “encrypted” form of a variable. That’s a few quotes thrown in there, technically the term hash is misused by the Internet community as is encrypted when talking about a checksum. Encrypted would technically make the statement that the process is reversible using some sort of key. When in all actuality there is no key, it is a one-way cypher resulting in a fixed length string of letters and numbers that is unique to the variable data. A common hash string (MD5) is 128-bit or 32 hexadecimal characters. In short you have 32 characters ranging from 0-9 and A-F, 16 possible choices for each character position, giving you approximately 340,000,000,000,000,000,000,000,000,000,000,000,000 possibilities. This doesn’t eliminate the possibility of duplicate checksums, but obviously the chances of that occurrence are highly unlikely. The benefit of storing a data in “hash” form is that if a person gets a hold of a list of passwords, they are much easier to enter than if they get a hold of just your password hashes, but there is still a weakness.

Passwords are only as good as the people that make them. Of course a developer can submit their users to a multitude of password rules, eliminating common passwords and other occurrences, but you’re still left with the possibility of 2 people having the same password. If 2 people have the same password, they therefor have the same hash. So how do we eliminate this? Now it’s getting fun!

Eliminating possible duplicate hashes in your database is the fun part, and the part that can really help you push forward into the realm of password security. Salting your passwords is the easiest method to eliminate this rare phenomenon. A salt is small bit of data added “somewhere” to your password string. As I said, this is where it can be a lot of fun if you’re creative. The salt has to be stored, and should be unique to each individual user, otherwise you still have the possibility of identical hashes with the same password. Attaching information collected during the registration process is a good start, or even using the “id” of the user. Or you can be creative and use multiple items or even multiple times of running it through a hashing function. This ultimately will be up to you, but I will give you a little guidance.

For convenience we will keep this easy. The salt variable will be left undetermined in this sample so that you can fill it in with whatever you like. Feel free to play around with it.

$salt=X; //undetermined, replace X with something of your choosing.
$password=$_REQUEST['password']; //Sent from a form, or other type of post/get data set.
$seasoned_password=$salt.$password; //This will joint the 2 together;
$password_hash=md5($seasoned_password); //This can now be stored in the database along with the salt.
?>

Storing a salted hashed password will effectively eliminate the chances for duplicate password hashes, as long as the salt is wide enough variable. Remember never to store your salt as it’s own field, hide it as something else.

I am indeed sorry if this was a little long and drawn out. Security is not something to be taken lightly, and I hope this helps give insight in to how you can help protect your users passwords as well as the data you wish to protect.

Introduction to my PHP/MySQL User Authentication system (0)

How to Have a Heart - Illustrator Tutorial

VQ — Thu, 26 Feb 2009 18:00:01 +0000

I posted a simple heart vector last week, which I actually had a fair amount of fun making. As I was making it, I noticed how many shortcuts and simple techniques make the process of vector illustration so much easier. I’ve learned a ton of great stuff from Vectips, Vectortuts, and Abduzeedo and wanted to pass along some workflow tips of my own. Have fun.

Oh, I should stress (as though it’s not already obvious), I’m no anatomist.

First, I always find it helpful to start with a reference sketch. So go ahead and scribble up a heart, or grab the image from above. I’m sure you noticed my ugly mug in the background. I though it added just a sinister air that complements the tutorial nicely.

We’re going to start by tracing the major central shape of the heart that we’ll build from. I always like to trace using no fill, and a really bright, contrasting color, so I don’t lose my lines.

Now we’ll trace the little veins/arteries/i don’t know, with a much thicker brush with round edges. Make sure to make the overlap the the border of your first shape.

Now we’ll go through the process of blocking out the rest of your shapes. If you like, you can make the cava’s, aorta, veins, and arteries connect and end in different ways where they won’t show up in the final piece, but for my purposes, I was only concerned with the parts that would show up at the end. This step is really just more tracing.

Introduction to my PHP/MySQL User Authentication system

Sean — Sat, 21 Feb 2009 02:45:42 +0000

I thought I’d take a few minutes to go over the basics of what I’m going to be accomplishing over the next few weeks. I plan on guiding everyone through some of the basics of building your own user authentication system. This will include many segments varying from storing password information securely, user registration (and required information), password recovery vs. password reset, analyzing security vulnerabilities, possible applications and a wide variety of other topics that could possibly go along.

I will be starting off with a very basic set of security rules that you will need to keep in mind in order to maintain a secure list of users and password information. Without going in to further details, I can’t stress enough the huge mistake that many authentication systems use by limiting the size, type, and strength of a users passwords as well as the mistake of how the information is stored. I plan on analyzing a few preexisting systems and show some fundamental flaws associated with them, and provide tips to help safeguard your data from any unwanted guests.

Please be sure to check back soon, as I will be posting in the next few days.

Have a Heart, Happy Valentines +6

VQ — Fri, 20 Feb 2009 17:51:03 +0000

Introducing the first free resource in the ClickPop comeback. I wanted to get this out for valentines day, but got a little caught up in some fun projects I’ve been working on. So here it is, better late than never. Consider it a very early 2010 valentines day release.

As always, if you come up with something great, let us know. We love to see the amazing work creative people do with our humble resources. Happy illustrating.

Download the Have a Heart Vector (ai and eps)

GodBless:VQ

ClickPop Have a Heart Vector by Christopher Vasquez is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License. Based on a work at www.clickpopmedia.com

We’re Coming Back

VQ — Fri, 13 Feb 2009 15:34:47 +0000

I know we haven’t been around in some time. That’s going to change in the next couple of weeks. You can expect a fresh new round of Flash, Photoshop, and Illustrator tutorials, free vectors and textures, and some cool portfolio stuff. Hope to see you soon.

GodBless:VQ

Updated: Vector Tutorial - Obama Logo (Added .ai and .eps Assets)

VQ — Fri, 23 Jan 2009 21:11:37 +0000

No matter what you think of his politics, U.S. presidential cantidate Barack Obama has a pretty incredible marketing and design machine behind him. One strong example of this is his “O” logo. Simple, attractive, symbolic, it’s undeniably an effective logo.

Another aspect of the Obama campaign that is attractive to a lot of American’s is the grass-roots, everybody can be involved attitude that they’ve been trying quite successfully to convey. In honor of that attitude, and just in time for the Democratic Convention, I thought I would show some really helpful Illustrator techniques by making the Obama logo. In this tutorial, we’ll be going over the Pathfinder, Envelope Warps, Opacity Masks, and Gradient Meshes. And we’ll use a drop shadow!

What’s that? You don’t think we can do it? I have three words for you my friend.

Yes. We. Can.

Step 1. Get Yourself Ready

I’m working with a 400px by 400px artboard. I’ve set a verticle gradient from #0768A4 to #168ACB. Also, it’s important you’re working in CMYK for this tutorial. I’ll explain later when we get down to the Opacity Masks.

Step 2. Lay the Foundation

Make a 350px by 350px white circle in the middle of your artboard.

Step 3. Lay Another Foundation

Select your cirlce and copy in front (ctrl + f, mac cmd + f) to make a copy in the same position. Size it down to 320px by 320px and apply the same gradient that you have on the background. You’ll want to have the light blue on the bottom of this circle, and push it up past the middle.

Step 4. And a Third Foundation

Now copy in front (ctrl + f, mac cmd + f) again, size the circle down to 175px by 175px, and change the fill to white.

Step 5. Stripes

Now we have to make the gently sloping stripes that represent the bountiful fields of the American mid-west. We start to do this by making five rectangles, alternating red and white. You can start by making one rectangle, then hold down alt (mac option) and drag the shape to make another copy. Line them up, and repeat till you have your five stripes.

Step 6. Bendy Stripes

Now it’s time to get your warp on! Yeah! Hit ctrl + alt + shift + w (mac cmd + option + shift + w) or go to Object>Envelope Distort>Make With Warp… A dialogue box will pop up. Click the preview box, so you can see what you’re doing, and set distortion just the way you like it. I have mine set to Arc, with the bend at 25%, and the horizontal distortion at -50%.

Step 7. Bendy, Stripey Ground

Now you want to size up, rotate, and align your stripes. You want the top of your shape stopping slightly below the halfway mark of your innermost white circle, representing the sunrise of a new day or something. The bottom of the stripes need to cover the bottom of the inner blue circle.

Step 8. Pathfinding

Now we’re going to use an incredibly helpful tool that I’ve used in other tutorial’s. Say hello to the Pathfinder. Select the inner blue circle, copy it in front (ctrl + f, mac cmd + f) and move the copy to the front (ctr + shift + ], mac cmd + shift + ] ). Now select your stripes, expand (Object>Envelope>Expand) and ungroup (ctrl + shift + g, mac cmd + shift + g) them. Finally, select your stripes and the blue circle copy, and hit the crop button in the pathfinder window. You should end up with this:

Now, if you’re the boring type, you could stop right here with a perfectly functional Obama logo. If you’re the adverterous type, why don’t you continue with me?

Step 9. Depth and Shadow

Now you’re going to copy the big white circle from the back, and move it to the front (remember that one? ctrl + shift + ], mac cmd + shift + ] ). Here’s another really great illustrator thing, the gradient mesh. Object>Create Gradient Mesh, then a dialogue window will popup. I set it to 3 columns and three rows. The more detail you want on your gradient, the more rows and columns you should set. For our purposes, 3 is fine.

Now we’re going to begin adding color to individual points on our mesh. Anywhere you want to darken (in my case the bottom left side of the logo) should be assigned darker shades.

In the transparency panel, we’re going to set the blend mode to multiply, and the opacity to 80.

Step 10. The Bright Horizon

Now we have to make the bright glow coming up from beyond the horizon. Any ideas on how to do this? If you said, “Let’s just use a simple white to black gradient with the blend mode set to lighten or screen.” you’d be wrong. Dead wrong.

Because of some problem, which I won’t pretend to understand, with working with CMYK in Illustrator, sometimes you can’t do lighten or screen gradients. Why don’t we just work with RGB then? Because the gradients look cruddy, that’s why.

The solution lies in something called an Opacity Mask. First select your inner blue circle, copy it, and move it to the front. Now set the fill to white and set the blend mode to lighten. While in the transparency panel, open up the more options menu and select Make Opacity Mask. Now with your opacity mask selected, make a rectangle with a white to black gradient fill. Keep in mind, the white area displays fully what’s underneath, and as you’re getting closer to black, it masks more and more.

Step 11. More Practice Masking

Now we need to set up another opacity mask for the “shine” cast by the rising sun. Copy, paste, and move to front The blue circle. Size it down slightly, and align it with the bottom of the original blue circle. Now Copy this circle, but don’t paste it yet. Set the blend mode of the white circle to Screen.

Now create an Opacity Mask on this layer, like you did for your last layer. With the opacity layer selected, paste the circle into it from your clipboard and set the fill to a black to white gradient. Play around with your gradient till you get the effect you want.

Step 12. The Finishing Touch

To finish things off we’re going to add a little dropshadow. Select Effect>Stylize>Drop Shadow, set your settings, and go for it. I have the mode set to Multiply, opacity at 75%, x offset -10px, y offset 10px, and blur to 15px.

I hope you enjoyed this tutorial. In the next politically minded tutorial, I’m going to show you how to make a Shepard Farey inspired John McCain poster like this one:

Download the Obama Logo Asset Files Vectors

GodBless:VQ

Palin Shirts For Sale!

VQ — Thu, 09 Oct 2008 01:17:17 +0000

A couple weeks ago, I gave out a Palin vector. I’ve been playing around with it since then, and finally have a shirt for sale. It combines the absolutely gorgeous Sarah Palin with her home state, and state motto, appropriately, “North to the future.”

I actually went to a McCain/Palin event with some friends and some shirts. The shirts were an enormous hit, and everybody and their grandmother (seriously, an elderly lady with a super old camera) wanted to get pictures. I don’t want to exaggerate, but I think we may have been more popular than McCain today.

Governor Palin was actually kind enough to autograph one for us, and we’ll be auctioning that off for charity soon. We’re still working out the details, but I’ll let you know on that one.

In any case, be a pal and pick up a Palin shirt. Photos from the rally after the jump.

ClickPopMedia

VQ — Fri, 22 Aug 2008 04:26:48 +0000

I personally have been a big fan of Threadless for quite some time now. The designs they offer are, generally speaking, more beautiful, funny, or insightful than your run of the mill t-shirt. However, this might just be about to change. You see, I’ve posted a design to Threadless, and if it does not get printed, I promise I will throw a hissy fit and never use Threadless again!

Well, maybe not for a week or so at least.

As you can see, I’ve used a ton of the our free vectors. So if you like the design and want to support the site, give us a quick vote. I’ll love you forever if you do.

Obama Logo Tutorial

VQ — Thu, 07 Aug 2008 22:58:05 +0000

What’s that? You don’t think we can do it? I have three words for you my friend.

Yes. We. Can.

Step 1. Get Yourself Ready

Step 2. Lay the Foundation

Make a 350px by 350px white circle in the middle of your artboard.

Step 3. Lay Another Foundation

Step 4. And a Third Foundation

Now copy in front (ctrl + f, mac cmd + f) again, size the circle down to 175px by 175px, and change the fill to white.

Step 5. Stripes

Step 6. Bendy Stripes

Step 7. Bendy, Stripey Ground

Step 8. Pathfinding

Now, if you’re the boring type, you could stop right here with a perfectly functional Obama logo. If you’re the adverterous type, why don’t you continue with me?

Step 9. Depth and Shadow

Now we’re going to begin adding color to individual points on our mesh. Anywhere you want to darken (in my case the bottom left side of the logo) should be assigned darker shades.

In the transparency panel, we’re going to set the blend mode to multiply, and the opacity to 80.

Step 10. The Bright Horizon

Step 11. More Practice Masking

Step 12. The Finishing Touch

I hope you enjoyed this tutorial. In the next politically minded tutorial, I’m going to show you how to make a Shepard Farey inspired John McCain poster like this one:

Download the Obama Logo Asset Files Vectors

GodBless:VQ

Free Textures from the UK

Weese — Fri, 18 Jul 2008 00:56:05 +0000

Sound Foam, Wicker, Carpet, Flower Wallpaper, Paintbrush Stroke and many more!

In the pursuit to keep things fresh with our photo editing, VQ and I are trying to regularly capture new Photoshop Textures wherever we are in the world. For the next few weeks, I’ll be in England, so these textures are straight from the UK to you, with love. I hope you find them useful in your designs!

God bless you guys,

Weese

P.S.- If you’re looking for some free brick textures, download them here!

Floral pattern:

Rock

Sound Foam

Woven Material

Download the UK Textures (.jpg’s)

ClickPopMedia

Password information storage and security

Related Posts

How to Have a Heart - Illustrator Tutorial

Other Posts

Introduction to my PHP/MySQL User Authentication system

Related Posts

Have a Heart, Happy Valentines +6

Other Posts

We’re Coming Back

Other Posts

Updated: Vector Tutorial - Obama Logo (Added .ai and .eps Assets)

Related Posts

Palin Shirts For Sale!

Other Posts

ClickPopMedia

Related Posts

Obama Logo Tutorial

Other Posts

Free Textures from the UK

Related Posts