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"));
}
#Sanitize Links
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 (<
and >
).
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:
@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:
- BinaryImageEditSettings.Properties.Caption
- BinaryImageEditSettings.Properties.CaptionSettings.OptionalMark
- BinaryImageEditSettings.Properties.CaptionSettings.RequiredMark
- BinaryImageEditSettings.Properties.EditingSettings.EmptyValueText
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:
- Text used for individual buttons
- ButtonEditSettings.Properties.Caption
- ButtonEditSettings.Properties.CaptionSettings.OptionalMark
- ButtonEditSettings.Properties.CaptionSettings.RequiredMark
- ButtonEditSettings.Properties.ClearButton.Text
- ButtonEditSettings.Properties.HelpText
- ButtonEditSettings.Properties.MaskSettings.ErrorText
#Calendar
Use the Calendar extension’s CalendarSettings.EncodeHtml property to encode the following property values:
- CalendarSettings.Properties.Caption
- CalendarSettings.Properties.CaptionSettings.OptionalMark
- CalendarSettings.Properties.CaptionSettings.RequiredMark
- CalendarSettings.Properties.ClearButtonText
- CalendarSettings.Properties.FastNavProperties.CancelButtonText
- CalendarSettings.Properties.FastNavProperties.OkButtonText
- CalendarSettings.Properties.TodayButtonText
#Captcha
Use the Captcha extension’s CaptchaSettings.EncodeHtml property to encode the following property values:
- CaptchaSettings.RefreshButton.Text
- CaptchaSettings.TextBox.LabelText
- CaptchaSettings.ValidationSettings.ErrorText
- CaptchaSettings.ValidationSettings.RequiredField.ErrorText
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:
- Text used for individual items
- Value of individual items
- CheckBoxListSettings.Properties.Caption
- CheckBoxListSettings.Properties.CaptionSettings.OptionalMark
- CheckBoxListSettings.Properties.CaptionSettings.RequiredMark
#ColorEdit
Use the ColorEdit extension’s ColorEditSettings.EncodeHtml property to encode the following property values:
- Text used for individual buttons
- ColorEditSettings.Properties.AutomaticColorItemCaption
- ColorEditSettings.Properties.Caption
- ColorEditSettings.Properties.CaptionSettings.OptionalMark
- ColorEditSettings.Properties.CaptionSettings.RequiredMark
- ColorEditSettings.Properties.ClearButton.Text
- ColorEditSettings.Properties.CustomColorButtonText
- ColorEditSettings.Properties.DropDownButton.Text
- ColorEditSettings.Properties.HelpText
#ComboBox
Use the ComboBox extension’s ComboBoxSettings.EncodeHtml property to encode the following property values:
- Text used for individual buttons
- Text used for individual items
- Value of individual items
- ComboBoxSettings.Properties.Caption
- ComboBoxSettings.Properties.CaptionSettings.OptionalMark
- ComboBoxSettings.Properties.CaptionSettings.RequiredMark
- ComboBoxSettings.Properties.ClearButton.Text
- ComboBoxSettings.Properties.DropDownButton.Text
- ComboBoxSettings.Properties.HelpText
The ComboBox extension does not encode the following property values:
- Caption used for individual columns
- ComboBoxSettings.Properties.SettingsAdaptivity.ModalDropDownCaption
- ComboBoxSettings.SettingsLoadingPanel.Text
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:
- Text used for individual buttons
- DateEditSettings.Properties.CalendarProperties.ClearButtonText
- DateEditSettings.Properties.CalendarProperties.FastNavProperties.CancelButtonText
- DateEditSettings.Properties.CalendarProperties.FastNavProperties.OkButtonText
- DateEditSettings.Properties.CalendarProperties.TodayButtonText
- DateEditSettings.Properties.Caption
- DateEditSettings.Properties.CaptionSettings.OptionalMark
- DateEditSettings.Properties.CaptionSettings.RequiredMark
- DateEditSettings.Properties.ClearButton.Text
- DateEditSettings.Properties.DateRangeSettings.ErrorTextDaysPlaceholder
- DateEditSettings.Properties.DateRangeSettings.ErrorTextDecadesPlaceholder
- DateEditSettings.Properties.DateRangeSettings.ErrorTextMonthsPlaceholder
- DateEditSettings.Properties.DateRangeSettings.ErrorTextYearsPlaceholder
- DateEditSettings.Properties.DateRangeSettings.MinErrorText
- DateEditSettings.Properties.DateRangeSettings.RangeErrorText
- DateEditSettings.Properties.DropDownButton.Text
- DateEditSettings.Properties.HelpText
- DateEditSettings.Properties.TimeSectionProperties.CancelButtonText
- DateEditSettings.Properties.TimeSectionProperties.OkButtonText
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.
#DropDownEdit
Use the DropDownEdit extension’s DropDownEditSettings.EncodeHtml property to encode the following property values:
- Text used for individual buttons
- DropDownEditSettings.Properties.Caption
- DropDownEditSettings.Properties.CaptionSettings.OptionalMark
- DropDownEditSettings.Properties.CaptionSettings.RequiredMark
- DropDownEditSettings.Properties.ClearButton.Text
- DropDownEditSettings.Properties.DropDownButton.Text
- DropDownEditSettings.Properties.HelpText
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:
- DisplayName used for individual columns
- PropertiesEdit.NullDisplayText used for individual columns
- MVCxFilterControlSettings.SettingsLoadingPanel.Text
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:
- Text used for individual context menu items
- HtmlEditorSettings.SettingsValidation.ErrorText
- HtmlEditorSettings.SettingsValidation.RequiredField.ErrorText
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.
#HyperLink
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:
- FullscreenViewerText of individual items
- Text used for individual items
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:
- Text used for individual items
- Value of individual items
- ListBoxSettings.Properties.Caption
- ListBoxSettings.Properties.CaptionSettings.OptionalMark
- ListBoxSettings.Properties.CaptionSettings.RequiredMark
The ListBox extension does not encode the following property values:
- Caption of individual columns
- ListBoxSettings.Properties.SelectAllText
- ListBoxSettings.SettingsLoadingPanel.Text
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:
- MemoSettings.Properties.Caption
- MemoSettings.Properties.CaptionSettings.OptionalMark
- MemoSettings.Properties.CaptionSettings.RequiredMark
- MemoSettings.Properties.HelpText
#Menu
Use the Menu extension’s MenuSettings.EncodeHtml property to encode Text associated with individual items.
#NavBar
Use the NavBar extension’s NavBarSettings.EncodeHtml property to encode the following property values:
- Text used for individual groups
- Text used for individual group items
#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:
- Text used for individual items
- Value of individual items
- RadioButtonListSettings.Properties.Caption
- RadioButtonListSettings.Properties.CaptionSettings.OptionalMark
- RadioButtonListSettings.Properties.CaptionSettings.RequiredMark
#Ribbon
Use the Ribbon extension’s RibbonSettings.EncodeHtml property to encode the following property values:
- Text used for individual tabs
- Text used for individual tab groups
- Text used for individual group items
#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:
- Text of individual buttons
- SpinEditSettings.Properties.Caption
- SpinEditSettings.Properties.CaptionSettings.OptionalMark
- SpinEditSettings.Properties.CaptionSettings.RequiredMark
- SpinEditSettings.Properties.ClearButton.Text
- SpinEditSettings.Properties.HelpText
#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:
- TextBoxSettings.Properties.Caption
- TextBoxSettings.Properties.CaptionSettings.OptionalMark
- TextBoxSettings.Properties.CaptionSettings.RequiredMark
- TextBoxSettings.Properties.HelpText
- TextBoxSettings.Properties.MaskSettings.ErrorText
#TimeEdit
Use the TimeEdit extension’s TimeEditSettings.EncodeHtml property to encode the following property values:
- Text used for individual buttons
- TimeEditSettings.Properties.Caption
- TimeEditSettings.Properties.CaptionSettings.OptionalMark
- TimeEditSettings.Properties.CaptionSettings.RequiredMark
- TimeEditSettings.Properties.ClearButton.Text
- TimeEditSettings.Properties.HelpText
#TokenBox
Use the TokenBox extension’s TokenBoxSettings.EncodeHtml property to encode the following property values:
- Text used for individual items
- Value of individual items
- TokenBoxSettings.Properties.Caption
- TokenBoxSettings.Properties.CaptionSettings.OptionalMark
- TokenBoxSettings.Properties.CaptionSettings.RequiredMark
- TokenBoxSettings.Properties.HelpText
- TokenBoxSettings.Properties.Tokens
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:
- Text used for individual items
- Tooltip used for individual items
- TrackBarSettings.Properties.Caption
- TrackBarSettings.Properties.CaptionSettings.OptionalMark
- TrackBarSettings.Properties.CaptionSettings.RequiredMark
#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.