How to stop Cross Site Scripting in MVC – with tabbed browsing
If you are familiar with MVC and the AntiForgeryToken approach to preventing cross site scripting, you will be aware of the restrictions it puts in place, in regards to tabbed browsing and session experiences causing multiple problem for users. Improving security of a website, should never degrade the usability of a website for genuine customers or visitors to the site. the MVC default solution to Cross-site Scripting does not allow tabbed browsing (only the most recent tab will be authenticated for POST and AJAX requests. Now that tabbed browsing is available on every device and every browser, this is not an acceptable solution.
The solution is a new hashing algorithm with takes multiple sources of the user, server, MVC solution, .NET session and user agent and provides the user with a unique token which is verified against every POST and AJAX request. The method to this hashing can’t be fully displayed as it could compromise the usefulness of this method. But here is a rundown of it’s method and it’s uses.
The Anti-Cross site Scripting plugin is a single DLL, included in your project and referenced at the top of every controller in your MVC application. The DLL provides the ActionFilter Attribute for each route in your controller and only applies itself to POST methods, this alleviates the need for adding the attribute to each method that needs it, and also stops the possibility of missing out any POST requests that need protecting (they should all be protected!).
Read more
PHP Secure Sessions Class
When creating websites with multiple pages, sometimes it is a good idea to be passing information from page to page based on the current user. PHP holds a way of doing this called sessions. Sessions allow variables to be used across multiple pages while been set, modified and created. However, PHP sessions are not the most secure form of doing this.
In this tutorial we will look at a custom way of passing details from page to page without PHP sessions. To do this we will use cookies and a MySQL database. There will be hints throughout the tutorial on making classes/variables and functions or you can read the The full script is available at the end of this tutorial.
First, make a PHP file called “class.session.php”. This will contain all of the back end code for our class.
Start your class with a name of sessionsClass.
< ?php class sessionsClass { } ?>
Developing for the Nokia Lumia 1020 and Lumia 1520
New devices are getting released everyday, but there is a massive hype around the new Nokia Lumia devices, the 1020 and the 1520. The 1020 is currently known for its 41 megapixel camera, although the maximum resolution it will take is 38 megapixel, the results are phenomenal. Where as the 1520 is seen as an all around device, a “phablet”, a mixture of both the convenience of a phone but the practicality of a tablet.
When new devices emerge, the first questions for me and I’m sure many other is; what is it like to develop for, whats the viewport size, whats the screen resolution, what is the physical size of the screen. All these play a vital role in developing a usable website for the device.
Nokia Lumia 1020 1520 size Comparison
The Devices
Today I have got my hands on a Nokia Lumia 1020 and a Nokia Lumia 1520. First impressions are WOW! The build quality is excellent and the camera on the Lumia 1020 is a very iconic image. The 1520 feels just the right size to be used with two hands, but not very usable with one hand. The 1020′s camera also adds a bevel to the back of the phone which causes it to be unbalanced if using it on a desk or any other flat surface. However the 1520 does not have this problem. Another interesting thing between the devices is the storage size. Both devices come with an intnernal memory of 32GB, which is a lot of storage for anyone, but the 1520 comes equipped with a micro-sd card slow to increase it by another 64GB. Where as the 1020 does not have this feature. But with the 1020 storing higher resolution photos, and thus taking more storage space, surely this device should have the capability to expand the storage space also.
Read more
How to find Fragmented SQL Indexes
Storing data in SQL databases is easy, efficient and easily accessible. However, maintenance of these databases is crucial to keeping their performance good. One feature which helps SQL server to deliver large amounts of data quickly are indexes. These indexes store the relevant markers for pieces of data based on their values. These indexes, while constantly been updated can get fragmented, just like files on a hard drive. These indexes will only perform well if they are properly maintained.
Below is a handy bit of code to find out which indexes are fragmented and by how much. Based on this script, it can be extended to keep a record of index fragmentation and either REORGANIZE or REBUILD indexes based on their fragmentation level at certain times of the day.
SELECT OBJECT_NAME(ind.OBJECT_ID) AS TableName, ind.name AS IndexName, indexstats.index_type_desc AS IndexType, indexstats.avg_fragmentation_in_percent FROM sys.dm_db_index_physical_stats(DB_ID(), NULL, NULL, NULL, NULL) indexstats INNER JOIN sys.indexes ind ON ind.object_id = indexstats.object_id AND ind.index_id = indexstats.index_id WHERE indexstats.avg_fragmentation_in_percent > 0 ORDER BY indexstats.avg_fragmentation_in_percent DESC
Serializing Exceptions in VB
No matter how hard you try to make an application completely bug and error free, at least one error will slip through the net. Catching them is relatively easy in .NET and many other languages with a try catch statement, but what you do with that error can be tricky, especially in production environments where debugging can’t occur.
The most efficient way of looking after errors on .NET applications is to store the whole exception object, rather than just the message, which can be very unhelpful at times. To do this easily, the storing of the object can be done in XML, and stored in a database, text file or even sent in an e-mail, that’s entirely up to you.
The method provided below (available in VB and C#) will take an exception and return a nicely formed XML string for all error details up to 3 levels deep.
Public Function GetExceptionSerialized(ByVal ex As Exception) As String ' Start XML string. Dim xmlString As String = "" ' See if we actually have an exception first. If ex IsNot Nothing Then xmlString = String.Format("<Exception>") ' See if we have a top level message. If ex.Message IsNot Nothing AndAlso ex.Message <> "" Then xmlString += String.Format("<Message>{0}</Message>", ex.Message.ToString()) xmlString += String.Format("<Source></Source>", ex.Source.ToString()) xmlString += String.Format("<StackTrace></StackTrace>", ex.StackTrace.ToString()) End If ' See if we have an inner exception. If ex.InnerException IsNot Nothing Then xmlString += String.Format("<InnerException>") If ex.InnerException.Message IsNot Nothing Then xmlString += String.Format("<Message>{0}</Message>", ex.InnerException.Message) xmlString += String.Format("<Source></Source>", ex.InnerException.Source.ToString()) xmlString += String.Format("<StackTrace></StackTrace>", ex.InnerException.StackTrace.ToString()) End If If ex.InnerException.InnerException IsNot Nothing Then xmlString += String.Format("<InnerException>") If ex.InnerException.InnerException.Message IsNot Nothing Then xmlString += String.Format("<Message>{0}</Message>", ex.InnerException.InnerException.Message) xmlString += String.Format("<Source></Source>", ex.InnerException.InnerException.Source.ToString()) xmlString += String.Format("<StackTrace></StackTrace>", ex.InnerException.InnerException.StackTrace.ToString()) End If xmlString += String.Format("</InnerException>") End If xmlString += String.Format("</InnerException>") End If xmlString = String.Format("</Exception>") End If ' Return the built string. Return xmlString End Function
Resize and Optimise Image Class in C#
With the growth of mobile internet and mobile devices, users want websites to be fast and responsive when they are using them. One main downfall of normal websites is the size of the web page and its resources. For mobile we should be reducing the number of requests and how big the responses are.
One method of doing this is to scale down your image before they are sent to the client. This prevents large images been downloaded, only to be displayed in a small space. If done properly it can also eliminate the request for the image using Data URIs.
This tutorial will show you how to create a C# class that will resize an image and return it in an optimised Data URI format.
To start with, create a new C# class file and call it “Resize”. This will contain all of our method to resize our images. Next we need to make our class public and static. Your class file should look as follows:
How to target iPad mini in CSS Media Queries
With the increased use of the iPad mini, you need to be sure that your site displays well on the smaller screen. If you already have an iPad or tablet optimized website, the iPad mini will just inherit the same viewport size as the original iPad which is 768×1024 (in portrait mode) just in a smaller screen.
However, you may want to target the iPad mini specifically, due to it’s smaller screen, font’s may be slightly smaller and you may be able to utilize the space better. To do this, we can target the viewport size of the iPad coupled with the pixel density of the iPad mini.
So, in a media query we would do the following:
/* ipad Mini Portrait */ @media only screen and (width:768px) and (resolution: 163dpi) { } /* ipad Mini Landscape */ @media only screen and (width:1024px) and (resolution: 163dpi) { }
The media queries above will allow you to target iPad Mini in both the portrait and landscape orientation. The landscape media query could be coupled with the normal iPad portrait rule as the size is very similar. To couple it with the normal iPad portrait query, you can use the code below:
/* All iPads Portrait & iPad Mini Landscape */ @media only screen and ((width:768px) and (resolution:132dpi or resolution:263px) or ((width:1024px) and (resolution: 163dpi)) { } /* Only iPad 1 & 2 Portrait & iPad Mini Landscape */ @media only screen and ((width:768px) and (resolution:132dpi) or ((width:1024px) and (resolution: 163dpi)) { }
The reason for two options above, is you may want to target the retina iPad display seperatley to take care of high resolution images.
That is how to target iPad mini displays in CSS media queries.
Creating 3 Stage Pure CSS3 Gradients
With the ever growing popularity and ease of use of CSS3, it is important to use all of the benefits available from the technology. One of those benefits is being able to create gradients without the need for any images. This can be beneficial in 2 ways, one it means the gradient can be changed easily without having to make a new image, and two it eliminates the request for an image which helps in saving bandwidth.
Creating CSS3 gradient is easier than you expect and can take just one line of code, but cross browser comparability requires a few more lines to cater for vendor specific styles. This tutorial looks at how to create a 3 stage gradient. We will start by making an empty div in our html.
<div id="gradient"></div>
This div will be the based for displaying our gradient. Now we need to set our base background colour. This will be used for reference and also for comparability if any browsers don’t support CSS3 gradients. We will look at the simplest way to implement this gradient below:
background: -webkit-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%);
The css style above is simply setting a background property, but instead of using an image or colour, we are defining a “-webkit-linear-gradient”. This is the property for any webkit browsers to render a linear gradient. First we tell it to start from the top with our background colour of #375C81 (at 0%). Then we tell it to use the colour #375C81 at 50% (half way) and then tell it to use the colour #375C81 again at 100%. This gives us our three stage gradient, top middle bottom. This syntax is used for a few vendors, so simply changing the vendor starting tag will allow you to support multiple browsers straight away.
background: -webkit-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%); background: -moz-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%); background: -o-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%); background: -ms-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%); background: linear-gradient(to bottom,#375C81 0%,#3E6992 50%,#375C81 100%);
There is one more style we need to include to ensure we support all webkit browsers. The syntax for this style is below and is almost the same as the previous examples.
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#375C81),color-stop(50%,#3E6992),color-stop(100%,#375C81));
The main difference with the style above is we specify our starting point and end points before our colours. We specify a liner gradient to start at left top, and end at left bottom, this creates a veritcal gradient. Then we set our colours as before but using the in-built color-stop function.
To scale the gradient, we can change the “50%” value to a higher a lower percentage and based on that value we will see more or less of the top and bottom gradient colours.
Your result should look similar to the example below:
That is how to create a 3 stage gradient in pure CSS3. Another benefit of using CSS, is you can scale your gradient using the height and width of your div with no loss of quality and with no need for another image to be made.
Web Design for Mobiles and Tablets – Viewport Sizes
The web is evolving in many ways and the biggest is the mobile web. Mobiles are now browsing the web faster than every before and websites need to be optimized for smaller screen sizes, 3G connections and HD screens in the palms of people hands. When developing a mobile website, whether it be for an iPhone, iPad, Nexus 7 or a Samsung Tab 2, nearly every device has a different resolution and screen size. This can make it difficult to design a website that works on every device out there.
So, to make a start on creating a suitable website for all mobile devices (mobiles and tablets) it is a good idea to look at what screen sizes and resolutions are out there. Then you can get a good idea of how much space you have to work with, and if you possibly have to create a few different versions of the site to adapt to all devices.
So, below we have a table of all current mobile devices, including tablets, with their name, screen size, resolution and operating system version. This will be updated regularly when new devices are released. Use the search function to search for a specific phone or sort the columns by clicking them to find minimum and maximum values.