rajesh gollapudi’s blog

Rajesh

When using css (opacity) to set the transparency of an element, the child elements inherit the transparency of the parent element.

For example, if you set 50% transparency to the body element, the whole pages becomes 50% transparent. Even if you explicitly set the opacity to 1 for the child elements, the transparency is still there.

This is particularly not desired if your child elements has text.  As you can see from the screenshots, the text looks clear in Screenshot 1.  In Screenshot 2, the text dissolves into the background when opacity is set to 0.5. I used opacity 0.5 just to demonstrate this. The text looks better with opacity 0.9, but this is not the ideal solution.

   

Solution
To prevent this, the only way is to use a  png with the desired alpha transparency.
Note:
Transparent pngs are not supported by IE 6. So make sure that you use the fix mentioned at TwinHelix

Screenshot taken on IE 6 using Adobe BrowserLab :)
Designed by John Jacobsen

In this blog post, I will be focusing on how to secure your website through established coding practices. If you are using an MVC framework (like CakePHP, Symfony, Zend etc) or any CMS systems (like Drupal, Wordpress etc), most of these security measures might already be in place for you. Nevertheless, it would be good to know.

• Cross-site scripting
Cross-site scripting attacks are attacks that target the end user instead of your actual site. Vulnerable web applications that don’t check or validate properly incoming data let arbitrary code to run on a client computer (such as Javascript). The end result can be anything from stealing cookie data or redirecting to a different site. 

Let us imagine that you are implementing a comment feature on your website, that lets viewers of your website leave comments. If you aren't careful in validating your in coming data, users of your website can be redirected to a different location. For example, consider the following comment: Good work! If a user visits the comments page now it will be redirected to example.com website. To prevent this, you could use PHP strip_tags method 

• SQL injection
This is a subset of the an unverified/unsanitized user input vulnerability. The harm occurs when a query is run based on the user input without proper validation. For example, consider the following login form example. 
<form> <input name='username' type='text'> <input name='password' type='password'> </form> 
On the server side, the user is validated using the following query, "SELECT * FROM users WHERE username='$_GET['username']' and password='$_GET['password']'" At first, the above query looks fine. Now if the user enters the following text -"xyz' OR '1=1'", then the user can login to the site with some dummy password 'xyz', with this he can login to any user account. This makes the whole site vulnerable. The solution for the above problem is - 
1. mysql_real_escape_string() This escapes all potentially dangerous characters in the string provided by adding a '\' and returns the escaped string such that it may be safe to put into a MySQL query. 
2. Use parameterized statements Example: $p = $db->prepare("SELECT * FROM users WHERE username = ?"); $db->execute( $p, array($_GET['username']) );
• Other kinds of attacks
SQL injection and Cross-site injection are just 2 of the website vulnerabilities, in addition there are other attacks like buffer overflow attack, brute-force attacks etc. Carefully devising strategies for user input validation is the best way to counter these attacks.

Do
- ensure your site is valid (x)html
- use css for styles and layout 
- use column based layouts instead of tables
- Stick to basic fonts. MobileSafari has some basic font set currently
- Use large tap targets -- 44px min. Finger is not a pointer, so don't make a site full of links

Dont
- Use Flash, Java applets or browser plugins (HTML5 is in the future)
- Use <font>,<b>,<i> tage for style or <br> <table> tags for layout.
- Use iframes or scrolling divs. Instead let the whole page roll
- Use rollovers. On desktop they make the site more interactive but on mobile they don't. Fingers don't roll.

Targeting mobile safari
- Use the viewport meta tag to tell MobileSafari to fit the page width to screen
<meta name='viewport' content='width-device-width' />
- Use css3 media selector to target MobileSafari
<link media='only screen and (max-device-width: 480px)' href='iphone.css'  type='tex/css' rel='stylesheet' />
or you could use:
@media only screen and max-device-width: 480px)
- Lots of options see Apple Documentation.
- Detect MobileSafari User-Agent value: test for both 'mobile' and 'safari'