预防DataTables使用中的安全问题


=Start=

缘由:

最近在写一个前端展示页面,用到了DataTables进行表格展示,发现如果使用不当的话可能存在安全问题(一个搞安全的自己写的东西出了安全问题,想想就觉得丢人……),所以在解决了之后整理记录一下,方便以后参考。

正文:

参考解答:

本文将讨论与DataTables直接相关的Web安全攻击,以及如何应对这些攻击的方法。网络安全是一个非常广泛的话题,在这里涵盖所有的话题是不可能的。有关Web和软件安全性的更多一般信息,请参阅更全面、优秀的OWASP站点。

和DataTables直接相关的Web安全问题主要有2类:

  • XSS(跨站脚本攻击)
  • CSRF(跨站请求伪造攻击)

其它的漏洞,比如:未授权访问、越权、SQL注入,主要是和使用了DataTables的网站后台相关,所以这里暂不讨论。

预防XSS攻击(有两种方法):
  1. 【输入层面】禁止提交任何有害数据;
  2. 【输出层面】使用渲染函数对所有不受信任的输出进行编码。

在使用DataTables接收从ajax传过来的数据进行展示时,最有可能出现XSS漏洞,所以,这里使用针对【输出】进行编码的方法来预防XSS漏洞:

<script>
    $( document ).ready(function() {
        $('#someTable').DataTable({
            "processing"true,
            "serverSide"true,
            "ajax": {
                "url""/someUrl",
                "type""POST"
            },
            "columns": [
                 "data""c1" },
                 "data""c2" },
                 ...
            ],
            "columnDefs": [
                {
                  "targets""_all"//针对所有列
                  "render""$.fn.dataTable.render.text()"//都使用render函数编码
                }
            ],
        });
    });
</script>
注意事项:
  • $.fn.dataTable.render.text 这个功能是在 1.10.10 这个版本加上的,早先版本不支持,参考链接
预防CSRF攻击(一种方法):
  1. 使用有效的token;

设置方法(有三种):

// 设置一个全局header(这确保了来自页面的所有Ajax请求都有CSRF token)
$.ajaxSetup( {
    headers: {
        'CSRFToken': TOKEN
    }
} );
// 将token作为ajax配置的header进行提交
$('#myTable').DataTable( {
    ajax: {
        url: '...',
        headers: {
            'CSRFToken': TOKEN
        }
    }
} );
// 将token作为请求数据的一部分进行提交
$('#myTable').DataTable( {
    ajax: {
        url: '...',
        data: function ( d ) {
            d.CSRFToken = TOKEN;
        }
    }
} );

 

如何查看当前页面加载的jQuery/DataTables版本?
  • $().jquery #查看jQuery版本
  • $.fn.dataTable.version #查看DataTables版本
参考链接:

=END=


《“预防DataTables使用中的安全问题”》 有 8 条评论

  1. 7. Warning: Ajax error
    https://datatables.net/manual/tech-notes/7
    `
    DataTables warning: table id=xxx – Ajax error. For more information about this error, please see http://datatables.net/tn/7

    当 DataTables 使用 ajax 选项来加载数据时,如果服务器给出的是除有效的HTTP 2xx响应以外的任何其他响应,则都可能会触发此常规错误。此时可以通过Chrome控制台调试错误。

    最常见的错误原因有:
    404 – Not Found.
    检查URL的请求参数,看是否因为请求参数错误导致的404 Not Found。

    500 – Internal Error.
    服务器在响应请求时遇到错误。检查服务器的错误日志,了解发生此错误的原因。

    因 Access-Control-Allow-Origin 引发的跨域问题
    跨域发请求。
    `

  2. 跨域方式及其产生的安全问题
    https://xz.aliyun.com/t/4470
    `
    前言
    同源策略
      概念
      作用
    跨域数据传输的方式
      document.domain
      window.name
      location.hash
      PostMessage
      JSONP
      CORS
    参考
    `

  3. 全面分析前端的网络请求方式
    https://mp.weixin.qq.com/s/enzhVDrG1Op6oomecbXcMw
    `
    一、前端进行网络请求的关注点
    大多数情况下,在前端发起一个网络请求我们只需关注下面几点:
    传入基本参数( url,请求方式)
    请求参数、请求参数类型
    设置请求头
    获取响应的方式
    获取响应头、响应状态、响应结果
    异常处理
    携带 cookie设置
    跨域请求

    二、前端进行网络请求的方式
    form表单、 ifream、刷新页面
    Ajax – 异步网络请求的开山鼻祖
    jQuery – 一个时代
    fetch – Ajax的替代者
    axios、request等众多开源库

    三、关于网络请求的疑问
    Ajax的出现解决了什么问题
    原生 Ajax如何使用
    jQuery的网络请求方式
    fetch的用法以及坑点
    如何正确的使用 fetch
    如何选择合适的跨域方式

    四、Ajax的出现解决了什么问题
    五、原生Ajax的用法
    六、jQuery对Ajax的封装
    七、jQuery的替代者
    八、fetch的使用
    九、fetch polyfill源码分析
    十、fetch的坑点
    十一、对fetch的封装
    十二、跨域总结
    `

回复 hi 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注