we安全对于web前端从事⼈员也是⼀个特别重要的⼀个知识点，也是⾯试的时候，⾯试官经常问的安全前端问题。掌握⼀些web安全知识，提供安全防范意识，今天就会从⼏个⽅⾯说起前端web攻击和防御的常⽤⼿段

常见的web攻击⽅式　　　　1.XSS

　　　　XSS（Cross Site Scripting）跨站脚本攻击，因为缩写和css重叠，所以能叫XSS，跨脚本攻击是指通过存在安全漏洞的web⽹站注册⽤户的浏览器内⾮法的⾮本站点HTML标签或javascript进⾏⼀种攻击。 　　　跨站脚本攻击有可能造成以下影响

　　　　　　1.利⽤虚假输⼊表单骗取⽤户个⼈信息

　　　　　　2.利⽤脚本窃取⽤户的cookie值，被害者在不知情况的下，帮助攻击者发送恶意请求　　　　　　 3.显⽰伪造的⽂章活图⽚　　　　XSS攻击分类：

　　　　　　反射型 -url参数直接注⼊　　　

普通 http://localhost:3000/?form-china

alert尝试

=slert(1) 如果有弹出，说明⽹站有漏洞，⿊客就可以对⽹站发送攻击

　　　　　 获取cookie　　　　　

　　　　　　　通过访问你的⽹址，在url参数攻击，获取到cookie域名伪造 ⽤盗取的⽹址，修改⼀个简易的⽹址，发送攻击，也能访问，信息也能保存，⼜称伪装型⽹站 伪造cookie⼊侵，　　　　　存储型 存储到DB后读取注⼊

　　　　　　跨脚本注⼊，通过脚本注⼊代码。⽤户⽐如发送评论，⽤户的信息都会在⿊客⽹站显⽰，就可以拿到你所需要的数据　　　XSS攻击的危害-Scripting能⼲啥就能⼲啥　　

　　　　　　1.获取页⾯数据 2.获取Cookies 3.劫持前端逻辑 4.发送请求

5.偷取⽹站的任意数据 6.偷取⽤户的资料

7.偷取⽤户的秘钥和登录转态 8.欺骗⽤户　　　防范⼿段

　　　　HEAD ctx.set('X-XSS-Protection',0) //禁⽌XSS过滤　　　　　　0：禁⽌XSS过滤　　　　

　　　　　　1： 启⽤XSS过滤(通常浏览器是默认的)，如果检测到跨脚本攻击，浏览器将清除页⾯(删除不安全的部分) mode=block 启⽤XSS过滤，如果检测到攻击，浏览器将不再会清除页⾯，⽽是阻⽌页⾯加载report=(Chromium only)=启⽤XSS过滤，如果检测到跨站脚攻击，浏览器将清除并使⽤、　　　　CSP

　　　　　　内容安全策略(CSP,Content Security Policy)是⼀个附加的安全层，⽤于帮助检测和缓解那些类型的攻击，包括跨站脚本(XSS)和数据注⼊等攻击，这些攻击可⽤于实现从数据窃取到⽹站破坏或作为恶意软件分发版本等⽤途　　　　　　CSP本质就是建⽴⽩名单，开发者明确告诉浏览器那些外部资源可以加载和执⾏，我们只需要配置规则，如何拦截是由浏览器⾃⼰实现的，我们可以通过这种⽅式来尽量减少XSS攻击　　　 Content-Security-Policy: default-src 'self' 只允许加载本站资源 Content-security-Policy: img-src https:// 只允许加载https协议图⽚ Content-security-Policy:child-src 'none' 不允许加载任何来源框架 例如 ctx.set('Content-security-Policy','default-src')

　　　　⿊名单

　　　　　　⽤户输⼊永远不可信任的，最普遍的做法就是转义输⼊的内容，对于引号，尖括号，斜杠进⾏转义

　　　　　　　　　　　　　　　　　　　　　　　　　　function escape(str) {

str = str.replace(/&/g, '&'); str = str.replace(//g, '>');

str = str.replace(/\"/g, '&quto;'); str = str.replace(/'/g, \"'\"); str = str.replace(/`/g, '`'); str = str.replace(/\\//g, '/');

str = str.replace(/<\\/script>/,'') return str }

　　　　　　富⽂本来说，显然不能通过上⾯的办法来转义所有字符，因为这样会把需要的格式过滤掉，对于这种情况，通常采⽤⽩名单的办法，当然也可以通过⿊名单过滤，但是考虑需要过滤的标签和标签属性是在太多，更加推荐使⽤⽩名单的⽅式　　　 ⽩名单

　　　　　　　　　　　　　const xss = require('xss')

let html = xss('

XSS demo

XSS deom

　　　　这是防⽌XSS攻击窃取⽤户cookie最有效的防御⼿段，web应⽤程序设置cookie时，将其属性设置为HttpOnly 就可以防⽌⽹页的cookie客户端恶意JavaScript窃取，保护⽤户cookie信息

设置⽅法：response.addHeader('Set-Cookie','uid=12;path=/; HttpOnly')

　　 2.CSRF

　　　　CSRF(Cross Site Request Forgery)，既跨站请求伪造，是⼀种常见的web攻击，他利⽤⽤户以登录的⾝份，在⽤户不知情的情况下，以⽤户的名

字完成⾮法操作

　　　　　1.⽤户登录了站点A，并在本地记录了cookie

　　　　　 2.在⽤户没有登录除站点A的情况下(也就是cookie⽣效的情况下)，访问了恶意攻击者提供引诱危险站点B(B站点需求访问站点A)。　　　　　 3.站点A没有做任何CSRF防御　　　　　 CSRF危害

　　　　　　　　1.利⽤⽤户登录状态　　

　　　　　　　　2.⽤户不知情　　　　　　　　3.完成业务请求　　　　　　　　4.盗取⽤户资⾦(转账，消费)　　　　　　　　5.冒充⽤户发帖背锅　　　　　　　　　　6.损害⽹站声誉　　　　　CSRF防御

　　　　　　　　 禁⽌第三⽅⽹站带cookie ----有兼容性问题

Referer Check ----Https不发送referer

app.use(async(ctx,next)=>{ koa中间件实现 await next()

const referer = ctx.request.header.referer console.log('Referer:',referer) })

对登录注册设置验证码校验

　　 3.点击劫持--clickjacking

　　　　 点击劫持是⼀种视觉欺骗的攻击⼿段，攻击者将需要攻击的⽹站通过iframe嵌套⽅式嵌⼊⾃⼰的⽹页中，并将iframe设置为透明的，在页⾯中透露出⼀个按钮诱导⽤户点击 通过⽤于各种⽹站，使⽤iframe技术，图⽚点⼏进⼊⼀个其他⽹址，导致⽤户信息泄密　　　　点击劫持防御

　　　　　　 X-FRAME-OPTIONS 是⼀个HTTP响应头，在现代浏览器有⼀个很好的⽀持，这个HTTP响应头就是为了防御iframe嵌套的点击劫持攻击

　　　　　　该响应头有三个值可选，分别是

　　　　　　　　 DENY:表⽰页⾯不允许通过iframe的⽅式展⽰

　　　　　　　　SAMEORIGIN:表⽰页⾯可以在相同域名下通过iframe的⽅式展⽰

　　　　　　　　ALLOW-FRO:表⽰页⾯可以在指定来源的iframe中展⽰

现在实现⽅式： ctx.set('X-FRAME-OPTIONS','DENY')

以上代码的作⽤就是当通过iframe的⽅式加载页⾯时，攻击者的⽹页直接不显⽰所有内容了

　　4.SQL注⼊

　　　　　攻击者成功的向服务器提交恶意的SQL查询代码，程序在接收后错误的将攻击者的输⼊作为查询语句的⼀部分执⾏，导致原始的查询逻辑被改变，额外的执⾏了攻击者精⼼构造的恶意代码。　　　　　　　　例如： 'or'1 '=' 1 填写特殊密码 　　　拼接后的sql

　　　　　　SELECT * FROM test.user

WHERE username = 'xiaozhou' AND password= '1' or '1' = '1'

⽼的后台数据库登录，⿊客尝试使⽤1' or '1' = '1相等于密码，去登录

　　　　　防御

　　　　　　所有的查询语句建议使⽤数据库提供的参数查询接⼝**。参数化的语句使⽤参数⽽不是将⽤户输⼊变量嵌⼊到SQL语句中，既不要直接拼接SQL语句，例如node.js中的mysqlis库query⽅法中的？占位符参数

错误的写法

cosnt sql = `

SELECT *

FROM test.user

WHERE username = '${ctx.reuqueset.body.username}' AND password= '${ctx.reuqueset.body.password}' ` console.log('sql',sql) res = await query(sql) 正确的写法

const sql = `

SELECT *

FROM test.user

WHERE username = ? AND password= ? ` console.log('sql',sql)

res = await query(sql.[ctx.request.body.username，ctx.reuqueset.body.password])　　　　

　　　　　　1.严格限制web应⽤的数据库的操作权限**，给此⽤户提供仅仅能够满⾜其⼯作的最低权限，从⽽最⼤限度减少注⼊攻击对数据库的危害

　　　　2.后端代码检查输⼊的数据是否符合预期**，严格限制变量的类型，例如使⽤正则表达式进⾏⼀些匹配处理

　　　　 3.对进⾏数据库的特殊字符串(',\等等)进⾏转义处理，后者编码转换。基本所有的后端语⾔都有对字符串进⾏转义处理的⽅法，⽐例，loads的lodaash_escapehtmlchar等

　　5.OS命令注⼊

　　　　os命令注⼊和sql注⼊差不多，只不过SQL注⼊是针对数据库的，⽽OS命令注⼊是针对操作系统的，OS命令注⼊攻击者指通过web应⽤,执⾏⾮法的

操作系统命令达到攻击的⽬的，只要在你让那个调⽤Shell函数的地⽅就有存在被攻击的风险，倘若 调⽤shell时存在疏漏，就可以执⾏插⼊⾮法命令　　　　　　

以node.js为例，假如在接⼝中需要从github下载⽤户指定的repo const exec = require('mz/child_process').exec; let params = {/*⽤户输⼊的参数*/}

exec(`git clone ${params.repo} /some/path`) 如果传⼊参数是会怎么样

https://github.com/xx/xx.git && rm -fr /* &&

　　6.请求劫持　　　　DNS劫持

　　　　　　顾名思义，DNS服务器(DNS解析各个步骤)被篡改，修改了域名解析的结果，使得访问的不是预期的ip　　　　 HTTPS劫持

　　　　　　运营商劫持，此时⼤概就只能升级为HTTPS了　　7.DDOS　　　　

　　　 阮⼀峰⽂档说

　　　　DDOS不是⼀种攻击，⽽是⼀⼤类攻击的总称，它有⼏⼗张类型，新的攻击⽅法还不断发明出来，⽹站运⾏各个环节，都可以是攻击⽬标，只要把⼀个环节攻破，使得整个流程、跑不起来，就得到瘫痪服务的⽬的

　　　　其中，⽐较常见的是⼀种攻击是cc攻击，他就是简单粗暴地送来⼤量的正常请求，超出服务器的最⼤承受量，导致死机，

　　　　⽐如遭遇cc攻击，最多的时候全世界⼤概20多个ip地址轮流发出请求，每个地址请求量在每秒200次-300次，我看访问⽇志的时候，就觉得请求像洪⽔⼀样涌来，⼀眨眼就是⼀⼤堆，⼏分钟的时候，⽇志⽂件的体积就⼤了100MB,　　　　 常见的攻击⽅式　　　　　　SYN Flood

　　　　　　　　此攻击通过⽬标发送具有欺骗性源ip地址的⼤量TCP 初始链接请求SYN数据包来利⽤TCP握⼿，⽬标机器相应每个链请求，然后等待握⼿中的最后⼀步，这⼀步从未发⽣过，耗尽了过程中的⽬标资源　　　　　　HTTP Flood

　　　　　　　　 此攻击类似于同时在多个不同计算机上反复按web浏览器中的刷新，⼤量HTTP请求泛滥服务器，导致拒接服务 　　　　 防御⼿段　　　　　　备份⽹站

　　　　　　　　备份⽹站不⼀定是全功能的，如果能做到全静态浏览，就能满⾜需求，最低限度应该可以显⽰公告，告诉⽤户，⽹站出看问题，正在全⼒抢修　　　　　　HTTP请求拦截

　　　　　　　　　硬件，服务器，防⽕墙 　 带宽扩容 + CDN 提⾼犯罪成本

防范⽅法

　　1.密码安全　　　　　　泄露渠道

　　　　　　数据库被偷 服务器被⼊侵 通信被窃听 内部⼈员泄露 其他⽹站

　　　　　防御密⽂-明⽂⽆法反推　　

　　　　　　严禁明⽂存储　　 单向变换　　变换复杂度要求　　密码复杂度要求　　加盐（仿拆解）　　雪崩效应-明⽂⼩幅度　　 密⽂剧烈变化　　密⽂固定长度 md5 sha1　　　　　 密码传输安全

　　　　　　https传输　　频次限制　　前端加密意义有限-传输层加密，不会泄露，但不代表不能登录　　　　　摘要加密的复杂度

　　　　　　　　 md5反查,⽤node启动了⼀个本地服务，使⽤node提供的crypto对密码加密　　　　　

　　　　虽然对密码加密了，但是我们设置的过于简单，通过md5反查，不到1秒就能查到密码

　　　　 https://cmd5.com/ 密码设置太过简单，就可直接通过这个地址查询到⾃⼰的密码，密码设置数字加英⽂就不会当场查询出来，需要付费就可以查询出来了 如果设置数字，英⽂，字符串，就查询不到

　　2.⼈机验证 与 验证码

　　　　加强登录验证，防⽌⿊客盗刷，导致服务器奔溃

　　　　　　滑动验证码实现原理 　

　　　　　　　　　　1.服务端随机⽣成抠图和带有抠图阴影的背景图⽚，服务端保存随机抠图位置坐标　　　　　　　　　　 2.前端实现滑动交互，将抠图拼在抠图阴影之上，获取⽤户滑动距离值。　　　　　　　　　　 3.前端将⽤户滑动距离值传⼊服务端，服务端校验误差是否在允许范围之内　　　3.HTTPS配置 　　　　　　HTTP弱点　　　　　　 危害　　　　

　　　　　　　窃听---密码 敏感信息

　　　　　　　 篡改--- 插⼊⼴告 重定向其他⽹站　　　　　　时代趋势

　　　　　　　⽬前全球互联⽹正在从HTTP向HTTPS的⼤迁移

　　　　　　　Chrome和⽕狐浏览器将对不采⽤HTTPS加密的⽹站提⽰不安全　　　　　　 苹果要求所有APP通信必须采⽤HTTP加密 　　　　　　　⼩程序强制要求服务器端使⽤HTTPS请求　　　　　 特点　

　　　　　　保密性(防泄密)　　　　　　完整性(防篡改)　　　　　　真实性(仿假冒)　　　　 什么是SSL证书 　

　　　　　　SSL证书由浏览器中受信任的根证书颁发机构在验证服务器⾝份后颁发，具有⽹站⾝份验证和加密传输双重功能　　　　　　 密码学

　　　　　　　　对称加密、

　　　　　　　　　　对称加密的⼀⼤缺点是秘钥的管理和分配，话句话说，如何把秘钥发送到需要解密你的消息的⼈的⼿⾥是⼀个问题，在发送秘钥的过程中，秘钥有很⼤的风险会被⿊客们拦截，实现中通常的做法是将对称加密的秘钥进⾏对称加密，然后传送给需要他的⼈　　　　　　　　不对称加密

　　　　　　　　　　 产⽣⼀对秘钥 公钥负责加密　　私钥负责解密　　私钥⽆法解开说明公钥⽆效---抗抵抗　　计算复杂对性能有影响　　　　SSH公钥登录原理　

　　　　　　密码⼝令登录

　　　　　　　　　通过密码进⾏登录，主要流程为

　　　　　　　　　　1.客户端连接上服务器之后，服务器吧⾃⼰的公钥传给客服端　　　　　　　　　　2.客服端输⼊服务器密码通过公钥加密之后传给服务器　

　　　　　　　　　　 3.服务器根据⾃⼰的私钥解密登录密码，如果正确那么久让客户端登录　　　　　 公钥登录

　　　　　　　　　公钥登录是为了解决每次登录服务都要输⼊密码的问题，流⾏使⽤RSA加密⽅案，主要流程包括　　　　　　　　　　　　1.客户端⽣成RSA公钥和私钥　　　　　　　　　　2.客户端将⾃⼰的公钥存放到服务器

　　　　　　　　　　3.客户端请求连接服务器，服务器将⼀个公钥加密随机字符串发送给客户端　　　　　　　　　　 4.客户端根据⾃⼰的私钥加密这个随机字符串之后再发送给服务器

　　　　　　　　　　5.服务器接收到加密后的字符串之后⽤公钥解密，如果正确就让客户端登录，否则拒绝　　　　　　SSL证书分类

　　　　　　　　1.⼊门级DCSSL -域名有效，⽆门槛　　　　　　　　2.企业级OVSSL-企业资质 个⼈认证

　　　　　　　　 3.增强型EVSSL-浏览器给予绿⾊地址显⽰公司名字　　4.Session管理　

　　　对于cookie的安全管理，其重要⾏是不⾔⽽喻的。特别是对于动态的wen应⽤，在如HTTP这样的⽆动态协议的之上，他们需要使⽤cookie来维护状态

　　　Cookie标识

　　　　　　secure 这个属性告诉浏览器，仅在请求是通过HTTPS传输时，才传递cookie

　　　　　　HttpOnly 设置这个属性将禁⽌JavaScript脚本获取到这个cookie，这可以⽤来帮助防⽌跨站脚本攻击.　　　　 Cookie域

　　　　　　domain 这个属性⽤来⽐较请求URL中服务端的域名，如果域名匹配成功，或者是其⼦域名，则继续检查path属性　　　　　　path 除了域名，cookie可⽤的url路径页可以被指定，当域名和路径都匹配时，cookie才会发送请求　　　　　　expires 这个属性⽤来设置持久化的cookie，当设置了他以后cookie在指定的时间到达之前都不会过期　　5浏览器安全控制

　　　　X-XSS-Protection 防⽌反射型XSS

　　　　　Strict-Transport-security 强制使⽤HTTPS通信　　　　　CSP

　　　　　HTTP响应头Content-Security-Policy 允许站点管理者在指定页⾯控制⽤户代理资源，除了少数例外，这条政策将极⼤的指定服务源，以及脚本端点，这将防⽌跨站脚本攻击

　　　　　　　爬⾍技术

　　　使⽤cheerio与http和https　　　puppeter ⽆头浏览器技术　 反爬⾍技术

　　　 Usre-Agent， Referer ，验证码，验证　　　　单位时间的访问次数，访问量，限制　　　　关键信息⽤图⽚混交　　　　异步加载技术　　　　前度技术限制　　　　　　字体乱序加密技术

　　　　　　将⽹站的重要字体，将html部分⽣成图⽚　　　　　　 反爬⾍最⾼境界就是Canvas的指纹

以上都是对前端安全⼀些总结，欢迎⼤佬指点⼀⼆