ASPIRE

预防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=

Docker

, ,
, , , ,

《 “预防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 引发的跨域问题
    跨域发请求。
    `

    回复

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

    回复

  8. 全面分析前端的网络请求方式
    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的封装
    十二、跨域总结
    `

    回复

发表回复

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