前端输入框如何防止js代码攻击

这种攻击一般叫做xss攻击

有的时候页面中会有一个输入框，用户输入内容后会显示在页面中，类似于网页聊天应用。如果用户输入了一段js脚本，比如：<script>alert('test');</script>,页面会弹出一个对话框，或者输入的脚本中有改变页面js变量的代码则会时程序异常或者达到跳过某种验证的目的。

攻击的危害 

攻击者把代码注入进了访问的页面，所以恶意脚本都在网站的上下文环境中执行，这就意味着恶意代码被当做网站提供的正常脚本一样对待：他有权访问页面与网站的关键数据（比如cookie）,浏览器会认为他是网站的合法部分，允许他做任何事情。比如拿到用户的cookie信息，然后传送到攻击者自己的服务器，从cookie中提取敏感信息，拿到用户的登录信息，或者攻击者可以通过修改DOM在页面上插入一个假的登陆框，也可以把表单的`action`属性指向他自己的服务器地址，然后欺骗用户提交自己的敏感信息。

怎样预防这种攻击 

1.可以下载前端防御组件：js-xss         npm install xss

var xss = require('xss')
$('btnSure').on('click',function(){
    let result = xss($('.input').val())
    putout.html(result)
})

2.在客户端使用javascript对用户输入进行编码时，有一些内置的方法和属性能够自动感知对上下文的情况下自动对所有的数据进行编码

下表就是一些自动编码的方式：

 

下面是参考链接： 

https://www.jianshu.com/p/a5ff8a23b423