Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Saturday, 6 July 2013

Potentially dangerous Request.Form value was detected from the client




'A Potentially dangerous Request.Form value was detected from the client'

This is a common error that ASP.NET developers have run into many times. We will see in this post a few ways on how to avoid it. 

Reason
       By default, ASP.NET performs request validation to prevent people from uploading HTML markup or script to your site. ASP.NET checks the content of the form sent to the server to prevent cross-site scripting(xss).  

This error is caused by a newly introduced feature of .NET Framework 1.1, called "Request Validation."  This feature is designed to help prevent script-injection attacks whereby client script code or HTML is unknowingly submitted to a server, stored, and then presented to other users.

Note that anything between '<' and '>' is considered dangerous, and it doesn't have to necessarily closes the tag with '<' ("<a" would have be considered potentially dangerous). ASP.NET validates query string as well.

Try it:
To overcome this error first try to disable the request validation feature, because the validation is done by ASP.NET before any of your code.
<%@ Page ValidateRequest="false" %>

Or you can disable it for your entire application in the web.config file:
<configuration>
    <system.web>
        <pages validateRequest="false" />
    </system.web>
</configuration>

ASP.Net 4.0?
        In ASP.Net 2.0, request validation is enabled for only ASP.Net pages and validated when those pages are executing. Whereas in ASP.Net 4.0, by default request validation is enabled for all requests. As a result validation applies to not only to ASP.Net pages but also to the Web service calls, Http handlers etc.. To prevent this error simply revert ASP.Net behavior back to 2.0. 
To do this, add a configuration element in Web.Config.
<httpRuntime requestValidationMode="2.0" />

Thursday, 27 June 2013

Image upload with CKEditor

CKeditor is one of the most widely used WYSIWYG editors for web applications. Overtime, the CKeditor continued to evolve by adding new features that made HTML text editing a lot easier. When using a WYSIWYG editor, we will often need to upload image to server and embed it in the HTML content. By default, the CKeditor will support embedding an image that are already uploaded or from an external source by providing its URL.

In this article, let’s see how we can upload image to our website and embed it in CKeditor by below easy solution. The CKeditor has a property called filebrowserImageUploadUrl which will provide an option to upload images to the server when configured. This property takes a file uploader (a page or a handler) url to upload the selected image to the server. The handler that is responsible for uploading the image should return back the URL of the image to display in the CKeditor. Once filebrowserImageUploadUrl property is configured, you will be able to see a new tab called “Upload” in Image Properties pop-up of CKeditor.

Follow the below steps to integrate image upload functionality with CKEditor in ASP.NET. Here the solution.
1. Create a New ASP.NET Website “CKeditorDemo”.
2. 
 Download CKEditor and extract in your web folder root.
3. Create a new folder named “Images” in your web folder root.
4. Add the new ASHX Handler file (.ashx) “Upload.ashx” and Copy Paste below code into “Upload.ashx”

<%@ WebHandler Language="C#" Class="Upload" %>
using System;
using System.Web;
public class Upload : IHttpHandler {   
    public void ProcessRequest (HttpContext context) {
       HttpPostedFile uploads = context.Request.Files["upload"];
       string CKEditorFuncNum = context.Request["CKEditorFuncNum"];
       string file = System.IO.Path.GetFileName(uploads.FileName);
       uploads.SaveAs(context.Server.MapPath(".") + "\\Images\\" + file);
//provide direct URL here
       string url = "http://localhost/CKeditorDemo/Images/" + file; 
       
context.Response.Write("<script>window.parent.CKEDITOR.tools.callFunction(" +                                             CKEditorFuncNum + ", \"" + url + "\");</script>");
       context.Response.End();            
    }

    public bool IsReusable {
        get { return false; }
    }
}

5. Call the script and declare Textbox with ID="txtCkEditor" in .aspx file
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
    $(function () {
CKEDITOR.replace('<%=txtCkEditor.ClientID %>', { filebrowserImageUploadUrl:  '/CKeditorDemo/Upload.ashx' }); //path to “Upload.ashx”
    });
</script>

<asp:TextBox ID="txtCkEditor" TextMode="MultiLine" runat="server"></asp:TextBox>

6. You are done with the setting. Now run the website you will see the CKEditor configured in the page.


7. Then choose the image icon in the CKEditor to upload the Image.

8. Select the image by clicking Browse button in Upload tab and select “Send it to the Server” button to save the image in server.

9. The uploaded image is displayed in the CKEditor after clicking “OK”.

Wednesday, 1 May 2013

HTML Codes for Punctuation and Other Characters

HTML codes to put punctuation characters on your Web page

The following list includes the HTML codes for punctuation characters not in the standard character set. Not all browsers support all the codes, so be sure to test your HTML codes before you use them.
Some punctuation characters are part of the Unicode character set, so you need to declare that in the head of your documents:
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

Display Friendly Code Numerical Code Hex Code Description
&#09; &#x09; Horizontal Tab
&#10; &#x10; Line Feed
&#32; &#x20; Space
! ! &#33; &#x21; Exclamation Point
" &quot; &#34; &#x22; Double Quote
# # &#35; &#x23; Number Sign
& &amp; &#38; &#x26; Ampersand
' ' &#39; &#x27; Single Quote
( ( &#40; &#x28; Left Parenthesis
) ) &#41; &#x29; Right Parenthesis
* * &#42; &#x2A; Asterisk (Star)
, , &#44; &#x2C; Comma
- - &#45; &#x2D; Hyphen
. . &#46; &#x2E; Period
/ / &#47; &#x2F; Forward Slash
: : &#58; &#x3A; Colon
; ; &#59; &#x3B; Semi-Colon
? ? &#63; &#x3F; Question Mark
@ @ &#64; &#x40; At Sign
[ [ &#91; &#x5B; Left Square Bracket
\ \ &#92; &#x5C; Back Slash
] ] &#93; &#x5D; Right Square Bracket
^ ^ &#94; &#x5E; Caret
_ _ &#95; &#x5F; Underscore
{ { &#123; &#x7B; Left Curly Brace
| | &#124; &#x7C; Vertical Bar
} } &#125; &#x7D; Right Curly Brace
~ &tilde; &#126; &#x7E; Vertical Bar
&sbquo; &#130; &#x82; Single Low Quote
&dbquo; &#132; &#x84; Double Low Quote
&#133; &#x85; Elipsis
&dagger; &#134; &#x86; Dagger
&Dagger; &#135; &#x87; Double Dagger
&lsaquo; &#139; &#x8B; Left Single Angle Quote
&lsquo; &#145; &#x91; Left Single Quote
&rsquo; &#146; &#x92; Right Single Quote
&ldquo; &#147; &#x93; Left Double Quote
&rdquo; &#148; &#x94; Right Double Quote
&#149; &#x95; Small Bullet
&ndash; &#150; &#x96; En Dash
&mdash; &#151; &#x97; Em Dash
&trade; &#153; &#x99; Trademark
&rsaquo; &#155; &#x9B; Right Single Angle Quote
&nbsp; &#160; &#xA0; Non-Breaking Space
¡ &iexcl; &#161; &#xA1; Inverted Exclamation Point
¦ &brvbar; &#166; &#xA6; Broken Vertical Bar
© &copy; &#169; &#xA9; Copyright
ª &ordf; &#170; &#xAA; Feminine Ordinal Indicator
« &laquo; &#171; &#xAB; Left Angle Quote
¬ &not; &#172; &#xAC; Not Sign
­ &shy; &#173; &#xAD; Soft Hyphen
® &reg; &#174; &#xAE; Registered Symbol
° &deg; &#176; &#xB0; Degree
² &sup2; &#178; &#xB2; Superscript 2
³ &sup3; &#179; &#xB3; Superscript 3
µ &micro; &#181; &#xB5; Micro Sign
&para; &#182; &#xB6; Pilcrow (Paragraph Sign)
· &middot; &#183; &#xB7; Middle Dot
¹ &sup1; &#185; &#xB9; Superscript 1
º &ordm; &#186; &#xBA; Masculine Ordinal Indicator
» &raquo; &#187; &#xBB; Right Angle Quote
¿ &iquest; &#191; &#xBF; Inverted Question Mark
&#8453; &#x2105; Care Of
&#8319; &#x207F; Superscript N
§ &sect; &#167; &#xA7; Section Mark
¨ &iquest; &#191; &#xBF; Inverted Question Mark
&#8213; &#x2015; Horizontal Bar
&#8227; &#x2023; Triangle Bullet
&oline; &#8254; &#x203E; Overline
&#8252; &#x203C; Double Exclamation Point
&#8470; &#x2116; Number Word

Other Character Codes

Note: not all of these characters will display on every browser, be sure to test before you rely on them for your Web site.

Display Friendly Code Numerical Code Hex Code Description
&spades; &#9824; &#x2660; Spade card suit
&clubs; &#9827; &#x2663; Clubs card suit
&diams; &#9830; &#x2666; Diamonds card suit
&hearts; &#9829; &#x2665; Hearts card suit
&larr; &#8592; &#x2190; Left arrow
&rarr; &#8594; &#x2192; Right arrow
&uarr; &#8593; &#x2191; Up arrow
&darr; &#8595; &#x2193; Down arrow
&#9792; &#x2640; Female Indicator
&#9794; &#x2642; Male Indicator
&#9833; &#x2669; Quarter Note
&#9834; &#x266A; Eighth Note
&#9836; &#x266C; Two Eighth Notes
&#9837; &#x266D; Flat
&#9839; &#x266F; Sharp