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, "&")
      .replace(//g, ">")
      .replace(/"/g, """)
      .replace(/'/g, "'");
  };
  2. 在响应头或页面内设置 Content-Security-Policy
  3. 设置响应头的 HttpOnly ，使得 cookie 不能使用 JavaScript 经由  Document.cookie 属性、XMLHttpRequest 和  Request APIs 进行访问
  
  后端防范：过滤所有的‘<’和‘>’字符，确保从后端而来的数据并不带有任何的html标签，xss的危险在于有不可预料的前端脚本，但是值得注意的是，不单只有script标签是可以运行脚本的，任何的html标签都可以加上类似onclick，onload这样的事件也都可以运行脚本，所以需要过滤所有的‘<’和‘>’字符