Tuesday, December 31, 2013
Enforce Secure flag for session cookies in ASP.net
To avoid disclosure of sensitive information in transit from the server to the browser,
many applications use HTTP over SSL (HTTPS).
However, because it may be possible to navigate away from the HTTPS protected transport settings of the site,
either by someone specifically providing a link to a non https:// resource or via the application using a absolute reference and mistakenly using http://,
users may subject to their communications being "sniffed" between the browser and server.
Not only is the user data posted to a web server important to protect using HTTPS -
if an attacker were able to see session identifiers passing in plain sight they could reuse
them and masquerade as another user while the session was active (i.e. The user hadn't logged off).
To avoid this from happening, cookies can be set to be "secure" - that is,
they are only to be transmitted when a secure channel is available.
Add the following tag in the webConfig
<System.web>
<httpCookies requireSSL="true"/>
</System.web>
Wednesday, December 11, 2013
Autocomplete to work with Firefox,IE9+ and Chrome ASP.net C# (AutocompleteType does not produce desired results)
AutoCompleteType is not producing the desired results
auto complete feature in the password field needs to be disabled which was done through following Asp.net attribute of < asp:TextBox >
< asp:TextBox ID="passcode" runat="server" size="20" TextMode="Password" AutoCompleteType="Disabled" Wrap="False" > < /asp:TextBox >
When it was tested it is not working with IE9 and chrome.
The quick fix for this potential security threat is as below
In the PageLoad event of your aspx.cs file add attribute as follows
passcode.Attributes.Add("autocomplete", "off");
< asp:TextBox ID="passcode" runat="server" size="20" TextMode="Password" AutoCompleteType="Disabled" Wrap="False" > < /asp:TextBox >
When it was tested it is not working with IE9 and chrome.
The quick fix for this potential security threat is as below
In the PageLoad event of your aspx.cs file add attribute as follows
passcode.Attributes.Add("autocomplete", "off");
Tuesday, February 12, 2013
WEB Workers (Part 2)
Below is the simple code to see WEB Workers in action
The Main file code
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
The js file code
function showMessage()
{
postMessage("Hello World.");
}
Sunday, February 10, 2013
Web Workers (Run Locally)
How to run WEB Worker locally with Google Chrome.
IE version 10 supports WEB Workers the previous versions doesnot support.
I face this problem while creating and testing WEB Workers object on my local machine and nothing was happening. In order to run the code on your local machine with Google chrome we have to enable the flag via parameters while running the code
Right click on the browser icon and select properties there a window will appear and you will see Target field. Use following command and append it in the Target field while running Chrome. Please make sure to close all Chrome windows.
- --allow-file-access-from-files
- The Target field Look something like following C:\Users\UserNameHere\AppData\Local\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
Note: this is risky way of running and testing your code.
Please deploy your code on webserver and you dont need to
make these changes.
Please be aware to remove the above changes from browser.
Please deploy your code on webserver and you dont need to
make these changes.
Please be aware to remove the above changes from browser.
Saturday, February 9, 2013
HTML5 WEB Workers Part 1
Javascript is designed to run in single Thread environment.
Javascript does not support Multi Threading. Javascript is single threaded and this is major hindrance in implementing some cool capabilities in applications.There are other workarounds used by developers but they dont provide the flexibility which is now available with introduction of WEB Workers in HTML5.
WEB Workers are perfect for keeping your UI refresh, performant and responsive for users.
Types of WEB Workers
- Dedicated Workers
- Shared Workers
WEB Worker and DOM
Since WEB worker are external files they don't have access to following Javascript objects.
- The window object
- The document object
- The parent object
Continued Part 2
Wednesday, February 6, 2013
CANVAS 2D API (HTML5 CANVAS Part 3)
Drawing on canvas can be done by canvas 2D API
There are plethora of Methods and Properties in canvas 2D API.
2D API reference:click
There are plethora of Methods and Properties in canvas 2D API.
2D API reference:click
HTML5 CANVAS Part 2
Canvas Path
To draw a straight line in canvas we use following
The below is the code to draw lines
<canvas ID="canvas_1" width="300px" height="150px" style="border:1px solid;">
Browser Doesnot support HTML5 canvas tag.
</canvas>
<script>
var c= document.getElementById("canvas_1");
var ctx = c.getContext("2d");
//this draw the first line
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
//this draw the second line
ctx.moveTo(300,0);
ctx.lineTo(0,150);
ctx.stroke();
</script>
End of Draw Line section
Draw a Circle
To draw a circle we have to use following functions
<canvas ID="canvas_circle" width="300px" height="150px" style="border:1px solid;">
Browser Doesnot support HTML5 canvas tag.
</canvas> <script>
var c=document.getElementById("canvas_circle");
var ctx= c.getContext("2d");
//This fill Rectangle Rectangle.
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,300,150);
//This draws Circle.
ctx.beginPath();
ctx.arc(150,75,70,0,2*Math.PI);
ctx.stroke();
</script>
End of Draw Circle section
To draw a straight line in canvas we use following
- moveTo(x,y) starting point of the line.
- lineTo(x,y) end point of the line.
- stroke() is used to draw the actual line.
The below is the code to draw lines
<canvas ID="canvas_1" width="300px" height="150px" style="border:1px solid;">
Browser Doesnot support HTML5 canvas tag.
</canvas>
<script>
var c= document.getElementById("canvas_1");
var ctx = c.getContext("2d");
//this draw the first line
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
//this draw the second line
ctx.moveTo(300,0);
ctx.lineTo(0,150);
ctx.stroke();
</script>
End of Draw Line section
Draw a Circle
To draw a circle we have to use following functions
- beginPath()set the new context point.
- arc(x,y,r,start,stop)to define how the circle will be drawn.
- stroke() draw the circle.
<canvas ID="canvas_circle" width="300px" height="150px" style="border:1px solid;">
Browser Doesnot support HTML5 canvas tag.
</canvas> <script>
var c=document.getElementById("canvas_circle");
var ctx= c.getContext("2d");
//This fill Rectangle Rectangle.
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,300,150);
//This draws Circle.
ctx.beginPath();
ctx.arc(150,75,70,0,2*Math.PI);
ctx.stroke();
</script>
End of Draw Circle section
Wednesday, January 30, 2013
Check Box and Jquery
I was searching for code snippet to check status of checkbox through jquery, Here is what I figured out and it is very intresting.
Following is the Jquery you need to place in the <script> tag
<script>
$(document).ready(function()
{
$("#button2").click(function()
{
var isChecked = $("#check_1").attr('checked')?true:false;
if(isChecked)
{
$("#check_1").prop('checked',false);
}
else
{
$("#check_1").prop('checked',true);
}
}
);
}
);
</script>
Now HTML part
<input type="checkbox" id="check_1" >
we take Input type:checkbox and we will change its status on button click
<button type="button" id="button2" >I am button 2<button>
We define a button with the id button2. When we click the button this will change the checkbox status using above Jquery in <script> tag.
$(document).ready(function()
The above line waits for the document to get downloaded.
$("#button2").click(function()
The above line detects if there is click on the button2
var isChecked = $("#check_1").attr('checked')?true:false;
if(isChecked)
{
$("#check_1").prop('checked',false);
}
else
{
$("#check_1").prop('checked',true);
}
The above code is executed when the button is clicked
$("#check_1").attr('checked')?true:false;
returns the current state of checkbox.
$("#check_1").prop('checked',false);
The above line makes the state false if checkbox is already checked.
$("#check_1").prop('checked',true);
The above line makes the state true if checkbox is already checked.
Following is the Jquery you need to place in the <script> tag
<script>
$(document).ready(function()
{
$("#button2").click(function()
{
var isChecked = $("#check_1").attr('checked')?true:false;
if(isChecked)
{
$("#check_1").prop('checked',false);
}
else
{
$("#check_1").prop('checked',true);
}
}
);
}
);
</script>
Now HTML part
- <input type="checkbox" id="check_1" ><\li>
- <button type="button" id="button2" >I am button 2<button><\li>
Description of HTML Part
<input type="checkbox" id="check_1" >
we take Input type:checkbox and we will change its status on button click
<button type="button" id="button2" >I am button 2<button>
We define a button with the id button2. When we click the button this will change the checkbox status using above Jquery in <script> tag.
Jquery Description
$(document).ready(function()
The above line waits for the document to get downloaded.
$("#button2").click(function()
The above line detects if there is click on the button2
var isChecked = $("#check_1").attr('checked')?true:false;
if(isChecked)
{
$("#check_1").prop('checked',false);
}
else
{
$("#check_1").prop('checked',true);
}
The above code is executed when the button is clicked
$("#check_1").attr('checked')?true:false;
returns the current state of checkbox.
$("#check_1").prop('checked',false);
The above line makes the state false if checkbox is already checked.
$("#check_1").prop('checked',true);
The above line makes the state true if checkbox is already checked.
Monday, January 28, 2013
HTML5 CANVAS
CANVAS is newly introduced in HTML5. CANVAS is used to render graphics on the fly.
The most common usage are as below
- It can be used to draw graphics.
- Make photo compositions.
- Create animations or even do real-time video processing.
Now let us see the Canvas Element Tag:
<canvas id="canvas1" width="100px" height="100px"> </canvas>
We can have more than one canvas in HTML page. Each can be accessed through their unique (id) attribute. Now the <canvas> can be accessed through DOM as shown below.
<canvas id="canvas_1" width="100px" height="100px"> </canvas>var vcanvas= document.getElementById("canvas_1");
The canvas is border less. If width and height are not specified it will be 300 pixels wide and 150 pixels high. let us do some examples with <canvas>.style is used in <canvas> to define border
<! Doctype HTML><HTML>
<Body>
<canvas id="canvas_1" width="100px" height="100px" style="border:1px solid #000000;"> </canvas>
</Body> </HTML>
Javascript is required to draw something in <canvas>
A button tag is introduced to call the javascript function DrawRectangle().
<button type="button" id="button1" onclick="DarwRectangle()">Click Me</button>
<script>
function DarwRectangle()
{
var canvas= document.getElementById("canvas_1");
var ctx= canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
}
</script>
The Output will be like following.
Explanation of the function DrawRectangle()
document.getElementById("canvas_1");
The above line returns the canvas object.
canvas.getContext("2d");
The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.
ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);
The fillStyle property can be a CSS color,
a gradient, or a pattern. The default fillStyle is #000000 (black).
The fillRect(x,y,width,height) method draws a rectangle
filled with the current fill style.
More on canvas in Part 2 continued....
Wednesday, January 23, 2013
HTML5 Elements
New Elements in HTML5
I was going through my paper 70-480 so i thought to share on my Blog what new and exciting features are introduced in HTML5.
The Last version of HTML was 4.01 and it was introduced in 1999 and since then web has come a long way.
Following are new elements introduces in HTML5.New Semantic \ Structural Elements
| Tag | Description |
| <article> | Defines an article |
| <aside> | Defines content aside from the page content |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <command> | Defines a command button that a user can invoke |
| <details> | Defines additional details that the user can view or hide |
| <summary> | Defines a visible heading for a <details> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <figcaption> | Defines a caption for a <figure> element |
| <footer> | Defines a footer for a document or section |
| <header> | Defines a header for a document or section |
| <hgroup> | Groups a set of <h1> to <h6> elements when a heading has multiple levels |
| <mark> | Defines marked/highlighted text |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links |
| <progress> | Represents the progress of a task |
| <ruby> | Defines a ruby annotation (for East Asian typography) |
| <rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
| <rp> | Defines what to show in browsers that do not support ruby annotations |
| <section> | Defines a section in a document |
| <time> | Defines a date/time |
| <wbr> | Defines a possible line-break |
New Media Elements
HTML5 offers new elements for media content:
| <audio> | Defines sound content |
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for <video> and <audio> |
| <embed> | Defines a container for an external application or interactive content (a plug-in) |
| <track> | Defines text tracks for <video> and <audio> |
Tuesday, January 22, 2013
HTML5 localStorage and sessionStorage
The localStorage and sessionStorge from HTML5 are very helpful
in in saving data in Key/Value pair and provide a replacement
for our old buddy Cookies.
Now lets see it basics
HTML5 Storage Object Methods
1) getItems(key)--> key is the sting value.
2) setItems(key)--> key is the sting value.
3) removeItem(key) key is the sting value.
4) key(n) --> n is the name of the key and return type is value of that key.
5) clear().
Explanation for localStorage.
We have a div with the name "result".
we set its text (innerHtml) to Last Name:in the script section.
typeof(Storage) is used to check if the browser support Storage.
1) localStorage.setItem('lastname','Smith'); is used to set the values.
2) document.getElementById("result").innerHTML="Last Name:" + localStorage.lastname; is used to set the values in div.
3) localStorage.clear(); is used to clear all the keys and vlues in localStorage.
The same is with sessionStorage the only difference is it will loose values when the browser session is closed.
in in saving data in Key/Value pair and provide a replacement
for our old buddy Cookies.
Now lets see it basics
HTML5 Storage Object Methods
1) getItems(key)--> key is the sting value.
2) setItems(key)--> key is the sting value.
3) removeItem(key) key is the sting value.
4) key(n) --> n is the name of the key and return type is value of that key.
5) clear().
Explanation for localStorage.
We have a div with the name "result".
we set its text (innerHtml) to Last Name:in the script section.
typeof(Storage) is used to check if the browser support Storage.
1) localStorage.setItem('lastname','Smith'); is used to set the values.
2) document.getElementById("result").innerHTML="Last Name:" + localStorage.lastname; is used to set the values in div.
3) localStorage.clear(); is used to clear all the keys and vlues in localStorage.
The same is with sessionStorage the only difference is it will loose values when the browser session is closed.
Subscribe to:
Posts (Atom)