前端面试之(安全、性能优化、SEO)

安全

XSS

xss: 跨站脚本攻击(Cross Site Scripting)是最常见和基本的攻击 WEB 网站方法,攻击者通过注入非法的 html 标签或者 javascript 代码,从而当用户浏览该网页时,控制用户浏览器。

类别

DOM XSS

DOM即文本对象模型,使用DOM可以允许程序和脚本动态的访问和更新文档的内容、结构和样式。这种方式不需要服务器解析响应的直接参与,触发XSS靠的是浏览器端的DOM解析,可以认为完全是客户端的事情。
反射型 xss :

反射型XSS

也被称为非持久性XSS,是现在最容易出现的一种XSS漏洞。发出请求时,XSS代码出现在URL中,最后输入提交到服务器,服务器解析后在响应内容中出现这段XSS代码,最后浏览器解析执行。

存储型 XSS

存储型XSS又被称为持久性XSS,它是最危险的一种跨站脚本,相比反射型XSS和DOM型XSS具有更高的隐蔽性,所以危害更大,它不需要用户手动触发。 当攻击者提交一段XSS代码后,被服务器端接收并存储,当所有浏览者访问某个页面时都会被XSS,其中最典型的例子就是留言板。

XSS危害

利用虚假输入表单骗取用户个人信息。
利用脚本窃取用户的 Cookie 值,被害者在不知情的情况下,帮助攻击者发送恶意请求。

XSS 防御

httpOnly: 在 cookie 中设置 HttpOnly 属性,使js脚本无法读取到 cookie 信息。
前端负责输入检查,后端也要做相同的过滤检查。
某些情况下,不能对用户数据进行严格过滤时,需要对标签进行转换

CSRF

跨站点请求伪造(Cross-Site Request Forgeries),冒充用户发起请求(在用户不知情的情况下), 完成一些违背用户意愿的事情(如修改用户信息,删初评论等)。

CSRF危害

  • 利用已通过认证的用户权限更新设定信息等;
  • 利用已通过认证的用户权限购买商品;
  • 利用已通过的用户权限在留言板上发表言论。

防御

  • 验证码;强制用户必须与应用进行交互,才能完成最终请求。
  • 尽量使用 post ,限制 get 使用;get 太容易被拿来做 csrf 攻击;
  • 请求来源限制,此种方法成本最低,但是并不能保证 100% 有效,因为服务器并不是什么时候都能取到 Referer,而且低版本的浏览器存在伪造 Referer 的风险。
  • token 验证 CSRF 防御机制是公认最合适的方案。

使用token的原理:
第一步:后端随机产生一个 token,把这个token 保存到 session 状态中;同时后端把这个token 交给前端页面;
第二步:前端页面提交请求时,把 token 加入到请求数据或者头信息中,一起传给后端;
后端验证前端传来的 token 与 session 是否一致,一致则合法,否则是非法请求。

点击劫持

点击劫持,是指利用透明的按钮或连接做成陷阱,覆盖在 Web 页面之上。然后诱使用户在不知情的情况下,点击那个连接访问内容的一种攻击手段。这种行为又称为界面伪装(UI Redressing) 。

点击劫持一般有如下两种方式实现:

  • 击者使用一个透明 iframe,覆盖在一个网页上,然后诱使用户在该页面上进行操作,此时用户将在不知情的情况下点击透明的 iframe 页面;
  • 攻击者使用一张图片覆盖在网页,遮挡网页原有的位置含义。

防御

X-FRAME-OPTIONS

X-FRAME-OPTIONS HTTP 响应头是用来给浏览器指示允许一个页面可否在,