Skip to main content

HTML Encoding

  • 10 minutes to read

Web browsers can interpret data with reserved characters as HTML markup and execute it as code. Improper handling of reserved characters/untrusted values can introduce security risks (such as CWE-80 and CWE-20). Always encode data to protect your application from cross-site scripting (XSS) attacks.

ASP.NET MVC encodes all strings defined with standard razor syntax (the @ directive). The following methods allow you to encode untrusted values:

HtmlAttributeEncode
Call this method to encode a value before you assign it to an HTML attribute.
HtmlEncode
Call this method to encode a value before you insert it in HTML output.
JavaScriptStringEncode
Call this method to encode a value before you use it in a script.
UrlEncode
Call this method to encode a value before you use it to generate a URL.

DevExpress ASP.NET MVC extensions include built-in mechanisms to encode executable content. This topic describes our encoding logic and documents best practices designed to reduce XSS-related security risks.

#Encode Callback Data

To prevent possible script injections, encode callback data sent from the server to the client. In the following code sample, a view displays a value that the controller sends on callbacks. The Html.Encode method encodes the callback value:

<script>
  function sendRequest() {
    $.ajax({
      type: "POST",
      url: '@Url.Action("EncodeAjaxResponseCallback", "HtmlEncoding")',
      success: function (response) {
        $("#content").html(response);
      },
    });
  }
</script>
<a href="javascript:sendRequest()">Send Ajax Request</a>
<p id="content"></p>
public ActionResult EncodeAjaxResponseCallback() {
    return Content(Html.Encode("an untrusted value"));
}

Ensure that values do not include dangerous content (such as JavaScript code) before you assign the value to a hyperlink’s href attribute.

DevExpress Grid-like extensions automatically remove potentially dangerous content from hyperlink columns for security reasons. Do not override this behavior by setting RemovePotentiallyDangerousNavigateUrl to False, as it may introduce security risks.

@Html.DevExpress().GridView(settings => {
    settings.Name = "gvSorting";
    settings.CallbackRouteValues = new { Controller = "GroupingSorting", Action = "SortingPartial" };
    settings.Columns.Add("ContactName");
    settings.Columns.Add(c => {
        c.FieldName = "EMail";
        c.ColumnType = MVCxGridViewColumnType.HyperLink;
        var hyperLinkProperties = (HyperLinkProperties)c.PropertiesEdit;
        hyperLinkProperties.RemovePotentiallyDangerousNavigateUrl = DefaultBoolean.True;
    });
}).Bind(Model).GetHtml()

#Encode Contents of DevExpress Extensions

When the EncodeHtml property is enabled, DevExpress MVC extensions encode data loaded from a data source. Our MVC extensions use the HttpUtility.HtmlEncode method to replace reserved characters (for example, < and >) with character entity references (&lt; and &gt;).

DevExpress MVC extensions do not encode the following:

  • Data that cannot be edited by users (for instance, column captions and custom header filter items)
  • Content specified in templates
  • Element content and values specified on the client

Always call the Html.Encode method to encode values with HTML markup:

razor
@Html.DevExpress().ComboBox(settings => {
    settings.Name = "ComboBox";
    settings.Properties.TextField = "Name";
    settings.Properties.ValueField = "ID";
    settings.CallbackRouteValues = new { Controller = "Editors", Action = "ComboBoxPartial" };
    settings.SetItemTemplateContent((container) => {
        ViewContext.Writer.Write(
            "<div>" +
                Html.Encode(DataBinder.Eval(container.DataItem, "Name")) + "<br/>" +
                Html.Encode(DataBinder.Eval(container.DataItem, "Phone")) +
            "</div>"
        );
    });
}).BindList(Model).GetHtml()

Refer to the following sections to learn how DevExpress ASP.NET MVC extensions encode HTML.

#BinaryImage

Use the BinaryImage extension’s BinaryImageEditSettings.EncodeHtml property to encode the following property values:

The BinaryImage extension does not encode the BinaryImageEditSettings.Properties.EditingSettings.DropZoneText property value. The extension renders this value as HTML markup. Call the Html.Encode method to encode values.

#Button

Use the Button extension’s ButtonSettings.EncodeHtml property to encode the ButtonSettings.Text property value.

#ButtonEdit

Use the ButtonEdit extension’s ButtonEditSettings.EncodeHtml property to encode the following property values:

#Calendar

Use the Calendar extension’s CalendarSettings.EncodeHtml property to encode the following property values:

#Captcha

Use the Captcha extension’s CaptchaSettings.EncodeHtml property to encode the following property values:

The Captcha extension does not encode the CaptchaSettings.LoadingPanel.Text property value. The extension renders this value as HTML markup. Call the Html.Encode method to encode values.

#CardView

Use the CardView extension’s CardViewSettings.SettingsBehavior.EncodeErrorHtml property to encode error text. Use a column‘s PropertiesEdit.EncodeHtml property to encode column cell values.

To encode text strings displayed within command buttons, set the SettingsCommandButton.EncodeHtml property to true.

The CardView extension does not encode custom header filter item values. The extension renders these values as HTML markup. Call the Html.Encode method to encode values.

#CheckBox

Use the CheckBox extension’s CheckBoxSettings.EncodeHtml property to encode the CheckBoxSettings.Text property value.

#CheckBoxList

Use the CheckBoxList extension’s CheckBoxListSettings.EncodeHtml property to encode the following property values:

#ColorEdit

Use the ColorEdit extension’s ColorEditSettings.EncodeHtml property to encode the following property values:

#ComboBox

Use the ComboBox extension’s ComboBoxSettings.EncodeHtml property to encode the following property values:

The ComboBox extension does not encode the following property values:

The extension renders these values as HTML markup. Call the Html.Encode method to encode values.

#DateEdit

Use the DateEdit extension’s DateEditSettings.EncodeHtml property to encode the following property values:

The DateEdit extension does not encode the DateEditSettings.Properties.SettingsAdaptivity.ModalDropDownCaption property value. The extension renders this value as HTML markup. Call the Html.Encode method to encode values.

#DataView

Use the DataView extension’s DataViewSettings.EncodeHtml property to encode pager button captions.

The DataView extension does not encode DataViewSettings.PagerSettings.ShowMoreItemsText and DataViewSettings.EmptyDataText property values. The extension renders these values as HTML markup. Call the Html.Encode method to encode values.

#Diagram

Use the Diagram extension’s DiagramSettings.EncodeHtml property to encode the Title used for individual custom shapes.

Use the DropDownEdit extension’s DropDownEditSettings.EncodeHtml property to encode the following property values:

The extension does not encode the DropDownEditSettings.Properties.SettingsAdaptivity.ModalDropDownCaption property value. The DropDownEdit extension renders this value as HTML markup. Call the Html.Encode method to encode values.

#FilterControl

Use a column‘s PropertiesEdit.EncodeHtml property to encode FilterControl column cell values.

The FilterControl extension does not encode the following property values:

The extension renders these values as HTML markup. Call the Html.Encode method to encode values.

#FormLayout

Use the FormLayout extension’s FormLayoutSettings.EncodeHtml property to encode the Caption associated with individual items.

#Gantt

The Gantt extension does not encode the Caption of individual columns within the Task List. The extension renders these values as HTML markup. Call the Html.Encode method to encode values.

#GridView

Use the GridView extension’s GridViewSettings.PreviewEncodeHtml property to encode text strings displayed in preview rows. Use the GridViewSettings.SettingsBehavior.EncodeErrorHtml property to encode extension-related error text.

Use a data column’s PropertiesEdit.EncodeHtml property to encode column cell values. Enable the GridViewSettings.SettingsCommandButton.EncodeHtml property to encode text strings displayed within command buttons.

The GridView extension does not encode the Caption of individual columns and custom header filter item values. The extension renders these property values as HTML markup. Call the Html.Encode method to encode values.

#Hint

Use the Hint extension’s HintSettings.EncodeHtml property to encode the following property values:

#HtmlEditor

Use the HtmlEditor extension’s HtmlEditorSettings.EncodeHtml property to encode the following property values:

The HtmlEditor extension does not encode Text and Value property values for individual toolbar custom items. The extension renders these values as HTML markup. Call the Html.Encode method to encode values.

Use the HyperLink extension’s HyperLinkSettings.EncodeHtml property to encode the HyperLinkSettings.Properties.Text property value.

#Image

Use the Image extension’s ImageEditSettings.EncodeHtml property to encode the ImageEditSettings.Properties.Caption property value.

#ImageGallery

Use the ImageGallery extension’s ImageGallerySettings.EncodeHtml property to encode the following property values:

The ImageGallery extension does not encode ImageGallerySettings.PagerSettings.ShowMoreItemsText and ImageGallerySettings.EmptyDataText property values. The extension renders these values as HTML markup. Call the Html.Encode method to encode values.

#ImageSlider

Use the ImageSlider extension’s ImageSliderSettings.EncodeHtml property to encode Text associated with individual items.

#Label

Use the Label extension’s LabelSettings.EncodeHtml property to encode the LabelSettings.Text property value.

#ListBox

Use the ListBox extension’s ListBoxSettings.EncodeHtml property to encode the following property values:

The ListBox extension does not encode the following property values:

The extension renders these values as HTML markup. Call the Html.Encode method to encode these values.

#Memo

Use the Memo extension’s MemoSettings.EncodeHtml property to encode the following property values:

Use the Menu extension’s MenuSettings.EncodeHtml property to encode Text associated with individual items.

Use the NavBar extension’s NavBarSettings.EncodeHtml property to encode the following property values:

#PageControl

Use the PageControl extension’s PageControlSettings.EncodeHtml property to encode Text associated with individual tab pages.

#PivotGrid

Use the PivotGrid extension’s PivotGridSettings.EncodeHtml property to encode the following property values:

#PopupControl

Use the PopupControl extension’s PopupControlSettings.EncodeHtml property to encode the following property values:

#PopupMenu

Use the PopupMenu extension’s PopupMenuSettings.EncodeHtml property to encode Text for individual items.

#ProgressBar

Use the ProgressBar extension’s ProgressBarSettings.EncodeHtml property to encode the ProgressBarSettings.Properties.Caption property value.

#RadioButton

Use the RadioButton extension’s RadioButtonSettings.EncodeHtml property to encode the RadioButtonSettings.Text property value.

#RadioButtonList

Use the RadioButtonList extension’s RadioButtonListSettings.EncodeHtml property to encode the following property values:

#Ribbon

Use the Ribbon extension’s RibbonSettings.EncodeHtml property to encode the following property values:

#RichEdit

Use the RichEdit extension’s RichEditSettings.EncodeHtml property to encode ribbon and popup control elements.

#RoundPanel

The RoundPanel extension’s RoundPanelSettings.EncodeHtml property is not in effect when the RoundPanelSettings.View property value is set to Standard. If this property value is set to GroupBox, the extension’s RoundPanelSettings.EncodeHtml property specifies whether to encode the RoundPanelSettings.HeaderText property value.

#SpinEdit

Use the SpinEdit extension’s SpinEditSettings.EncodeHtml property to encode the following property values:

#Spreadsheet

Use the Spreadsheet extension’s SpreadsheetSettings.EncodeHtml property to encode ribbon and popup control elements.

#TabControl

Use the TabControl extension’s TabControlSettings.EncodeHtml property to encode Text associated with individual tabs.

#TextBox

Use the TextBox extension’s TextBoxSettings.EncodeHtml property to encode the following property values:

#TimeEdit

Use the TimeEdit extension’s TimeEditSettings.EncodeHtml property to encode the following property values:

#TokenBox

Use the TokenBox extension’s TokenBoxSettings.EncodeHtml property to encode the following property values:

The TokenBox extension does not encode the TokenBoxSettings.SettingsLoadingPanel.Text property value. The extension renders this value as HTML markup. Call the Html.Encode method to encode values.

#TrackBar

Use the TrackBar extension’s TrackBarSettings.EncodeHtml property to encode the following property values:

#TreeList

Use the TreeList extension’s TreeListSettings.PreviewEncodeHtml property to encode text strings displayed within preview rows. Use the TreeListSettings.SettingsBehavior.EncodeErrorHtml property to encode extension-related error text.

To encode column cell values, set a column‘s PropertiesEdit.EncodeHtml property to true.

The TreeList extension does not encode custom header filter item values. The extension renders these values as HTML markup. Call the Html.Encode method to encode values.

#TreeView

Use the TreeView extension’s TreeViewSettings.EncodeHtml property to encode Text used for individual nodes.

#UploadControl

Use the UploadControl extension’s UploadControlSettings.EncodeHtml property to encode the following property values:

#ValidationSummary

Use the ValidationSummary extension’s ValidationSummarySettings.EncodeHtml property to encode the ValidationSummarySettings.HeaderText property value.

The extension summarizes validation errors from multiple editors and displays them in a single block. Set an editor’s EncodeHtml property to true to encode the editor’s error text in the ValidationSummary extension.

#VerticalGrid

Use the VerticalGrid extension’s VerticalGridSettings.SettingsBehavior.EncodeErrorHtml property to encode error text. Use a row‘s PropertiesEdit.EncodeHtml property to encode row cell values.

To encode text strings displayed in command buttons, set the VerticalGridSettings.SettingsCommandButton.EncodeHtml property to true.

The VerticalGrid extension does not encode custom header filter item values. The extension renders these values as HTML markup. Call the Html.Encode method to encode values.