ASP.NET Core Razor页面中Bootstrap Table结合CSP报错排查

问题描述 #

在ASP.NET Core Razor页面中使用Bootstrap Table，引入对应JS文件后出现报错：Chrome控制台提示TypeError: Cannot read properties of undefined (reading 'field')，Edge控制台提示问题源于Content Security Policy（CSP）。

当前CSP配置（Program.cs） #

app.Use(async (context, next) =>
{
    context.Response.Headers.Add("Content-Security-Policy", "style-src localhost 'self' 'unsafe-inline' 'unsafe-eval'; script-src localhost https://cdnjs.cloudflare.com https://cdn.plot.ly 'self' 'unsafe-inline' 'unsafe-eval'");
    await next();
});

页面引入的CSS/JS资源 #

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/Portal.styles.css" asp-append-version="true" />
<script src="~/lib/jquery/dist/jquery.js" asp-append-version="true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://cdn.plot.ly/plotly-3.0.1.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="~/lib/bootstrap-table/bootstrap-table.css">
<script src="~/lib/bootstrap-table/bootstrap-table.min.js" asp-append-version="true"></script>

浏览器检测到的当前CSP #

style-src localhost 'self' 'unsafe-inline' 'unsafe-eval'; script-src localhost https://cdnjs.cloudflare.com https://cdn.plot.ly 'self' 'unsafe-inline' 'unsafe-eval'

具体报错信息 #

jQuery.Deferred exception: Cannot read properties of undefined (reading 'field')

TypeError: Cannot read properties of undefined (reading 'field')

at HTMLTableCellElement. (https://localhost:7244/lib/bootstrap-table/bootstrap-table.min.mbhw1qrhxy.js:10:66044)

at jQuery.each (https://localhost:7244/lib/jquery/dist/jquery.0i3buxo5is.js:383:19)

at jQuery.fn.init.each (https://localhost:7244/lib/jquery/dist/jquery.0i3buxo5is.js:205:17)

at HTMLTableRowElement. (https://localhost:7244/lib/bootstrap-table/bootstrap-table.min.mbhw1qrhxy.js:10:65856)

at jQuery.each (https://localhost:7244/lib/jquery/dist/jquery.0i3buxo5is.js:383:19)

at jQuery.fn.init.each (https://localhost:7244/lib/jquery/dist/jquery.0i3buxo5is.js:205:17)

at Object.trToData (https://localhost:7244/lib/bootstrap-table/bootstrap-table.min.mbhw1qrhxy.js:10:65697)

at e.value (https://localhost:7244/lib/bootstrap-table/bootstrap-table.min.mbhw1qrhxy.js:10:91667)

at e.value (https://localhost:7244/lib/bootstrap-table/bootstrap-table.min.mbhw1qrhxy.js:10:86549)

at HTMLTableElement. (https://localhost:7244/lib/bootstrap-table/bootstrap-table.min.mbhw1qrhxy.js:10:156533) undefined
jQuery.Deferred.exceptionHook @ jquery.0i3buxo5is.js:3783
process @ jquery.0i3buxo5is.js:3561

setTimeout (anonymous) @ jquery.0i3buxo5is.js:3602

fire @ jquery.0i3buxo5is.js:3223

fireWith @ jquery.0i3buxo5is.js:3353

fire @ jquery.0i3buxo5is.js:3361

fire @ jquery.0i3buxo5is.js:3223
fireWith @ jquery.0i3buxo5is.js:3353

ready @ jquery.0i3buxo5is.js:3844

completed @ jquery.0i3buxo5is.js:3854Understand this warning
jquery.0i3buxo5is.js:3793

Uncaught TypeError: Cannot read properties of undefined (reading 'field')

at HTMLTableCellElement. (bootstrap-table.min.mbhw1qrhxy.js:10:66044)

at jQuery.each (jquery.0i3buxo5is.js:383:19)

at jQuery.fn.init.each (jquery.0i3buxo5is.js:205:17)

at HTMLTableRowElement. (bootstrap-table.min.mbhw1qrhxy.js:10:65856)

at jQuery.each (jquery.0i3buxo5is.js:383:19)

at jQuery.fn.init.each (jquery.0i3buxo5is.js:205:17)

at Object.trToData (bootstrap-table.min.mbhw1qrhxy.js:10:65697)

at e.value (bootstrap-table.min.mbhw1qrhxy.js:10:91667)

at e.value (bootstrap-table.min.mbhw1qrhxy.js:10:86549)

at HTMLTableElement. (bootstrap-table.min.mbhw1qrhxy.js:10:156533)
(anonymous) @ bootstrap-table.min.mbhw1qrhxy.js:10

each @ jquery.0i3buxo5is.js:383

each @ jquery.0i3buxo5is.js:205

(anonymous) @ bootstrap-table.min.mbhw1qrhxy.js:10

each @ jquery.0i3buxo5is.js:383

each @ jquery.0i3buxo5is.js:205

trToData @ bootstrap-table.min.mbhw1qrhxy.js:10

value @ bootstrap-table.min.mbhw1qrhxy.js:10

value @ bootstrap-table.min.mbhw1qrhxy.js:10

(anonymous) @ bootstrap-table.min.mbhw1qrhxy.js:10

each @ jquery.0i3buxo5is.js:383

each @ jquery.0i3buxo5is.js:205

t.fn.bootstrapTable @ bootstrap-table.min.mbhw1qrhxy.js:10
(anonymous) @ bootstrap-table.min.mbhw1qrhxy.js:10

mightThrow @ jquery.0i3buxo5is.js:3489

process @ jquery.0i3buxo5is.js:3557

setTimeout
(anonymous) @ jquery.0i3buxo5is.js:3602

fire @ jquery.0i3buxo5is.js:3223

fireWith @ jquery.0i3buxo5is.js:3353

fire @ jquery.0i3buxo5is.js:3361

fire @ jquery.0i3buxo5is.js:3223

fireWith @ jquery.0i3buxo5is.js:3353

ready @ jquery.0i3buxo5is.js:3844

completed @ jquery.0i3buxo5is.js:3854

解决方案 #

1. 检查表格DOM结构（核心修复） #

Chrome报错的field未定义，通常是因为Bootstrap Table无法识别表格列对应的字段。需确保<thead>中的<th>标签都设置了data-field属性，示例：

<table id="targetTable">
  <thead>
    <tr>
      <th data-field="userId">用户ID</th>
      <th data-field="userName">用户名</th>
      <th data-field="createTime">创建时间</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据行 -->
  </tbody>
</table>

2. 验证JS初始化配置 #

如果使用JS方式初始化表格，需确保列配置包含field属性，示例：

$('#targetTable').bootstrapTable({
  columns: [
    { field: 'userId', title: '用户ID' },
    { field: 'userName', title: '用户名' },
    { field: 'createTime', title: '创建时间' }
  ],
  data: [/* 数据源数组 */]
});

避免混合HTML属性与JS配置时出现字段定义冲突。

3. 调整CSP配置（针对Edge提示） #

当前CSP缺少部分可能需要的指令，可补充后测试：

app.Use(async (context, next) =>
{
    context.Response.Headers.Add("Content-Security-Policy", 
        "default-src 'self'; " +
        "style-src 'self' 'unsafe-inline'; " +
        "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdnjs.cloudflare.com https://cdn.plot.ly; " +
        "img-src 'self' data:; " +
        "connect-src 'self'");
    await next();
});

生产环境可根据实际使用的资源逐步收紧规则。

内容的提问来源于stack exchange，提问作者Wallace B. McClure