如何为Syncfusion Grid数据请求添加Anti-forgery token

问题背景 #

在ASP.NET Core Razor Pages（.NET 6）项目中使用Syncfusion EJ2 Grid控件，配置UrlAdaptor通过POST请求拉取分页数据时，因请求未携带Anti-forgery token，会触发防伪校验返回400错误。官方提供的自定义适配器方案仅覆盖新增、更新、删除操作的令牌注入，未覆盖数据读取场景，且不希望通过关闭防伪校验规避问题。

实现步骤 #

1. 页面内获取当前上下文的防伪令牌 #

首先在Razor视图（Books.cshtml）中注入防伪服务，动态生成当前请求对应的令牌和请求头名称，避免硬编码失效：

@page
@model Site.Pages.BooksModel
@using Syncfusion.EJ2
@* 注入防伪服务 *@
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@{
    // 生成当前用户上下文对应的防伪令牌
    var antiforgeryTokens = Xsrf.GetAndStoreTokens(HttpContext);
}

2. 自定义支持防伪令牌的Url适配器 #

在页面脚本中继承Syncfusion默认的UrlAdaptor，重写请求处理逻辑，在所有POST请求发送前自动注入防伪令牌请求头：

<script>
    // 扩展默认UrlAdaptor，添加自动携带防伪令牌能力
    ej.data.Adaptor.extend("AntiForgeryUrlAdaptor", ej.data.UrlAdaptor, {
        processQuery: function (dataManager, query, hierarchyFilters) {
            // 调用原生方法获取基础请求配置
            const requestConfig = ej.data.UrlAdaptor.prototype.processQuery.apply(this, arguments);
            // 请求发送前注入防伪令牌头
            requestConfig.beforeSend = function (xhr) {
                xhr.setRequestHeader(
                    "@antiforgeryTokens.HeaderName", 
                    "@antiforgeryTokens.RequestToken"
                );
            };
            return requestConfig;
        }
    });
</script>

3. 修改Grid数据源配置，使用自定义适配器 #

将Grid原有的UrlAdaptor替换为自定义的AntiForgeryUrlAdaptor，无需修改后端PageModel的任何逻辑：

@Html.EJS().Grid("BooksIndexGrid").DataSource(dataManager => { 
    dataManager.Url("/books?handler=GetGridData");
    // 替换为支持防伪校验的自定义适配器
    dataManager.Adaptor("AntiForgeryUrlAdaptor");
}).Columns(col =>
{
    col.Field("title").Add();
}).AllowPaging().AllowSorting().Render()

方案说明 #

• 该方案会自动给Grid发起的所有POST请求（包括数据读取、分页、排序、筛选、增删改）添加防伪令牌，不需要单独为读取或CUD操作做额外配置
• 防伪令牌通过请求头传递，不会和Grid的业务查询参数产生冲突，兼容UrlAdaptor的所有默认功能
• 令牌由Razor引擎动态生成，和当前用户请求上下文绑定，不存在硬编码失效问题
• 不需要关闭全局或页面级的防伪校验，符合Razor Pages的安全默认配置

注意：自定义适配器的脚本必须放在Grid渲染代码之前执行，否则会出现适配器找不到的报错。

内容的提问来源于stack exchange，提问作者Jon Ryan