前端安全：几种攻击模式

1.XSS攻击

主要是注入js代码，通过将js代码存入数据库或者通过修改 URL 参数的方式加入攻击代码，诱导用户访问链接从而进行攻击。

防御措施：

1. 对字符串进行转义 通常来说主要针对script标签进行转义

function escape(str) {
      str = str.replace(/&/g, '&');
      str = str.replace(/, '<');
      str = str.replace(/>/g, '>');
      str = str.replace(/"/g, '&quto;');
      str = str.replace(/'/g, ''');
      str = str.replace(/`/g, '`');
      str = str.replace(///g, '/');
      return str;
}

2. CSP: Content-Security-Policy
   设置 meta 标签的方式 ,具体去看一下CSP的文档

	<meta http-equiv="Content-Security-Policy">

2.CSRF攻击
CSRF 中文名为跨站请求伪造。攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。 如下：其中Web A为存在CSRF漏洞的网站，Web B为攻击者构建的恶意网站，User C为Web A网站的合法用户。
防御措施：无非就是不要把登录身份给攻击者拿到， 最安全自然同源策略。

1. SameSite：可以对 Cookie 设置 SameSite 属性。该属性表示 Cookie 不随着跨域请求发送。
2. referer：通过验证 Referer 来判断该请求是否为第三方网站。
3. Token：目前前端最常用的方式

3.点击劫持
点击劫持，clickjacking，也被称为UI-覆盖攻击。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。
防御措施：
X-Frame-Options它有三个可选的值：
DENY：浏览器会拒绝当前页面加载任何frame页面；
SAMEORIGIN：frame页面的地址只能为同源域名下的页面；
ALLOW-FROM origin：允许frame加载的页面地址；
本人使用nginx，则设置： add_header X-Frame-Options SAMEORIGIN;

4.中间人攻击
当数据传输发生在一个设备（PC/手机）和网络服务器之间时，攻击者使用其技能和工具将自己置于两个端点之间并截获数据；尽管交谈的两方认为他们是在与对方交谈，但是实际上他们是在与干坏事的人交流，这便是中间人攻击。（回话劫持，DNS欺骗等）
这边不具体说了，对于前端的措施，将http升级为https来防御