14 March 2010

Adding Security to Your Blog

After the heart-wrenching attack on NDSC's More Alike Than Different Campaign, many members of the Oz Squad began discussing the security of our own blogs. Specifically, how can we better protect the images we upload of our children so people can't simply download them (and worse, manipulate them).

I found a relatively easy way to bypass the two most common ways people download images from blogger:

1. people can right-click on your images and simply "save as"

2. even if you disable right-clicking, people can left-click on your image and it will redirect them to your original file in blogger (which is even bigger, better quality) and people can save that image.

In an effort to increase the security of my images and content I did some sleuthing (along with some of you - so thank you for the back-and-forth!) and here is the best way I found to disable right-clicking and the left-click work around. It is a bit cumbersome (and will be a TOTAL hassle as I go back and try to do this to all my existing posts), but it's not bad if you do this as you create new posts... and I found this to give me the protection I wanted without losing some of the functionality I know I rely on (e.g., if you disable all right-clicking on your blog, people cannot link to a specific post if they want).

WARNING: This cannot prevent somebody from taking a screen image or viewing your source code; therefore, I now embed a copyright on each image. Trust me, anybody who tries the first two common ways to download your image will get the point that you don't allow it - but you can't prevent people from taking a screen shot (but by disabling the left-click on the image, all they can take a screen shot of is the smaller, lesser quality image in your post). This is something I am willing to live with.

Although there are a couple different ways to get the same results, this is what I found to be easiest.

Here you go... there's only 3 steps!

STEP ONE: Create your blog post, including uploading any images

STEP TWO: Switch to HTML edit. Each image uploaded looks like this:

(for the purpose of illustration, I allow readers to left-click and right-click on these images so you can see them clearly - just click on it once and you will be taken to a larger version so you can see the text clearly)

The blue part I highlighted above is the html code that links your image back to the original picture you uploaded through blogger. DELETE IT. But be careful that you only delete the portion in blue. Here is what it looks like when you have done it correctly (again, click the image to see the code in detail):


Now you have eliminated the left-click work around...

STEP THREE: If you want to disable right-clicking on the image, insert the following code right before the end of the image html. Let's break it down... here's the code to disable the rick-click and provides a warning:

oncontextmenu='alert("© lisa lindsey 2010"); return false;'

Notice that my code provides a warning that simply indicates the image is copyrighted by me. You could come up with something more creative, or scary, if you want :)

Now, insert that at the very end of the image code, where I have the red X below (again, click on the image to see the code more clearly):


It is very important that you put it right before the /> at the end of the image tag. When you are done, it will look like this:


THAT'S IT! It's just 3 steps... I know it sounds cumbersome, but it's actually pretty quick and easy while you're creating your posts. If you want to see an example of the results, you can check out my two latest posts (I haven't gone back through my whole blog yet):

In. To. Everything. and He Makes Me So Happy

I hope some of you find this useful. I share this only because I think we do more good out in the open and I would hate to see too many people go private, although I truly understand why some of you have made that personal choice. There is, unfortunately, no perfect solution to protect our images...

Besides, I've decided that Sheridan is simply too cute to stop sharing pictures :)

And if you see anyone using your photos on Google fill out a Copyright Claim here (but be sure to read the process carefully - it means you are embarking on a legal journey).

10 comments:

  1. This is Joyce, Thank you for this great information.

    ReplyDelete
  2. yes!!!! He is too cute!!!!I love your photos
    and I love reading your blog! Thanks for sharing.
    Christine with Joshua, Germany

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. I found this on Kristin's blog and wanted to thank you for posting it. We were on the verge of going private and feel like we can live with this option. Thank You!

    ReplyDelete
  5. Awesome. You are awesome. Thank you!

    ReplyDelete
  6. Thanks so much for providing this info...for some reason, I also had to delete the < / a > that follows the image code to disable the left click option...

    I was afraid I'd have to limit my blog to registered viewers and REALLY wanted to stay available to other DS families that may not take the time to do that, so this will be a big help. Thanks so much, Smarty!

    ReplyDelete
  7. Love this! Thanks so much for writing this up. Now I just need to get used to using it...

    ReplyDelete
  8. Thank you for sharing, but it won't seem to work for me so I don't know what I'm doing wrong

    ReplyDelete
  9. Thank you so very much!!!
    I did it ;-) even we got a different code in Germany...and it is in just black too.
    I feel much better now ;-) Just have to find out how to get to the code for the photos on the side.
    :-) Christine & Joshua

    ReplyDelete