Security and Validation Useful Tips
Preventing Cross-site scripting (XSS) and implementing validation for Cross-Site Request Forgery(CSRF) tokens can significantly boost the security of the application and prevent malicious script execution.
Cross-Site Scripting
XSS Attacks
Cross-site scripting attacks are a type of injection that aims to, in the majority of cases, cause harm to the application, gather personal information and executing malicious scripts. The attackers can use the XSS to bypass access controls such as the same-origin policy.
XSS Protection
Escaping any unsafe HTML tags should be mainly executed on the server-side. The client-side escaping can be easily bypassed if the attacker intercepts the to-be sent request and manually replaces the escaped tags. The server would receive the unescaped and unsafe HTML tags. This requires for a server-side validation and escaping for any potentially harmful tags. As a rule of thumb, unsafe HTML should never be saved in the database.
The server-side implementation for escaping the unsafe HTML tags has to be handled by the developer according to their go-to practices and preferences.
XSS handling in Telerik UI for ASP.NET Core
Several Telerik UI for ASP.NET Core components allow the user to input HTML or can display non-encoded HTML and can be a potential source of Cross-site scripting attacks, if not handled by the developer.
Editor
The Editor provides configuration options that help the developer prevent XSS attacks. By default, the Editor does not allow the execution of scripts inside its content area and also provides configuration options that allow the developer to implement custom sanitizing functionality. Read more on the XSS protection for the Editor in the Preventing Cross-Site Scripting article.
Grid
The Columns .Encoded() configuration option of the Grid helper provides the possibility to display non-encoded HTML value, if set to false. for the Grid TagHelper, use the column encoded attribute. In such scenarios, it is important to sanitize the values on the server, to ensure only safe HTML is rendered.
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName).Encoded(false);
columns.Bound(p => p.UnitPrice);
})
...
)
@addTagHelper *, Kendo.Mvc
<kendo-grid name="Grid">
<columns>
<column field="ProductName" encoded="false"/>
<column field="UnitPrice"/>
</columns>
....
</kendo-grid>
Spreadsheet
When the Html() configuration option of the spreadsheet is set to true, or the client-side html method is used, the user is allowed to input HTML. When using the TagHelper implementaion of the component, enable the cell html attribute. In such scenarios, it is important to sanitize cell values on the server to ensure only safe html is passed.
@(Html.Kendo().Spreadsheet()
.Name("spreadsheet")
.HtmlAttributes(new { style = "width:100%" })
.Sheets(sheets =>
{
sheets.Add()
.Name("Report")
.Columns(columns =>
{
columns.Add().Width(100);
columns.Add().Width(215);
})
.Rows(rows =>
{
rows.Add().Height(25).Cells(cells =>
{
cells.Add()
.Value("<i>ID</i>")
.Html(true)
.TextAlign(SpreadsheetTextAlign.Center);
cells.Add()
.Value("Product")
.TextAlign(SpreadsheetTextAlign.Center);
});
});
})
)
@addTagHelper *, Kendo.Mvc
<kendo-spreadsheet name="spreadsheet" style="width: 100%">
<sheets>
<sheet name="Report">
<columns>
<sheet-column width="100" />
<sheet-column width="215" />
</columns>
<rows>
<sheet-row height="25">
<cells>
<cell value="<i>ID</i>" html="true" text-align="SpreadsheetTextAlign.Center"></cell>
<cell value="Product" text-align="SpreadsheetTextAlign.Center"></cell>
</cells>
</sheet-row>
</rows>
</sheet>
</sheets>
</kendo-spreadsheet>
PanelBar
The PanelBar Items configuration option allows the developer to disable the encoding for a particular item. for the panelbar taghelper, disable the encoded attribute in the panelbar-item tag.
@(Html.Kendo().PanelBar()
.Name("PanelBar")
.Items(items =>
{
items.Add().Text("<b>First Item</b>").Encoded(false);
items.Add().Text("Second Item");
})
)
@addTagHelper *, Kendo.Mvc
<kendo-panelbar name="panelbar">
<items>
<panelbar-item text="<b>First Item</b>" encoded="false"></panelbar-item>
<panelbar-item text="Second Item"></panelbar-item>
</items>
</kendo-panelbar>
In such scenarios, the use of HTML for the item text is allowed. The developer should sanitize any values on the server to ensure only safe html is passed.
Menu
The Menu Items configuration option or the menu-item tag allows the developer to disable the encoding for a menu item.
@(Html.Kendo().Menu()
.Name("Menu")
.ItemAction(item =>
{
item.Text("<b>Menu item 1</b>").Encoded(false);
item.Text(Menu item 2);
})
)
@addTagHelper *, Kendo.Mvc
<kendo-menu name="Menu">
<items>
<menu-item text="<b>Menu item 1</b>" encoded="false"></menu-item>
<menu-item text="Menu item 2"></menu-item>
</items>
</kendo-menu>
In such scenarios, the use of HTML for the Menu item text is allowed. The developer should sanitize any values on the server to ensure only safe html is passed.
Kendo Templates
The usage of Kendo Templates allows the developer to decide whether the displayed HTML will be encoded or not. When using Kendo Templates and working with data from unknown sources, it is advisable to use HTML encoding, in case users have included malicious HTML markup in the content.
DataSourceRequest
The DataSourceRequest object contains information on how the data, requested by a the Kendo widget, should be paged, filtered, sorted, grouped. This information is further translated internally to System.Linq.Expressions.Expression class. In the end, the ToDataSourceResult executes a LINQ query based on the information contained DataSourceRequest object, passed to an action method. The DataSourceRequest object itself does not contain user-provided data and does not contain HTML.
//
// Summary:
// Provides information about paging, sorting, filtering and grouping of data.
public class DataSourceRequest
{
public DataSourceRequest()
{
Page = 1;
Aggregates = new List<AggregateDescriptor>();
};
//
// Summary:
// The current page.
public int Page { get; set; }
//
// Summary:
// The page size.
public int PageSize { get; set; }
//
// Summary:
// The sorting of the data.
public IList<SortDescriptor> Sorts { get; set; }
//
// Summary:
// The filtering of the data.
public IList<IFilterDescriptor> Filters { get; set; }
//
// Summary:
// The grouping of the data.
public IList<GroupDescriptor> Groups { get; set; }
//
// Summary:
// The data aggregation.
public IList<AggregateDescriptor> Aggregates { get; set; }
//
// Summary:
// Indicates whether group paging is enabled.
public bool GroupPaging { get; set; }
//
// Summary:
// Indicates whether subgroup count should be included
public bool IncludeSubGroupCount { get; set; }
//
// Summary:
/// The current skip.
public int Skip { get; set; }
//
// Summary:
// The current take.
public int Take { get; set; }
}
Cross-Site Request Forgery
The Cross-Site Request Forgery is generally initiated by a malicious script and not the authenticated user. Submitting a request or a form on the behalf of the authenticated user can potentially expose the application at risk, accessing internal information and exercising harmful operations on the application.
The anti-forgery tokens are used to ensure that a form or a request has been submitted by the user and not by a malicious script. The also called request validation tokens are hidden inputs that have a randomly generated value that cannot be read by a script.
Implement CSFR token validation
-
Include the CSFR token on the page:
Html.AntiForgeryToken() -
Send the token to the server-side by using the transport.data option of the DataSource. The
kendo.antiforgerytokensmethod returns an object that contains common CSRF tokens that are found on the page..Read(read=>read.Action("DetailProducts_Read", "Grid").Data("sendForgery")) // . . . <script> function sendForgery() { return kendo.antiForgeryTokens(); } </script> -
Validate the token by decorating the ActionMethods with the
[ValidateAntiForgeryToken]data annotation:[ValidateAntiForgeryToken] public ActionResult ActionMethodName( ModelName model ) { }