JS题 实际问题

点击穿透

这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click
而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上
如果A元素是一个链接，那此时页面就会意外地跳转

事件机制

捕获，到达目标，冒泡

现代浏览器：addEventListener / evt.target，无on，有捕获和冒泡，参数3控制在捕获还是冒泡阶段触发事件
旧IE：attachEvent / event.srcElement，带on，只有冒泡阶段

XSS

发生在：
1. 数据从一个不可靠的链接进入到一个web应用程序
2. 没有过滤掉恶意代码的动态内容被发送给web用户

前端防范：
1. 字符串类型的数据，需要针对<、>、/、’、”、&五个字符进行实体化转义
function encodeHTML (a) {
  return String(a)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
};
2. 在响应头或页面<meta>内设置 Content-Security-Policy
3. 设置响应头的 HttpOnly ，使得 cookie 不能使用 JavaScript 经由  Document.cookie 属性、XMLHttpRequest 和  Request APIs 进行访问

后端防范：过滤所有的‘<’和‘>’字符，确保从后端而来的数据并不带有任何的html标签，xss的危险在于有不可预料的前端脚本，但是值得注意的是，不单只有script标签是可以运行脚本的，任何的html标签都可以加上类似onclick，onload这样的事件也都可以运行脚本，所以需要过滤所有的‘<’和‘>’字符