AboutFE 36、前端安全相关

XSS攻击

XSS （Cross-site scripting）允许恶意web用户将代码植入到提供给其它用户使用的页面中。其实在web前端方面，可以简单的理解为一种javascript代码注入，精髓不在于“跨站”，在于“脚本”

   // 文本
   $username =  "<script>alert('侯医生');</script>"; 
   $username =  "\u003cscript\u003ealert('okok')";
   // 图片
   $imgsrc="\" onerror=\"javascript:alert('侯医生');\"";
   $username="\u003cimg src=\'\' onerror=javascript:alert(\'okok\');\u003e";
    // 导航栏 url 携带参数
   $url = "localhost:8080/id=<script>xxx<script>";

防治

最简单的办法防治办法，还是将前端输出数据都进行转义最为稳妥。比如，按照刚刚我们那个例子来说，其本质是，浏览器遇到script标签的话，则会执行其中的脚本。但是如果我们将script标签的进行转义，则浏览器便不会认为其是一个标签

转义处理：对输出的字符串中的 \反斜杠和<>左右符号进行转义(json转义)。这样，\就不会被当做unicode码的开头来被处理了
URL处理：像这种从url中获取的信息，建议最好由后端获取，在前端转义后再行输出
Cookie处理：阻止黑客通过js访问到cookie中的用户敏感信息。那么请使用cookie的HttpOnly属性，加上了这个属性的cookie字段，js是无法进行读写的 document.cookie = ""
MutationObserver 是 HTML5 新增的 API，功能很强大，给开发者们提供了一种能在某个范围内的 DOM 树发生变化时作出适当反应的能力。说的很玄乎，大概的意思就是能够监测到页面 DOM 树的变换，并作出反应。

var observer = new mo(function(mutations) {
  mutations.forEach(function(mutation) {
    // 返回被添加的节点,或者为null.
    var nodes = mutation.addedNodes;
    for (var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
     // 去监测 script 中的src 是否异常
      if (/xss/i.test(node.src) ) {
        try {
          node.parentNode.removeChild(node);
          console.log('拦截可疑静态脚本:', node.src);
        } catch (e) {}
      }
    }
  });
});

Apr 24 '20 12:04 CodingMeUp

CSRF攻击

Cross-site request forgery 跨站请求伪造，其实就是网站中的一些提交行为，被黑客利用，你在访问黑客的网站的时候，进行的操作，会被操作到其他网站上


   // 图片 伪造jsonp get请求
   $imgsrc="www.其他网站.com/dosomething?id=11"; 

   // 插入script post 请求
    <body>
        <button id="clickme">点我看相册</button>
        <script>
            $('#clickme').on('click', function () {
                // 用户再不知情的情况下，提交了表单，服务器这边也会以为是用户提交过来的。
                $('#myform').submit();
            });
        </script>
        <form id="myform" style="display:none;" target="myformer" method="post" action="http://myhost:8082/lab/xsrflab/submit.php">
            <input type="hidden" name="pid" value="1">
        </form>
        <iframe name="myformer" style="display:none;"></iframe>
    </body>

防治

使用POST请求，尽可能避免get请求，post

验证处理：加验证码（降低用户的提交体验），或者加token处理，用访问的页面中，都种下验证用的token，用户所有的提交都必须带上本次页面中生成的token，这种方式的本质和使用验证码没什么两样，但是这种方式，整个页面每一次的session（token生成，肯定是要随着session与用户ID去变的），使用同一个token就行，很多post操作，开发者就可以自动带上当前页面的token。如果token校验不通过，则证明此次提交并非从本站发送来，则终止提交过程。如果token确实为本网站生成的话，则可以通过。
风控监测Useragent或者机型频繁切换，请求key匹配项 (lat,lng, token 等) (didi _ wsg )

Apr 24 '20 13:04 CodingMeUp

网络劫持攻击

很多的时候，我们的网站不是直接就访问到我们的服务器上的，中间会经过很多层代理，如果在某一个环节，数据被中间代理层的劫持者所截获，他们就能获取到使用你网站的用户的密码等保密数据。比如，我们的用户经常会在各种饭馆里面，连一些奇奇怪怪的wifi，如果这个wifi是黑客所建立的热点wifi，那么黑客就可以结果该用户收发的所有数据。这里，建议站长们网站都使用https进行加密。这样，就算网站的数据能被拿到，黑客也无法解开。

如果你的网站还没有进行https加密的化，则在表单提交部分，最好进行非对称加密--即客户端加密，只有服务端能解开。这样中间的劫持者便无法获取加密内容的真实信息了。

Apr 24 '20 13:04 CodingMeUp

控制台注入代码

天猫官网控制台的警告信息，如图4.1所示，这是为什么呢？因为有的黑客会诱骗用户去往控制台里面粘贴东西（欺负小白用户不懂代码），比如可以在朋友圈贴个什么文章，说:"只要访问天猫，按下F12并且粘贴以下内容，则可以获得xx元礼品"之类的，那么有的用户真的会去操作，并且自己隐私被暴露了也不知道。

avatar

Apr 24 '20 13:04 CodingMeUp

HTTPS 与 CSP

最后再简单谈谈 HTTPS 与 CSP。其实防御劫持最好的方法还是从后端入手，前端能做的实在太少。而且由于源码的暴露，攻击者很容易绕过我们的防御手段。

CSP CSP 即是 Content Security Policy，翻译为内容安全策略。这个规范与内容安全有关，主要是用来定义页面可以加载哪些资源，减少 XSS 的发生。

MDN – CSP

HTTPS 能够实施 HTTP 劫持的根本原因，是 HTTP 协议没有办法对通信对方的身份进行校验以及对数据完整性进行校验。如果能解决这个问题，则劫持将无法轻易发生。

HTTPS，是 HTTP over SSL 的意思。SSL 协议是 Netscape 在 1995 年首次提出的用于解决传输层安全问题的网络协议，其核心是基于公钥密码学理论实现了对服务器身份认证、数据的私密性保护以及对数据完整性的校验等功能。

https://www.cnblogs.com/coco1s/p/5777260.html

Apr 24 '20 13:04 CodingMeUp

AboutFE AboutFE copied to clipboard

36、前端安全相关

XSS攻击

防治

CSRF攻击

防治

网络劫持攻击

控制台注入代码

HTTPS 与 CSP

AboutFE
AboutFE copied to clipboard