前端安全

• 问题1：前端安全是什么?
  
  

• 问题2：前端安全怎么解决
  
  

• 问题3：什么是xss攻击
  
  

简介

    XSS又叫CSS (Cross Site Script) ,跨站脚本攻击

    XSS是一种发生在Web前端的漏洞，所以其危害的对象也主要是前端用户

    XSS漏洞可以用来进行钓鱼攻击、前端js挖矿、盗取用户cookie，甚至对主机进行远程控制

攻击流程

    假设存在漏洞的是一个论坛，攻击者将恶意的JS代码通过XSS漏洞插入到论文的某一页面中

    当用户访问这个页面时，都会执行这个恶意的JS代码，这个代码就会在用户的浏览器端执行

XSS攻击类型

危害：存储型 > 反射型 > DOM型

• 反射型：交互的数据一般不会被存在数据库里面，一次性，所见即所得，一般出现在查询页面等
• 存储型：交互的数据会被存在数据库里面，永久性存储，一般出现在留言板，注册等页面
• DOM型：不与后台服务器产生数据交互，是一种通过DOM操作前端代码输出的时候产生的问题，一次性，也属于反射型
  
  

XSS形成原因

    形成XSS漏洞的  主要原因是程序中输入和输出的控制不够严格

    导致“精心构造”的脚本输入后，在输出到前端时被浏览器当作有效代码解析执行

常见的漏洞场景

        登录，注册，搜索，留言一切表单的行为，过滤<>""/() (srcipt)(srcipt) 解析成html标签 如：&qt  <>

<script>alert("xss")</script>
<script>alert(document.cookie)</script>
<script>alert(window.localStorage.getItem("key"))</script>
'>

vue解决xss方法

v-html 出现xss问题

方法1：
<p v-html="$xss(test)"></p>
import xss from 'xss'
export default {
  data () {
    return {
      test: `<a onclick='alert("xss攻击")'>链接</a>`
    }
}
Object.defineProperty(Vue.prototype, '$xss', {
  value: xss
})
方法2：

安装
cnpm install vue-dompurify-html

引入
import VueDOMPurifyHTML from 'vue-dompurify-html'
Vue.use(VueDOMPurifyHTML)

使用
<div v-dompurify-html="rawHtml"></div>

方法3：
<div id="box">
    <input type="text" v-model="msg | filterHtml">
    <br>
    <label v-html="msg"></label>
</div>

Vue.filter('filterHtml',{
    read:function(val){//val就是以获取的msg的值
        return val.replace(/<[^>]*>/g);//去除文字的<...></...>标签
    },
    write:function(){
        return val;
    }
});

执行效果截图：

攻击代码

前端安全

• 问题1：前端安全是什么?
  
  

• 问题2：前端安全怎么解决
  
  

• 问题3：什么是xss攻击
  
  

简介

    XSS又叫CSS (Cross Site Script) ,跨站脚本攻击

    XSS是一种发生在Web前端的漏洞，所以其危害的对象也主要是前端用户

    XSS漏洞可以用来进行钓鱼攻击、前端js挖矿、盗取用户cookie，甚至对主机进行远程控制

攻击流程

    假设存在漏洞的是一个论坛，攻击者将恶意的JS代码通过XSS漏洞插入到论文的某一页面中

    当用户访问这个页面时，都会执行这个恶意的JS代码，这个代码就会在用户的浏览器端执行

XSS攻击类型

危害：存储型 > 反射型 > DOM型

• 反射型：交互的数据一般不会被存在数据库里面，一次性，所见即所得，一般出现在查询页面等
• 存储型：交互的数据会被存在数据库里面，永久性存储，一般出现在留言板，注册等页面
• DOM型：不与后台服务器产生数据交互，是一种通过DOM操作前端代码输出的时候产生的问题，一次性，也属于反射型
  
  

XSS形成原因

    形成XSS漏洞的  主要原因是程序中输入和输出的控制不够严格

    导致“精心构造”的脚本输入后，在输出到前端时被浏览器当作有效代码解析执行

常见的漏洞场景

        登录，注册，搜索，留言一切表单的行为，过滤<>""/() (srcipt)(srcipt) 解析成html标签 如：&qt  <>

<script>alert("xss")</script>
<script>alert(document.cookie)</script>
<script>alert(window.localStorage.getItem("key"))</script>
'>

vue解决xss方法

v-html 出现xss问题

方法1：
<p v-html="$xss(test)"></p>
import xss from 'xss'
export default {
  data () {
    return {
      test: `<a onclick='alert("xss攻击")'>链接</a>`
    }
}
Object.defineProperty(Vue.prototype, '$xss', {
  value: xss
})
方法2：

安装
cnpm install vue-dompurify-html

引入
import VueDOMPurifyHTML from 'vue-dompurify-html'
Vue.use(VueDOMPurifyHTML)

使用
<div v-dompurify-html="rawHtml"></div>

方法3：
<div id="box">
    <input type="text" v-model="msg | filterHtml">
    <br>
    <label v-html="msg"></label>
</div>

Vue.filter('filterHtml',{
    read:function(val){//val就是以获取的msg的值
        return val.replace(/<[^>]*>/g);//去除文字的<...></...>标签
    },
    write:function(){
        return val;
    }
});

执行效果截图：

攻击代码