搜索到
28
篇与
的结果
-
jsplumb 开发文档收集 jsplumb基本概念https://www.jianshu.com/p/0e7bb5c081c8https://www.jianshu.com/p/0e7bb5c081c8jsplumb 阅读笔记（英文文档翻译）https://www.cnblogs.com/ysx215/p/7615677.html拓扑图编辑器-jsplumb基本配置https://www.jianshu.com/p/d68a8e61ff2d【原英文文档】https://docs.jsplumbtoolkit.com/community/current/articles/connections.html#detachinggithub 中文文档https://github.com/MarvenGong/jsplumb-chinese-tutorial -
gitbook出现TypeError: cb.apply is not a function解决办法 执行gitbook serve的时候出现如下错误> fastmock-doc@1.0.0 serve /Users/gongminghua/Public/03private/fastmock-docs > gitbook serve Live reload server started on port: 35729 Press CTRL+C to quit ... /usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs/polyfills.js:287 if (cb) cb.apply(this, arguments) ^ TypeError: cb.apply is not a function at /usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs/polyfills.js:287:18 at FSReqCallback.oncomplete (fs.js:169:5) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! fastmock-doc@1.0.0 serve: `gitbook serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the fastmock-doc@1.0.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/gongminghua/.npm/_logs/2020-12-23T02_00_45_660Z-debug.log 按照提示中的路径，/usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs/polyfills.js 打开polyfills.js文件，找到这个函数function statFix (orig) { if (!orig) return orig // Older versions of Node erroneously returned signed integers for // uid + gid. return function (target, cb) { return orig.call(fs, target, function (er, stats) { if (!stats) return cb.apply(this, arguments) if (stats.uid < 0) stats.uid += 0x100000000 if (stats.gid < 0) stats.gid += 0x100000000 if (cb) cb.apply(this, arguments) }) } }在第62-64行调用了这个函数fs.stat = statFix(fs.stat) fs.fstat = statFix(fs.fstat) fs.lstat = statFix(fs.lstat)把这三行代码注释掉就解决报错了
-
微信公众平台、微信公众平台.小程序、微信.开放平台三者关系及unionid 一、微信公众平台、微信公众平台.小程序、微信.开放平台登录地址 项目 微信公众平台 微信公众平台.小程序 微信。开放平台 登录地址 https://mp.weixin.qq.com https://mp.weixin.qq.com https://open.weixin.qq.com 登录账号 xxx@**** xxx**** xxx**** 简称 公众号平台 小程序平台 开放平台 这三个平台必须使用不同的账号申请，因为账号是邮箱地址，所以，必须使用3个不同的邮箱地址作为账号，如果某个邮箱地址已经是微信公众平台的账号，则这个邮箱地址就不能用于另外的两个平台。事实上，微信公众平台为了和微信公众平台.小程序区分开来，也可以称作微信公众平台.公众号。以下简称：公众号平台、小程序平台、开放平台。二、三者之间的关系如果需要搞清楚三者之间的关系，就涉及到unionid。关于unionid，在【微信官方文档.公众号】是这样描述的：开发者可通过OpenID来获取用户基本信息。特别需要注意的是，如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号，用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。综上：1、公众号平台负责管理公众号；2、小程序平台负责管理小程序；3、每个平台对于某个用户都会产生一个OpenID,在单独的平台上这个OpenID是唯一的，但是如果某个用户既要使用公众号，又有小程序，那么在公众号和小程序平台上OpenID是分别不一样的。4、此时就需要开放平台，凡是在开放平台登记的应用，对于这个开放平台都将使用一个统一的unionID。这样就可以在不同的平台上唯一确定某个用户了。这么理解，公众号平台和小程序平台是相互独立的平台，可以各自开发各自的应用，如果是一个独立的应用，那么只需要使用OpenID就可以区别用户，例如如果只是使用公众号，不使用小程序，那么直接使用公众号的OpenID就可以了，繁殖对于小程序来说也是一样的。同一个用户在公众号平台和在小程序平台上的OpenID是不一样的，但是实际应用是经常会需要公众号和小程序同时使用，这样就需要使用开放平台来统一OpenID，最终出现了unionid。这个是唯一的，不变的！三、小程序开发中关于使用Session_Key可以解开得到unionid问题按照官方文档的说明，前端是可以通过 wx.login 获取到 code 登录凭证，然后在后台通过 auth.code2Session 换取openid,session_key,unionid，需要说明的是，unionid是用户在开放平台的唯一标识符，在满足 UnionID 下发条件的情况下会返回。那么满足什么样的条件会直接返回unionid呢？答案是注册认证微信开放平台，注意一定要认证，也就是说要交300元通过认证，这样后台就会直接返回unionid。否则，按照官方说的如果没有返回unionid，也可以通过session_key在后台进行解密，解密需要的相关参数需要前端通过wx.getUserInfo调用获取到userInfo，rawData，signature，encryptedData，iv，cloudID参数。后台通过加密算法解密，最终可以得到unionid。 我测试的时候，如果没有通过开放平台认证，密文数据中始终没有返回unionid，不知道不认证的情况下满足什么样的条件才会返回。————————————————版权声明：本文为CSDN博主「sensor_WU」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/sensor_WU/java/article/details/103976716
-
express框架中session持久化存储 在web开发中，我们经常后听到前端程序员的依据抱怨"又重启了啊？我又要重新登录"，这是因为在传统的web开发中，服务器一旦关机，内存中的会话信息会丢失，就跟前端开发存在变量中的数据，浏览器刷新后会丢失一样。为了解决这个问题，引入了session持久化的概念，将服务端和客户端的会话信息保存到一个载体中，不管服务器怎么重启，只要载体中的信息没有丢失，就能拿到会话信息，载体一般为数据库或者文件，但是，得益于redis的特性，我们一般选择用redis作为存储载体。下面是nodejs中用redis做session持久化的例子// app.js var session = require('express-session'); var RedisStore = require('connect-redis')(session); var radisOptions = { 'host': 'localhost', 'port': '6379', 'ttl': 7200, // 存储时间，单位秒，这个时间要和下面session中间件的cookie选项时间一致 'logErrors': false }; var sessionOptions = { secret : 'secret', // 对session id 相关的cookie 进行签名 resave : true, rolling: true, saveUninitialized: true, // 是否保存未初始化的会话 cookie : { maxAge : 1000 * 60 * 60 * 2, // 设置 session 的有效时间，单位毫秒 这里设置两小时 }, }; // 生产环境开启持久化存储 if (config.get('enviroment') === 'prod') { sessionOptions.store = new RedisStore(radisOptions) } app.use(session(sessionOptions));
-
XSS攻击原理和防御 前端安全之XSSXSS定义XSS, 即为（Cross Site Scripting）, 中文名为跨站脚本, 是发生在目标用户的浏览器层面上的，当渲染DOM树的过程成发生了不在预期内执行的JS代码时，就发生了XSS攻击。跨站脚本的重点不在‘跨站’上，而在于‘脚本’上。大多数XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码。实际上是在目标网站的作用域下执行了这段js代码。XSS攻击方式1,反射型 XSS反射型XSS，也叫非持久型XSS，是指发生请求时，XSS代码出现在请求URL中，作为参数提交到服务器，服务器解析并响应。响应结果中包含XSS代码，最后浏览器解析并执行。从概念上可以看出，反射型XSS代码是首先出现在URL中的，然后需要服务端解析，最后需要浏览器解析之后XSS代码才能够攻击。举一个小栗子。使用express起一个web服务器，然后设置一下请求接口。通过ajax的GET请求将参数发往服务器，服务器解析成json后响应。将返回的数据解析后显示到页面上。（没有对返回的数据进行解码和过滤等操作。）<textarea name="txt" id="txt" cols="80" rows="10"> <button type="button" id="test">测试</button>var test = document.querySelector('#test') test.addEventListener('click', function () { var url = `/test?test=${txt.value}` // 1. 发送一个GET请求 var xhr = new XMLHttpRequest() xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { // 3. 客户端解析JSON，并执行 var str = JSON.parse(xhr.responseText).test var node = `${str}` document.body.insertAdjacentHTML('beforeend', node) } else { console.log('error', xhr.responseText) } } } xhr.open('GET', url, true) xhr.send(null) }, false)expressvar express = require('express'); var router = express.Router(); router.get('/test', function (req, res, next) { // 2. 服务端解析成JSON后响应 res.json({ test: req.query.test }) })//现在我们通过给textarea添加一段有攻击目的的img标签，<img src="null" onerror='console.log(document.cookie)' />实际的页面时这样的。ok现在，我们点击<测试>按钮，一个XSS攻击就发生了。下面图片中是获取了本地的部分cookie信息实际上，我们只是模拟攻击，通过alert获取到了个人的cookie信息。但是如果是黑客的话，他们会注入一段第三方的js代码，然后将获取到的cookie信息存到他们的服务器上。这样的话黑客们就有机会拿到我们的身份认证做一些违法的事情了。以上，存在的一些问题，主要在于没有对用户输入的信息进行过滤，同时没有剔除掉DOM节点中存在的一些有危害的事件和一些有危害的DOM节点。2,存储型 XSS存储型XSS，也叫持久型XSS，主要是将XSS代码发送到服务器（不管是数据库、内存还是文件系统等。），然后在下次请求页面的时候就不用带上XSS代码了。最典型的就是留言板XSS。用户提交了一条包含XSS代码的留言到数据库。当目标用户查询留言时，那些留言的内容会从服务器解析之后加载出来。浏览器发现有XSS代码，就当做正常的HTML和JS解析执行。XSS攻击就发生了。3,DOM XSSDOM XSS攻击不同于反射型XSS和存储型XSS，DOM XSS代码不需要服务器端的解析响应的直接参与，而是通过浏览器端的DOM解析。这完全是客户端的事情。DOM XSS代码的攻击发生的可能在于我们编写JS代码造成的。我们知道eval语句有一个作用是将一段字符串转换为真正的JS语句，因此在JS中使用eval是很危险的事情，容易造成XSS攻击。避免使用eval语句。如以下代码test.addEventListener('click', function () { var node = window.eval(txt.value) console.log(node) }, false)txt中的代码如下<img src='null' onerror='console.error(123)' />以上通过eval语句就造成了XSS攻击。XSS危害通过document.cookie盗取cookie使用js或css破坏页面正常的结构与样式流量劫持（通过访问某段具有window.location.href定位到其他页面）Dos攻击：利用合理的客户端请求来占用过多的服务器资源，从而使合法用户无法得到服务器响应。利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。XSS防御从以上的反射型和DOM XSS攻击可以看出，我们不能原样的将用户输入的数据直接存到服务器，需要对数据进行一些处理。以上的代码出现的一些问题如下没有过滤危险的DOM节点。如具有执行脚本能力的script, 具有显示广告和色情图片的img, 具有改变样式的link, style, 具有内嵌页面的iframe, frame等元素节点。没有过滤危险的属性节点。如事件, style, src, href等没有对cookie设置httpOnly。如果将以上三点都在渲染过程中过滤，那么出现的XSS攻击的概率也就小很多。解决方法如下1, 对cookie的保护对重要的cookie设置httpOnly, 防止客户端通过document.cookie读取cookie。服务端可以设置此字段。对用户输入数据的处理2, 编码：不能对用户输入的内容都保持原样，对用户输入的数据进行字符实体编码。对于字符实体的概念可以参考文章底部给出的参考链接。3, 解码：原样显示内容的时候必须解码，不然显示不到内容了。4, 过滤：把输入的一些不合法的东西都过滤掉，从而保证安全性。如移除用户上传的DOM属性，如onerror，移除用户上传的Style节点，iframe, script节点等。通过一个例子讲解一下如何处理用户输入的数据。实现原理如下：存在一个parse函数，对输入的数据进行处理，返回处理之后的数据对输入的数据（如DOM节点）进行解码（使用第三方库 he.js）过滤掉一些元素有危害的元素节点与属性节点。如script标签，onerror事件等。（使用第三方库HTMLParser.js）// 第三方库资源在文章底部给出// parse函数实现如下function parse(str) { // str假如为某个DOM字符串 // 1. result为处理之后的DOM节点 let result = '' // 2. 解码 let decode = he.unescape(str, { strict: true }) HTMLParser(decode, { start(tag, attrs, unary) { // 3. 过滤常见危险的标签 if (tag === 'script' || tag === 'img' || tag === 'link' || tag === 'style' || tag === 'iframe' || tag === 'frame') return result += `<${tag}` for (let i = 0; i < attrs.length; i++) { let name = (attrs[i].name) .toLowerCase() let value = attrs[i].escaped // 3. 过滤掉危险的style属性和js事件 if (name === 'style' || name === 'href' || name === 'src' || ~name.indexOf('on')) continue result += ` ${name}=${value}` } result += `${unary ? ' /' : ''} >` }, chars(text) { result += text }, comment(text) { result += `<!-- ${text} -->` }, end(tag) { result += `</${tag}>` } }) return result }因此，有了以上的parse函数之后，就可以避免大部分的xss攻击了。test.addEventListener('click', function () { // ... 省略部分代码 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { // 3. 客户端解析JSON，并执行 // test按钮的点击事件中唯一的变化就是使用parse对服务端返回的数据进行了解码和过滤的处理。 var str = parse(JSON.parse(xhr.responseText).test) // 通过parse解析之后返回的数据就是安全的DOM字符串 var node = `${str}` document.body.insertAdjacentHTML('beforeend', node) } } } // ... 省略部分代码 }, false)总结:一旦在DOM解析过程成出现不在预期内的改变（JS代码执行或样式大量变化时），就可能发生XSS攻击XSS分为反射型XSS，存储型XSS和DOM XSS反射型XSS是在将XSS代码放在URL中，将参数提交到服务器。服务器解析后响应，在响应结果中存在XSS代码，最终通过浏览器解析执行。存储型XSS是将XSS代码存储到服务端（数据库、内存、文件系统等），在下次请求同一个页面时就不需要带上XSS代码了，而是从服务器读取。DOM XSS的发生主要是在JS中使用eval造成的，所以应当避免使用eval语句。XSS危害有盗取用户cookie，通过JS或CSS改变样式，DDos造成正常用户无法得到服务器响应。XSS代码的预防主要通过对数据解码，再过滤掉危险标签、属性和事件等。本文转载自https://www.cnblogs.com/unclekeith/p/7750681.html
-
CSRF的原理与防范 CSRF 背景与介绍CSRF（Cross Site Request Forgery, 跨站域请求伪造）是一种网络的攻击方式，它在 2007 年曾被列为互联网 20 大安全隐患之一。其他安全隐患，比如 SQL 脚本注入，跨站域脚本攻击等在近年来已经逐渐为众人熟知，很多网站也都针对他们进行了防御。然而，对于大多数人来说，CSRF 却依然是一个陌生的概念。即便是大名鼎鼎的 Gmail, 在 2007 年底也存在着 CSRF 漏洞，从而被黑客攻击而使 Gmail 的用户造成巨大的损失。CSRF 攻击实例CSRF 攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点，从而在并未授权的情况下执行在权限保护之下的操作。比如说，受害者 Bob 在银行有一笔存款，通过对银行的网站发送请求 http://bank.example/withdraw?account=bob&amount=1000000&for=bob2 可以使 Bob 把 1000000 的存款转到 bob2 的账号下。通常情况下，该请求发送到网站后，服务器会先验证该请求是否来自一个合法的 session，并且该 session 的用户 Bob 已经成功登陆。黑客 Mallory 自己在该银行也有账户，他知道上文中的 URL 可以把钱进行转帐操作。Mallory 可以自己发送一个请求给银行：http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory。但是这个请求来自 Mallory 而非 Bob，他不能通过安全认证，因此该请求不会起作用。这时，Mallory 想到使用 CSRF 的攻击方式，他先自己做一个网站，在网站中放入如下代码： src=”http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory ”，并且通过广告等诱使 Bob 来访问他的网站。当 Bob 访问该网站时，上述 url 就会从 Bob 的浏览器发向银行，而这个请求会附带 Bob 浏览器中的 cookie 一起发向银行服务器。大多数情况下，该请求会失败，因为他要求 Bob 的认证信息。但是，如果 Bob 当时恰巧刚访问他的银行后不久，他的浏览器与银行网站之间的 session 尚未过期，浏览器的 cookie 之中含有 Bob 的认证信息。这时，悲剧发生了，这个 url 请求就会得到响应，钱将从 Bob 的账号转移到 Mallory 的账号，而 Bob 当时毫不知情。等以后 Bob 发现账户钱少了，即使他去银行查询日志，他也只能发现确实有一个来自于他本人的合法请求转移了资金，没有任何被攻击的痕迹。而 Mallory 则可以拿到钱后逍遥法外。CSRF 攻击的对象在讨论如何抵御 CSRF 之前，先要明确 CSRF 攻击的对象，也就是要保护的对象。从以上的例子可知，CSRF 攻击是黑客借助受害者的 cookie 骗取服务器的信任，但是黑客并不能拿到 cookie，也看不到 cookie 的内容。另外，对于服务器返回的结果，由于浏览器同源策略的限制，黑客也无法进行解析。因此，黑客无法从返回的结果中得到任何东西，他所能做的就是给服务器发送请求，以执行请求中所描述的命令，在服务器端直接改变数据的值，而非窃取服务器中的数据。所以，我们要保护的对象是那些可以直接产生数据改变的服务，而对于读取数据的服务，则不需要进行 CSRF 的保护。比如银行系统中转账的请求会直接改变账户的金额，会遭到 CSRF 攻击，需要保护。而查询余额是对金额的读取操作，不会改变数据，CSRF 攻击无法解析服务器返回的结果，无需保护。当前防御 CSRF 的几种策略在业界目前防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。下面就分别对这三种策略进行详细介绍。验证 HTTP Referer 字段根据 HTTP 协议，在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。在通常情况下，访问一个安全受限页面的请求来自于同一个网站，比如需要访问 http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory，用户必须先登陆 bank.example，然后通过点击页面上的按钮来触发转账事件。这时，该转帐请求的 Referer 值就会是转账按钮所在的页面的 URL，通常是以 bank.example 域名开头的地址。而如果黑客要对银行网站实施 CSRF 攻击，他只能在他自己的网站构造请求，当用户通过黑客的网站发送请求到银行时，该请求的 Referer 是指向黑客自己的网站。因此，要防御 CSRF 攻击，银行网站只需要对于每一个转账请求验证其 Referer 值，如果是以 bank.example 开头的域名，则说明该请求是来自银行网站自己的请求，是合法的。如果 Referer 是其他网站的话，则有可能是黑客的 CSRF 攻击，拒绝该请求。这种方法的显而易见的好处就是简单易行，网站的普通开发人员不需要操心 CSRF 的漏洞，只需要在最后给所有安全敏感的请求统一增加一个拦截器来检查 Referer 的值就可以。特别是对于当前现有的系统，不需要改变当前系统的任何已有代码和逻辑，没有风险，非常便捷。然而，这种方法并非万无一失。Referer 的值是由浏览器提供的，虽然 HTTP 协议上有明确的要求，但是每个浏览器对于 Referer 的具体实现可能有差别，并不能保证浏览器自身没有安全漏洞。使用验证 Referer 值的方法，就是把安全性都依赖于第三方（即浏览器）来保障，从理论上来讲，这样并不安全。事实上，对于某些浏览器，比如 IE6 或 FF2，目前已经有一些方法可以篡改 Referer 值。如果 bank.example 网站支持 IE6 浏览器，黑客完全可以把用户浏览器的 Referer 值设为以 bank.example 域名开头的地址，这样就可以通过验证，从而进行 CSRF 攻击。即便是使用最新的浏览器，黑客无法篡改 Referer 值，这种方法仍然有问题。因为 Referer 值会记录下用户的访问来源，有些用户认为这样会侵犯到他们自己的隐私权，特别是有些组织担心 Referer 值会把组织内网中的某些信息泄露到外网中。因此，用户自己可以设置浏览器使其在发送请求时不再提供 Referer。当他们正常访问银行网站时，网站会因为请求没有 Referer 值而认为是 CSRF 攻击，拒绝合法用户的访问。在请求地址中添加 token 并验证CSRF 攻击之所以能够成功，是因为黑客可以完全伪造用户的请求，该请求中所有的用户验证信息都是存在于 cookie 中，因此黑客可以在不知道这些验证信息的情况下直接利用用户自己的 cookie 来通过安全验证。要抵御 CSRF，关键在于在请求中放入黑客所不能伪造的信息，并且该信息不存在于 cookie 之中。可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。这种方法要比检查 Referer 要安全一些，token 可以在用户登陆后产生并放于 session 之中，然后在每次请求时把 token 从 session 中拿出，与请求中的 token 进行比对，但这种方法的难点在于如何把 token 以参数的形式加入请求。对于 GET 请求，token 将附在请求地址之后，这样 URL 就变成 http://url?csrftoken=tokenvalue。 而对于 POST 请求来说，要在 form 的最后加上 ，这样就把 token 以参数的形式加入请求了。但是，在一个网站中，可以接受请求的地方非常多，要对于每一个请求都加上 token 是很麻烦的，并且很容易漏掉，通常使用的方法就是在每次页面加载时，使用 javascript 遍历整个 dom 树，对于 dom 中所有的 a 和 form 标签后加入 token。这样可以解决大部分的请求，但是对于在页面加载之后动态生成的 html 代码，这种方法就没有作用，还需要程序员在编码时手动添加 token。该方法还有一个缺点是难以保证 token 本身的安全。特别是在一些论坛之类支持用户自己发表内容的网站，黑客可以在上面发布自己个人网站的地址。由于系统也会在这个地址后面加上 token，黑客可以在自己的网站上得到这个 token，并马上就可以发动 CSRF 攻击。为了避免这一点，系统可以在添加 token 的时候增加一个判断，如果这个链接是链到自己本站的，就在后面添加 token，如果是通向外网则不加。不过，即使这个 csrftoken 不以参数的形式附加在请求之中，黑客的网站也同样可以通过 Referer 来得到这个 token 值以发动 CSRF 攻击。这也是一些用户喜欢手动关闭浏览器 Referer 功能的原因。在 HTTP 头中自定义属性并验证这种方法也是使用 token 并进行验证，和上一种方法不同的是，这里并不是把 token 以参数的形式置于 HTTP 请求之中，而是把它放到 HTTP 头中自定义的属性里。通过 XMLHttpRequest 这个类，可以一次性给所有该类请求加上 csrftoken 这个 HTTP 头属性，并把 token 值放入其中。这样解决了上种方法在请求中加入 token 的不便，同时，通过 XMLHttpRequest 请求的地址不会被记录到浏览器的地址栏，也不用担心 token 会透过 Referer 泄露到其他网站中去。然而这种方法的局限性非常大。XMLHttpRequest 请求通常用于 Ajax 方法中对于页面局部的异步刷新，并非所有的请求都适合用这个类来发起，而且通过该类请求得到的页面不能被浏览器所记录下，从而进行前进，后退，刷新，收藏等操作，给用户带来不便。另外，对于没有进行 CSRF 防护的遗留系统来说，要采用这种方法来进行防护，要把所有请求都改为 XMLHttpRequest 请求，这样几乎是要重写整个网站，这代价无疑是不能接受的。Java 代码示例下文将以 Java 为例，对上述三种方法分别用代码进行示例。无论使用何种方法，在服务器端的拦截器必不可少，它将负责检查到来的请求是否符合要求，然后视结果而决定是否继续请求或者丢弃。在 Java 中，拦截器是由 Filter 来实现的。我们可以编写一个 Filter，并在 web.xml 中对其进行配置，使其对于访问所有需要 CSRF 保护的资源的请求进行拦截。在 filter 中对请求的 Referer 验证代码如下清单 1. 在 Filter 中验证 Referer// 从 HTTP 头中取得 Referer 值 String referer=request.getHeader("Referer"); // 判断 Referer 是否以 bank.example 开头 if((referer!=null) &&(referer.trim().startsWith(“bank.example”))){ chain.doFilter(request, response); }else{ request.getRequestDispatcher(“error.jsp”).forward(request,response); }// 从 HTTP 头中取得 Referer 值String referer=request.getHeader("Referer"); // 判断 Referer 是否以 bank.example 开头if((referer!=null) &&(referer.trim().startsWith(“bank.example”))){ chain.doFilter(request, response); }else{ request.getRequestDispatcher(“error.jsp”).forward(request,response); }以上代码先取得 Referer 值，然后进行判断，当其非空并以 bank.example 开头时，则继续请求，否则的话可能是 CSRF 攻击，转到 error.jsp 页面。如果要进一步验证请求中的 token 值，代码如下清单 2. 在 filter 中验证请求中的 tokenHttpServletRequest req = (HttpServletRequest)request; HttpSession s = req.getSession(); // 从 session 中得到 csrftoken 属性 String sToken = (String)s.getAttribute(“csrftoken”); if(sToken == null){ // 产生新的 token 放入 session 中 sToken = generateToken(); s.setAttribute(“csrftoken”,sToken); chain.doFilter(request, response); } else{ // 从 HTTP 头中取得 csrftoken String xhrToken = req.getHeader(“csrftoken”); // 从请求参数中取得 csrftoken String pToken = req.getParameter(“csrftoken”); if(sToken != null && xhrToken != null && sToken.equals(xhrToken)){ chain.doFilter(request, response); }else if(sToken != null && pToken != null && sToken.equals(pToken)){ chain.doFilter(request, response); }else{ request.getRequestDispatcher(“error.jsp”).forward(request,response); } }首先判断 session 中有没有 csrftoken，如果没有，则认为是第一次访问，session 是新建立的，这时生成一个新的 token，放于 session 之中，并继续执行请求。如果 session 中已经有 csrftoken，则说明用户已经与服务器之间建立了一个活跃的 session，这时要看这个请求中有没有同时附带这个 token，由于请求可能来自于常规的访问或是 XMLHttpRequest 异步访问，我们分别尝试从请求中获取 csrftoken 参数以及从 HTTP 头中获取 csrftoken 自定义属性并与 session 中的值进行比较，只要有一个地方带有有效 token，就判定请求合法，可以继续执行，否则就转到错误页面。生成 token 有很多种方法，任何的随机算法都可以使用，Java 的 UUID 类也是一个不错的选择。除了在服务器端利用 filter 来验证 token 的值以外，我们还需要在客户端给每个请求附加上这个 token，这是利用 js 来给 html 中的链接和表单请求地址附加 csrftoken 代码，其中已定义 token 为全局变量，其值可以从 session 中得到。清单 3. 在客户端对于请求附加 tokenfunction appendToken(){ updateForms(); updateTags(); } function updateForms() { // 得到页面中所有的 form 元素 var forms = document.getElementsByTagName('form'); for(i=0; i<forms.length; i++) { var url = forms[i].action; // 如果这个 form 的 action 值为空，则不附加 csrftoken if(url == null || url == "" ) continue; // 动态生成 input 元素，加入到 form 之后 var e = document.createElement("input"); e.name = "csrftoken"; e.value = token; e.type="hidden"; forms[i].appendChild(e); } } function updateTags() { var all = document.getElementsByTagName('a'); var len = all.length; // 遍历所有 a 元素 for(var i=0; i<len; i++) { var e = all[i]; updateTag(e, 'href', token); } } function updateTag(element, attr, token) { var location = element.getAttribute(attr); if(location != null && location != '' '' ) { var fragmentIndex = location.indexOf('#'); var fragment = null; if(fragmentIndex != -1){ //url 中含有只相当页的锚标记 fragment = location.substring(fragmentIndex); location = location.substring(0,fragmentIndex); } var index = location.indexOf('?'); if(index != -1) { //url 中已含有其他参数 location = location + '&csrftoken=' + token; } else { //url 中没有其他参数 location = location + '?csrftoken=' + token; } if(fragment != null){ location += fragment; } element.setAttribute(attr, location); } }在客户端 html 中，主要是有两个地方需要加上 token，一个是表单 form，另一个就是链接 a。这段代码首先遍历所有的 form，在 form 最后添加一隐藏字段，把 csrftoken 放入其中。然后，代码遍历所有的链接标记 a，在其 href 属性中加入 csrftoken 参数。注意对于 a.href 来说，可能该属性已经有参数，或者有锚标记。因此需要分情况讨论，以不同的格式把 csrftoken 加入其中。如果你的网站使用 XMLHttpRequest，那么还需要在 HTTP 头中自定义 csrftoken 属性，利用 dojo.xhr 给 XMLHttpRequest 加上自定义属性代码如下：清单 4. 在 HTTP 头中自定义属性var plainXhr = dojo.xhr; // 重写 dojo.xhr 方法 dojo.xhr = function(method,args,hasBody) { // 确保 header 对象存在 args.headers = args.header || {}; tokenValue = '<%=request.getSession(false).getAttribute("csrftoken")%>'; var token = dojo.getObject("tokenValue"); // 把 csrftoken 属性放到头中 args.headers["csrftoken"] = (token) ? token : " "; return plainXhr(method,args,hasBody); };这里改写了 dojo.xhr 的方法，首先确保 dojo.xhr 中存在 HTTP 头，然后在 args.headers 中添加 csrftoken 字段，并把 token 值从 session 里拿出放入字段中。CSRF 防御方法选择之道通过上文讨论可知，目前业界应对 CSRF 攻击有一些克制方法，但是每种方法都有利弊，没有一种方法是完美的。如何选择合适的方法非常重要。如果网站是一个现有系统，想要在最短时间内获得一定程度的 CSRF 的保护，那么验证 Referer 的方法是最方便的，要想增加安全性的话，可以选择不支持低版本浏览器，毕竟就目前来说，IE7+, FF3+ 这类高版本浏览器的 Referer 值还无法被篡改。如果系统必须支持 IE6，并且仍然需要高安全性。那么就要使用 token 来进行验证，在大部分情况下，使用 XmlHttpRequest 并不合适，token 只能以参数的形式放于请求之中，若你的系统不支持用户自己发布信息，那这种程度的防护已经足够，否则的话，你仍然难以防范 token 被黑客窃取并发动攻击。在这种情况下，你需要小心规划你网站提供的各种服务，从中间找出那些允许用户自己发布信息的部分，把它们与其他服务分开，使用不同的 token 进行保护，这样可以有效抵御黑客对于你关键服务的攻击，把危害降到最低。毕竟，删除别人一个帖子比直接从别人账号中转走大笔存款严重程度要轻的多。如果是开发一个全新的系统，则抵御 CSRF 的选择要大得多。笔者建议对于重要的服务，可以尽量使用 XMLHttpRequest 来访问，这样增加 token 要容易很多。另外尽量避免在 js 代码中使用复杂逻辑来构造常规的同步请求来访问需要 CSRF 保护的资源，比如 window.location 和 document.createElement(“a”) 之类，这样也可以减少在附加 token 时产生的不必要的麻烦。最后，要记住 CSRF 不是黑客唯一的攻击手段，无论你 CSRF 防范有多么严密，如果你系统有其他安全漏洞，比如跨站域脚本攻击 XSS，那么黑客就可以绕过你的安全防护，展开包括 CSRF 在内的各种攻击，你的防线将如同虚设。总结与展望可见，CSRF 是一种危害非常大的攻击，又很难以防范。目前几种防御策略虽然可以很大程度上抵御 CSRF 的攻击，但并没有一种完美的解决方案。一些新的方案正在研究之中，比如对于每次请求都使用不同的动态口令，把 Referer 和 token 方案结合起来，甚至尝试修改 HTTP 规范，但是这些新的方案尚不成熟，要正式投入使用并被业界广为接受还需时日。在这之前，我们只有充分重视 CSRF，根据系统的实际情况选择最合适的策略，这样才能把 CSRF 的危害降到最低。本文转载自https://www.ibm.com/developerworks/cn/web/1102_niugang_csrf/index.html
-
-
HTTP常见状态码 HTTP常见状态码200 OK 服务器成功处理了请求（这个是我们见到最多的）204 No Content 请求成功处理，没有实体的主体返回206 Partial Content GET范围请求已成功处理301/302 Moved Permanently（重定向）请求的URL已移走。Response中应该包含一个Location URL, 说明资源现在所处的位置303 See Other 临时重定向，期望使用GET定向获取304 Not Modified 发送的附带条件请求未满足307 Temporary Redirect 临时重定向，POST不会变成GET400 Bad Request 请求报文语法错误或参数错误401 Unauthorized 需要通过HTTP认证，或认证失败403 Forbidden 请求资源被拒绝404 Not Found(页面丢失)未找到资源500 Internal Server Error 服务器故障或Web应用故障501 Internal Server Error服务器遇到一个错误，使其无法对请求提供服务503 Service Unavailable 服务器超负载或停机维护HTTP状态码（HTTP Status Code）是用以表示网页服务器HTTP响应状态的3位数字代码。 状态码响应类别原因短语 1XX信息性状态码（Informational）服务器正在处理请求 2XX成功状态码（Success）请求已正常处理完毕 3XX重定向状态码（Redirection）需要进行额外操作以完成请求 4XX客户端错误状态码（Client Error）客户端原因导致服务器无法处理请求 5XX服务器错误状态码（Server Error）服务器原因导致处理请求出错 1开头 （请求已被接受，需要继续处理）这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束。100 （部分接受） 客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。 101 （已了解） 服务器已经理解了客户端的请求，并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。102 （已接收） 由WebDAV（RFC 2518）扩展的状态码，代表处理将被继续执行。2开头 （请求成功）表示成功处理了请求的状态代码。200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。 201 （已创建） 请求成功并且服务器创建了新的资源。 202 （已接受） 服务器已接受请求，但尚未处理。 203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。 204 （无内容） 服务器成功处理了请求，但没有返回任何内容。 205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。206 （部分内容） 服务器成功处理了部分 GET 请求。3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。 301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。 305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。 307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。400 （错误请求） 服务器不理解请求的语法。 401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。 403 （禁止） 服务器拒绝请求。404 （未找到） 服务器找不到请求的网页。405 （方法禁用） 禁用请求中指定的方法。 406 （不接受） 无法使用请求的内容特性响应请求的网页。 407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。408 （请求超时） 服务器等候请求时发生超时。 409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。 410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。 411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。 412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。 413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。 414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。 415 （不支持的媒体类型） 请求的格式不受请求页面的支持。 416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。 417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。500 （服务器内部错误） 服务器遇到错误，无法完成请求。 501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。 502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。 503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。 504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。 505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。转载原文：https://blog.csdn.net/lhjuejiang/article/details/79474199
-
推荐一个js常用工具函数库 etools常用js函数整理安装和使用使用npm安装：npm install -s etools通过es6模块引入，如import _ from "etools";console.log(_.extend(true,{},{"age":23}));下载并在页面引入etools.js直接调用ETool对象中得方法，如console.log(ETools.extend(true,{},{"age":23}));Git 仓库地址 https://github.com/MarvenGong/ETools版本说明1.2.8 新增datetime下根据身份证号码获取年龄的方法getAgeByIDCard1.2.7 新增datetime下根据出生日期获取年龄的方法getAgeByBirthday1.2.5 新增async相关函数用来处理异步函数常用方法1.2.3 修正了部分bug，新增array数组扩展，增加Array.filterBy方法1.2.2 修正了部分bug，新增string下的generateUUID和addNum方法1.0.9 修正了deparam函数依赖jquery的$.each函数的问题详细文档对象相关ETools.extend(deep,obj1,obj2)作用：类似于jquery.extend方法，合并json对象，并将合并后的对象保存到obj1中作为返回值参数： 1. deep,是否深度复制，设为true，会复制对象中嵌套的对象。 2. obj1,obj2,要合并的对象 案例：ETools.extend(true,{"name":"zhangsan",gender:"male"},{"age":12}) 输出结果`{"name":"zhangsan",gender:"male","age":12}` 说明，我们可以将obj1设为空{}，用这个方法克隆一个对象，解决引用类型赋值的问题url请求相关ETools.deparam(str)将jquery序列化表单之后得到的参数字符串转换成标准的json对象str,即要格式化的字符串ETools.deparam("aaa=bbb&ccc=ddd")输出结果{aaa:bbb,ccc:ddd}查看演示>>ETools.urlParamToObj(url)将连接中的get请求参数转换成json对象url:链接ETools.deparam("www.baidu.com?aaa=bbb&ccc=ddd")输出结果{aaa:bbb,ccc:ddd}事件ETools.stopPropagation(event)阻止事件向上冒泡，点击某元素不会触发父元素的事件event:事件对象ETools.stopPropagation(event)异步函数相关ETools.async.wait(timestamp)在异步函数中等待指定的时间timestamp 等待的时间的毫秒数async getUserList() { await ETools.async.wait(2000)}时间日期相关ETools.datetime.compareDate(starate,endDate)比较两个日期的大小日期格式"yyyy-mm-dd",如果返回值为-1，则前者大于后者，为0两者相等，为1，后者大于前者ETools.datetime.compareDate("2015-12-11","2015-12-12")ETools.datetime.compareTime(startTime,endTime)比较两个时间的大小日期格式"yyyy-mm-dd h:mi:s",如果返回值为-1，则前者大于后者，为0两者相等，为1，后者大于前者ETools.datetime.compareDate("2015-12-11 12:10:00","2015-12-12 12:10:00")ETools.datetime.arriveTimerFormat(s)将秒数转换成对应的多少小时，多少分多少秒（用于倒计时的显示）s:要计算的秒数ETools.datetime.arriveTimerFormat(52010)->[0, 14, 26, 50, "14:26:50"]ETools.datetime.format(date,formatStr)将Date类型的时间转换成指定格式的字符串date:日期类型的对象（如：new Data()）formatStr：想要的时间格式如："yyyy-mm-dd h:m:s 星期w"ETools.datetime.Format(new Date(),"yyyy-MM-dd h:m:s 星期w")->"2015-16-24 15:16:15 星期四"ETools.datetime.parse(timeStr)将时间字符串转换成对应的时间戳timeStr:时间字符串（如："2015-16-24 15:16:15"）ETools.datetime.parse("2015-16-24 15:16:15")->1461482175ETools.datetime.getNewDay(dataStr,addNumber)日期加上天数得到新的日期dateTemp 需要参加计算的日期，days要添加的天数，返回新的日期，日期格式：YYYY-MM-DD参数：dataStr原来的日期（如：“2014-12-1”）addNumber要增加或减少的天数，减少就给负数值如：ETools.datetime.getNewDay("2017-12-1",2) -- "2017-12-3"ETools.datetime.getNewDay("2017-12-1",-2) -- "2017-11-29"ETools.datetime.getAgeByBirthday(birthdatStr)根据出生日期获取年龄birthdatStr 出生日期标准格式的字符串 如：1991-08-20ETools.datetime.getAgeByBirthday("1991-08-20") -- 27ETools.datetime.getAgeByIDCard(idcard)根据出生日期获取年龄 如果传入的不是标准的身份证则返回falseidcard 身份证号 如："*19951208x"ETools.datetime.getAgeByIDCard("*19951208x") -- 23html格式操作ETools.html.htmlEncode(str)把html中的常见符号转换成特殊符号码，如"<"转换成"<"参数str，要转换的html代码ETools.html.htmlDecode(str)把html代码转换成html元素参数str，要转换的html字符串页面操作ETools.page.addFavorite(url,title)将页面添加到浏览器收藏夹url:要添加的地址信息。title:在收藏夹中的名字ETools.page.addFavorite("www.baidu.com","百度")ETools.page.addHome(url)将页面设为浏览器的首页url:要添加的地址信息。ETools.page.addFavorite("www.baidu.com")动态加载ETools.loadStyle(styleUrl)动态加载样式表styleUrl：要加载的样式文件的地址ETools.loadStyle("css/style.css")浏览器信息获取ETools.getExplorerInfo()返回浏览器的名称以及版本信息{browerName:"google",version:"3.10.101.1"}字符串操作ETools.string.getStrLength(str)获取字符串长度，中文字符按两个长度计算str:要计算的字符串ETools.string.getStrLength("ilove你")->7ETools.string.trim(str)去掉字符串左右的空格str:要去空格的字符串ETools.string.getStrLength(" aaa ")->"aaa"ETools.string.number2String(number)参数 number ： 要转换的数字把1,2,3,4....,99999 类型的数字转换成中文字符串如：ETools.string.number2String(123) -> “一百二十三”ETools.string.generateUUID()生成一个唯一标识的字符串（UUID算法）ETools.string.addNum(number1, number2)参数 number1;number2 ： 要相加的两个数字包含浮点数的两个数相加，解决丢失精度的问题如：ETools.string.addNum(1.1， 1.2) -> “2.3” 如果直接执行1.1+1.2会出现等于2.299999999999999999999的情况表单验证ETools.vertify.isURL(str)验证url地址ETools.vertify.isURL("www.baidu.com")->trueETools.vertify.isEmpty(str)验证是否为空ETools.vertify.isEmpty(" ")->trueETools.vertify.isDigit(str)验证是否是数字ETools.vertify.isDigit("2.0")->falseETools.vertify.isTelephone(str)验证固定电话ETools.vertify.isTelephone("023-55813950")->trueETools.vertify.isMobile(str)验证手机号码ETools.vertify.isMobile("15696544221")->trueETools.vertify.isQQ(str)验证QQ号ETools.vertify.isQQ("1634251421")->trueETools.vertify.isEmail(str)验证邮箱地址ETools.vertify.isEmail("2542152@qq.com")->trueETools.vertify.isIDCard(str)验证身份证号码ETools.vertify.isIDCard("500235199008205570")->true ETools.vertify.isPlusDigit(str)验证是否是无符号正整数ETools.vertify.isPlusDigit("52")->trueETools.vertify.isChinese(str)验证中文字符ETools.vertify.isChinese("我爱你")->true ETools.vertify.isDate(str)验证日期ETools.vertify.isDate("2015-12-12")->trueETools.vertify.isPostalCode(str)验证邮政编码ETools.vertify.isPostalCode("400521")->trueETools.vertify.isRegisterUserName(str)验证登录名，只能输入5-20个以字母开头、可带数字、“_”、“.”的字串ETools.vertify.isRegisterUserName("gong163")->true ETools.vertify.isTrueName(str)校验用户姓名：只能输入1-30个以字母开头的字串ETools.vertify.isTrueName("龚明华")->trueETools.vertify.isPassword(str)校验密码：只能输入6-20个字母、数字、下划线ETools.vertify.isPassword("gong1632542142")->true数组相关Array.filterBy(key, value) 从对象数组中根据对象的key筛选值等于value的对象，如果键值对唯一则返回对象，如果不唯一则返回对象数组。key: 对象中的键，value: 要筛选的键所对应的值[{name: '张三',age: 12},{name: '张三',age: 33},{name: 'lisi',age: 22}].filterBy('name', '张三') -> [{name: '张三',age: 12},{name: '张三',age: 33}];Cookie操作ETools.cookie.setCookie(name, value, Hours)设置Cookie值name:cookie的key，value:cookie的value，Hours：Cookie的超时时间ETools.cookie.setCookie("username", "xiaoming", 0.5)ETools.cookie.getCookie(name)获取Cookie值name:cookie的keyETools.cookie.getCookie("username")->"xiaoming"ETools.cookie.delCookie(name)删除Cookiename:cookie的keyETools.cookie.delCookie("username")html格式操作ETools.openWindow(url,windowName,width,height)打开一个弹窗窗口url打开的链接，windowName窗口的title，width窗口宽度，height窗口高度ETools.openWindow("www.baidu.com","百度",500,600)jquery插件checkAll()表格的行的全选和反全选$(".checkAll").checkAll();需要给复选框绑定checkAll()事件。为其加上data-table属性，属性值指向要执行全选的table的id。如果有多个复选框共同作用于同一个表格，给这些复选框加上相同的data-table属性值即可
-
强大的Array.prototype.splice() 之所以会单独针对这个api写这么一篇博文，一方面是因为最近在一次面试中聊到了这个API，我没能完全说出它的用法；另一方面则是因为通过熟悉后觉得这个api确实很灵活很强大，充分体现了javascript的灵活性。所以写这么一篇博文，可以让自己更深刻地记住这个方法，也希望能让更多地同仁用这个方法让自己的javascript代码更加简洁，更加有效率。MDN Web Docs中对Array.prototype.splice()的描述信息如下splice(start, deleteCount, item1, item2, ...) 方法通过删除或替换现有元素和/或添加新元素来更改数组的内容。传参信息如下1. start 从什么位置开始修改当前数组，这个参数有如下几种情况0到数组长度-1，即当前数组的任意位置。大于数组长度-1，不报错，但是不会删除当前数组的元素，第二个参数无效。但是，如果这个时候传入了第三个，以及第四个。。。参数，那么，这些参数值会被添加到数组的末尾位置，也就类似于push方法。小于0，如果开始位置为负数，会从数组的末尾倒着查找，如，-1为最后一个元素，-2为倒数第二个元素。2. deleteCount 要删除的内容的长度，这个参数有如下几种情况0或负数 不删除数组元素。大于0并且小于start指定位置到数组最后一个元素的长度，则删除指定长度的元素。大于start指定位置到数组最后一个元素的长度，删除从start位置后面所有的元素，如splice(0, 99999999)会晴空长度小于99999999的数组3. 在start位置开始要添加或者替换的元素，可以有多个。针对上面的描述，我们一一验证它的所有用法。删除元素（第二个参数不为0，后续参数不传入，只删除）let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 1); // 从第二个位置开始删掉一个元素 console.log(ary); // ['a', 'c', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 2); // 从第二个位置开始删掉两个元素 console.log(ary); // ['a', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(-2, 1); // 删掉倒数第二个元素‘e’ console.log(ary); // ['a', 'b', 'c', 'd', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(0, ary.length); // 删掉所有元素 console.log(ary); // []添加元素(第二个参数为0，后续参数不为空，则只增加不删除)let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(ary.length, 0, 'x'); // 在数组末尾追加一个元素 console.log(ary); // ['a', 'b', 'c', 'd', 'e', 'f', 'x']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 0, 'x'); // 在数组第二个元素前插入一个元素 console.log(ary); // ['a','x', 'b', 'c', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(-2, 0, 'x'); // 在数组倒数第二个元素前插入一个元素 console.log(ary); // ['a', 'b', 'c', 'd', 'x', 'e', 'f']let ary = ['a', 'b', 'c']; let ary2 = ['d', 'e', 'f'] ary.splice(ary.length, 0, ...ary2); // 数组拼接 console.log(ary); // ['a', 'b', 'c', 'd', 'e', 'f']更新/替换元素（第二个参数不为0，后续参数不为空，这里需要注意的是，传入的替换元素的个数可以等于前面的长度，也可以不等于前端的长度）替换元素其实执行的是先删除再插入，所以一定要清楚传入参数的意义let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 1, 'x'); // 替换第二个元素‘b’为‘x’ (长度和传入的替换元素个数都为一) console.log(ary); // ['a', 'x', 'c', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 2, 'x'); // 删掉第二个和第三个元素‘b’ ‘c’，插入一个元素‘x’ (长度大于传入的替换元素个数) console.log(ary); // ['a', 'x', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 2, 'x', 'y', 'z'); // 删掉第二个和第三个元素‘b’ ‘c’，插入三个元素‘x’，‘y’， ‘z’ (长度小于传入的替换元素个数) console.log(ary); // ['a', 'x','y', 'z', 'd', 'e', 'f']上面这些就是我目前总结的常用的splice的用法，如有更多使用方法，欢迎留言讨论
