web安全

最新推荐文章于 2024-09-14 10:24:09 发布

水势年华

最新推荐文章于 2024-09-14 10:24:09 发布

阅读量167

点赞数

分类专栏：前端知识技巧文章标签： web安全

本文链接：https://blog.csdn.net/ctt08225/article/details/88580494

版权

前端知识技巧专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

XSS 和 CSRF 和前端安全相关，但是其实前端能做的并不多，最多只是对一些特殊字符进行转义，但是其实主要的工作还是后端来做，所以前端到底能做什么来预防这些东西。面试官是这么跟我说的，他说前端只是一个大门，并不能挡住所有东西，但是还是要对这些东西有所了解。
所以呢，在安全方面，前端能做的东西真的不多，但是要有这个意识，如果你连防御的意识都没有的话那么写的程序肯定是有漏洞的，

1、xss攻击

即跨域脚本攻击，cross site scriptting

（1）攻击原理

1）反射型：主要是用户输入一段可执行代码，后台并没有对其进行处理；重定向到查询结果页面以后显示查询不到任何结果并且显示了警告

结果：这种攻击方式并不会保存到数据库中，而且需要用户点击，危害性相对较小。

2）存储型：原理与反射型类似，不过其输入的代码会保存到数据库中，所有用户都可以看到这些信息。危害性较大

（2）攻击方式

富文本攻击
script攻击
html攻击
html属性

富文本攻击与其他不一样。编辑框可以允许客户嵌入代码，如果这段代码是发给管理者的，就可能获取管理者的数据，造成危害，因此富文本的防御和其他的有所区别。

（3）防御方式

①浏览器自带防御系统

目前大多数浏览器都有自带的防御xss攻击的机制，而且默认是开启的，但是只能防御一些基本的反射型xss攻击

②对特殊字符进行转义（前端唯一可做的）

后台也可以做，即将特殊字符进行转义，因此浏览器解析的时候就不会将他渲染成元素，而是渲染成文字。

var escapeHtml = function(str){
    if (!str) return '';
    str = str.replace(/</g,'&lt;');
    str = str.replace(/>/g,'&gt;');
    str = str.replace(/"/g,'&quto;');
    str = str.replace(/'/g,'&#39;');
    str = str.replace(/&/g,'&amp;');
    return str
};

③设置白名单或黑名单

主要针对富文本进行处理，因为富文本允许用户输入代码

主要思路就是将字符串解析成 dom 树，然后对 dom 树做黑名单或白名单处理。

1）黑名单即去掉指定的标签和属性

/ 黑名单
var xssFilter = function(html){
    if(!html) return '';
    // 过滤 script 标签
    html = html.replace(/<\s*\/?script\s*>/g,'');
    // 过滤 a 标签如 <a href="javascript:alert(1)">
    html = html.replace(/javascript:[^'"]*/g,'');
    // 过滤 img 标签的 onerror 事件如 <img src="abc" onerror="alert(1)">
    html = html.replace(/onerror\s*=\s*['"]?[^'"]*['"]?/g,'');
    return html;
}

由于能触发的标签属性太多，不可能把所有情况都考虑到，所以可以考虑做白名单

2）白名单即只想保留想要的属性和标签

// 假设 htmlList 是解析完以后的 dom 节点
 var xssFilter = function(htmlList){
    if(!htmlList) return '';
    // 假设只允许 img 标签，并且只允许它带有 src 属性
    var whiteList = {
        'img':['src'],       
    };
    htmlList.each(function(elem,index){
    // 如果标签不在白名单中
        if(!whiteList[elem.name]){
        // 删除该标签
            htmlList.splice(index,1);
            return;
        }
        for(var attr in elem.attributes){
        // 如果标签的属性不在白名单中
            if(whiteList[elem.name].indexOf(attr)===-1){
            // 删除该属性
                elem.setAttribute(attr,null);
            }
        }
    });
    return htmList;
};

④csp：内容安全策略Content Security Policy，即用于指定哪些内容可以执行

⑤http-only：后端设置 Http-Only Header，使得前端无法读取及修改 cookie，无法获取用户身份。

2、CSRF攻击

即跨站请求伪造，cross site request forgery，攻击者在用户不知情下利用用户的身份进行转账，消费与发帖等

（1）攻击原理

用户登录 A 网站
A 网站验证用户身份
登录 B 网站，B 网站向 A 网站发起请求（带 A 网站的身份）

（2）防御方式

CSRF 的防御主要放在攻击原理的第三步，即如何让第三方网站发起请求时无法携带用户身份

①验证码

后台生成验证码保存在服务器中，并且返回到前台。待用户提交的时候校验。若 B 网站没有经过 A 网站的前台则无法获取这个验证码，因此不能通过后台的验证，但是如果干什么都要验证码的话会极大的影响用户体验。

②token

token 即后台按照一定规则生成的随机字符串，一个放在后台，一个放在 cookie 中，一个放在表单中（如果是 ajax 请求一般放到 meta 中，用户发起请求时从 meta 中获取）。然后提交数据时对比这三个的值是否一致，因为 B 网站没有经过 A 网站的前端，获取不到前两个值，所以无法通过验证。

③referer

这个字段表明了用户是在哪个网站发起的请求，即来源。
后台可以设置只通过来自本网站的请求。

总结

问：对 web 安全有所了解吗或对 XSS、CSRF 有所了解吗

①和前端安全相关的主要有 XSS（跨站脚本攻击）攻击及 CSRF（跨站请求伪造）
②XSS 的攻击方式主要分为反射型及存储型，（反射型攻击主要是攻击者写了一段代码放在链接中，诱导用户去点击触发。存储型攻击主要是攻击者将攻击代码写到如评论之类的公共平台中，当其他用户刷到这些攻击代码时触发这些代码，影响较大。）
③主要的防御方式有 (1) 浏览器自带的防御机制 (2) 前台或后台对特殊字符进行转义 (3) 对于富文本来说可以设置黑名单或白名单（就是先将字符串转换成 dom 节点，然后黑名单就是将要屏蔽的标签属性列出来，屏蔽这些标签属性，白名单正好相反，将允许的标签属性列出来，屏蔽其他标签和属性） (4) CSP 内容安全策略（用于指定哪些内容可以执行）

④CSRF 攻击的主要原理是用户登录网站 A，网站 A 验证用户身份，生成用户信息，然后登录攻击者的网站 B，然后 B 网站向 A 网站发起请求但是这个请求携带了 A 网站的身份，所以就会在用户不知情的情况下进行一些损害用户利益的操作

⑤主要的防御方式有 (1) 验证码（后台生成验证码，第三方网站由于没有访问目标网站前端，获取不到验证码，无法通过校验）(2) token （后台生成随机字符串，放在 cookie 和表单中，如果是 ajax 请求可以将 token 放在 meta 中，然后攻击者发起请求时也获取不到这些值，无法通过校验） (3) 可以通过 referer （即限制第三方请求的来源网站）