面试之前端安全问题

三大安全问题(客户端)

一：XSS 攻击
二：CSRF 攻击
三：点击劫持

XSS 攻击

XSS 攻击的本质是将用户数据当成了 HTML 代码一部分来执行，从而混淆原本的语义，产生新的语义。
XSS 攻击方式有很多，所有和用户交互的地方，都有可能存在 XSS 攻击。

例如：
所有 input 框。
window.location。
window.name。
document.referrer。
document.cookie。
localstorage。

影响：盗取用户cookie，伪造用户登录，窃取用户资料；向页面注入一个登录弹窗，让用户认为是网站内的登录弹窗（其实是钓鱼网站的），一旦用户登录，账号密码就泄露给了钓鱼网站；获取用户真实的 IP等
XSS攻击防御:
配置 HTTP 中的 http-only 头，让前端 JS 不能操作 Cookie。
输入检查，在用户提交数据时，使用 XssFilter 过滤掉不安全的数据。
输出检查，在页面渲染的时候，过滤掉危险的数据。

CSRF 攻击

CSRF（Cross-site request forgery）跨站请求伪造，是一种利用用户身份，执行一些用户非本意的操作。
防御 CSRF 主要有以下几种方式：

验证码:
每一次请求都要求用户验证，以确保请求真实可靠。
即：利用恶意脚本不能识别复杂的验证码的特点，保证每次请求都是合法的。
Referer 检查:
检查发起请求的服务器，是否为目标服务器。
即：HTTP 请求中的 Referer 头传递了当前请求的域名，如果此域名是非法服务器的域名，则需要禁止访问。
Token:
利用不可预测性原则，每一请求必须带上一段随机码，这段随机码由正常用户保存，黑帽子不知道随机码，也就无法冒充用户进行请求了。

点击劫持

点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。

方案一：frame busting

if (self !== top) {
// 跳回原页面
top.location = self.location;
}
正常网站使用 JS 脚本判断是否被恶意网站嵌入，如：博客网站监测到被一个 iframe 打开，自动跳转到正常的页面即可。
方案二：使用 HTTP 中的 x-frame-options 头，控制 iframe 的加载，它有 3 个值可选：

DENY，表示页面不允许通过 iframe 的方式展示。
SAMEORIGIN，表示页面可以在相同域名下通过 iframe 的方式展示。
ALLOW-FROM，表示页面可以在指定来源的 iframe 中展示。
配置 iframe 的 sandbox 属性

sandbox = “allow-same-origin” 则只能加载与主站同域的资源