Web前端最全XSS web安全浅析_xss定义(1)，Web前端高级工程师面试题-字节跳动

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

localhost:3000

在 index.js中


在router/index.js中获得请求url内容

res.render(‘index’, { title: ‘Express’, xss:req.query.xss });

`<%- xss %>` -表示解析html   
 在url中输入参数 ?xss=12

?xss= img标签自动触发
?xss=

点我!

这种是引诱触发
?xss= 这种是广告拦截（色情广告，计费广告）

* 存储型


怎么存在服务端呢？是怎样到达服务端呢？sql语句


### xss攻击防御


**编码**


* 不要对用户的数据原样存储
* 对用户输入的数据进行HTML Entity编码


**过滤**


对用户输入的数据进行移除。


移除用户上传的Dom属性，如onerror事件


移除用户上传的style节点，script节点，iframe节点 `body:display：none !important`


js都是通过 src引入， 攻击者通过js非同源策略，可以完全操作我们的页面


**校正**


避免直接对HTML Entity 解码，   
 使用DOM Parse转换，校正不匹配的的Dom标签， 输入到文本 –> DOM parse


实战：   
 通过构建Node服务和建立一个评论功能，实时演示Xss的攻击和防范（用户的输入，服务端存储，客户端的展现），看看哪些是套路


xss防御：


1. 接口构造

// 假设用户的评论数据就在缓存中喽
var comments = {};

// 采用html编码
function html_encode(str){
var s = ‘’;
if(str.lenth == 0) return ‘’;
s = str.replace(/&/g,“>”);
s = s.replace(/</g, ‘<’);
s = s.replace(/>/,‘>’);
s = s.replace(/\s/,’ ‘);
s = s.replace(/’/,‘’‘);
s = s.replace(/"/,’"‘);
s = s.replace(/\n/,’
;');
return s;
}

//设置评论
router.get(‘/comment’, function(req, res, next) {
comments.v = html_encode(req.query.comment);
});

//获取评论
router.get(‘/getComment’, function(req,res,next){
res.json({
comment:comments.v
})
})

#### 后话

-------------------------------------------------------------

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

对于面试，说几句个人观点。



面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。