如何防范web前端安全攻击

一、对于XSS防御：

　　1、不要信任任何外部传入的数据，针对用户输入作相关的格式检查、过滤等操作，以及转义字符处理。最普遍的做法就是转义输入输出的内容，对于括号，尖括号，斜杠进行转义

function escape(str) {
  str = str.replace(/&/g, '&amp;')
  str = str.replace(/</g, '&lt;')
  str = str.replace(/>/g, '&gt;')
  str = str.replace(/"/g, '&quto;')
  str = str.replace(/'/g, '&#39;')
  str = str.replace(/`/g, '&#96;')
  str = str.replace(///g, '&#x2F;')
  return str
}

// 通过转义可以将攻击代码 变成 -> &lt;script&gt;alert(1)&lt;&#x2F;script&gt;
escape('<script>alert(1)</script>')

　　但是对于显示富文本来说，显然不能通过上面的办法来转义所有字符，因为这样会把需要的格式也过滤掉。对于这种情况，通常采用白名单过滤的办法，当然也可以通过黑名单过滤，但是考虑到需要过滤的标签和标签属性实在太多，更加推荐使用白名单的方式。

const xss = require('xss')
let html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>')
// -> <h1>XSS Demo</h1>&lt;script&gt;alert("xss");&lt;/script&gt;
console.log(html)

　　示例使用了 js-xss 来实现，可以看到在输出中保留了 h1 标签且过滤了 script 标签。

　　2、可以使用CSP内容安全策略

二、对于CSRF防御：

　　1、get请求不对数据进行修改

　　2、不让第三方网站访问到Cookie，安全地使用 Cookie，设置Cookie为HttpOnly，禁止JavaScript操作Cookie；

　　3、阻止第三方网站请求接口，不要信任任何传入的第三方数据，使用 CORS，设置 Access-Control-Allow-Origin；

　　4、请求时附带验证信息，比如验证码或者Token

　　5、防止网页被其他网站内嵌为iframe，服务器端设置 X-Frame-Options 响应头，防止页面被内嵌。

三、对于点击劫持防御：

　　1、X-FRAME_OPRIONS

　　X-FRAME_OPRIONS (X-Frame-Options)这个可以说是为了解决ClickJacking而生的，是一个HTTP响应头，在现代的浏览器中有一个较好的支持，它就是为了防御用iframe嵌套的点击劫持攻击。该响应头有三个值可选，分别是：

　　（1）DENY 表示页面不允许通过iframe的方式展示，（浏览器会拒绝当前页面加载的任何iframe）
　　（2）SAMEORIGIN 表示页面可以在相同域名下通过iframe的方式展示,（frame页面的地址只能为同源域名下的页面）

　　（3）ALLOW-FROM 表示页面可以在指定来源的iframe中展示

// 配置方法
// Apache配置
Header always append X-Frame-Options SAMEORIGIN

// nginx配置
add_header X-Frame-Options SAMEORIGIN;

四、对于中间人攻击防御

　　防御中间人攻击其实并不难，只需要增加一个安全通道来传输信息。HTTPS 就可以用来防御中间人攻击，但是并不是说使用了 HTTPS 就可以高枕无忧了，因为如果你没有完全关闭 HTTP 访问的话，攻击方可以通过某些方式将 HTTPS 降级为 HTTP 从而实现中间人攻击。

　　推荐讲的比较好的一篇博客：https://blog.csdn.net/qq_37288477/article/details/86601005