web前端如何防范安全攻击

一、对于XSS防御:

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

复制代码
function escape(str) {
  str = str.replace(/&/g, '&')
  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 从而实现中间人攻击。

posted @ 2020-08-19 12:55  ____chen  阅读(902)  评论(0编辑  收藏  举报