浅谈前端安全问题及策略

一,XSS 

XSS攻击全称跨站脚本攻击,XSS是一种在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中。

常见的 XSS 攻击有三种:

DOM-based 型、反射型、存储型。

其中:

反射型、DOM-based 型可以归类为非持久型 XSS 攻击。

存储型归类为持久型 XSS 攻击。

①DOM-based型攻击:

利用dom本身的缺陷,进行攻击

栗子:就是页面中的某个图片,获取图片的路径:

<img src="{{img.src}}">
//返回的 img.src=/xxxx"  onerror=xxx"
//这样放到img的src中就成了这样<img src="/xxx"  onerror=xxx">
//src肯定会加载失败,然后执行了onerror中注入的恶意代码,达到攻击效果

②存储型

前端页面中表单提交的数据存在恶意代码被保存到目标网站的服务器中,这种攻击具有较强的稳定性和持久性。

③反射型

恶意代码并没有保存在目标网站,通过引诱用户点击一个链接到目标网站的恶意链接来实施攻击的。

栗子:

有这样一个url:http:xxxxx.con?name=xxx(xxx是恶意代码)

//传到后端的参数name  被后端接收之后,响应的页面包含name这个变量的,会把这个name的内容注入到页面上面,达到攻击的效果

X-XSS-Protection头 (现代浏览器的防范措施)

X-XSS-Protection:0                                           // 0: 表示关闭浏览器的XSS防护机制

X-XSS-Protection:1            // 1:删除检测到的恶意代码, 如果响应报文中没有看到X-XSS-Protection 字段,那么浏览器就认为X-XSS-Protection配置为1,这是浏览器的默认设置

X-XSS-Protection:1;mode=block                       // mode=block :  给出警告信息,阻止页面的渲染执行

X-XSS-Protection:1;report=<reporting-uri>       //  report=<reporting-uri> : 进行上报

xss防御手段:

①过滤

对用户的输入进行过滤,移除用户输入的Style节点、Script节点、Iframe节点

②编码

HTML Entity 编码

③将重要的cookie 设置成http only  这样就不能通过js获取到该cookie了

 二,CSRF(跨站请求伪造)

从上图可以看出,要完成一次CSRF攻击,被攻击的网站必须满足两个必要的条件:

①登录受信任网站A,并在本地生成Cookie。(如果用户没有登录网站A,那么网站C在诱导的时候,请求网站A的api接口时,会提示你登录)

②在不登出A的情况下,访问危险网站C(其实是利用了网站A的漏洞)。

温馨提示一下,cookie保证了用户可以处于登录状态,但网站C其实拿不到 cookie。

CSRF如何防御:

①使用token:

服务器发送给客户端一个token,客户端提交表单时带上该token,服务器验证token是否有效,有效就允许访问,否则拒绝访问。

②Referer 验证

Referer 指的是页面请求来源,意思是,只接受本站的请求,服务器才做响应;如果不是,就拦截。

三,SQL注入攻击

在编写SQL语句时,如果直接将用户传入的数据作为参数使用字符串拼接的方式插入到SQL查询中,那么攻击者可以通过注入其他语句来执行攻击操作,这些攻击包括可以通过SQL语句做的任何事:获取敏感数据、修改数据、删除数据库表等

防范策略:

①验证输入类型

比如某个视图函数接收整形id来查询,那么就在URL规则中限制URL变量为整型。

②参数化查询

③转义特殊字符

比如引号、分号和横线等。使用参数化查询时,各种接口库会为我们做转义工作。

四,点击劫持(ClickJacking)

点击劫持就是利用视觉欺骗用户将一个危险网站设置透明,然后在其上方设置一个按钮,当你点击这个按钮的时候,就触发底部透明的危险网站的事件,从而欺骗用户点击一个按钮或者输入一个值。

或者是将一个网站通过iframe进来,通过透明度设置不可见,诱导用户点击可见的一个按钮触发事件达到自己的一个目的等

防范策略:

①csp  (Content-Security-Policy)

②设置http响应头 x-Frame-Options 

X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在 <frame>, <iframe>或者 <object> 中展现的标记。网站可以使用此功能,来确保自己网站的内容没有被嵌到别人的网站中去。

X-Frame-Options 有三个值:

deny  :表示该页面不允许在 frame 中展示,即便是在相同域名的页面中嵌套也不允许。

sameorigin  :表示该页面可以在相同域名页面的 frame 中展示。

ALLOW-FROM uri :表示该页面可以在指定来源的 frame 中展示。

换一句话说,如果设置为 deny,不光在别人的网站 frame 嵌入时会无法加载,在同域名页面中同样会无法加载。另一方面,如果设置为 sameorigin  ,那么页面就可以在同域名页面的 frame 中嵌套。
③还可以使用window.self和window.top来判断

window.self返回一个指向当前window的一个引用

window.top 返回窗口体系中最顶层窗口的引用

对于非同源的域名,iframe子页面无法通过parent.location或者top.location拿到具体的页面地址,但是可以写入top.location,也就是可以控制父页面的跳转,所以当我们发现页面被嵌入在iframe中时,可以重定向父级页面:

if (window.self != window.top) {
    //正常页面
    top.location.href = self.location.href
}

总体来说算是对安全有个了解了。

原文地址:https://www.cnblogs.com/zhanghaiyu-Jade/p/11148530.html

时间: 2024-11-07 11:00:12

浅谈前端安全问题及策略的相关文章

浅谈前端性能优化(移动端)

上一篇讲了PC端的部分:前端性能优化(PC端),这次继续说移动端的.相对于PC端的,移动web浏览器上有一些明显的特点:设备的屏幕小.新特性兼容性较好.支持一些比较新的HTML5和CSS3.需要与Native应用交互等.但移动端可用的CPU资源和网络资源极为有限,因此要做好移动端web上的优化往往需要考虑做更多的事情.首先在移动web的前端页面渲染中,PC的优化规则同样适用,此外针对浏览器也要做一些更细节的优化达到更好的效果.需要注意的是,并不是移动端的优化在PC端不适用,而是由于兼容性的原因,

浅谈mysql innodb缓存策略

浅谈mysql innodb缓存策略: The InnoDB Buffer Pool Innodb 持有一个存储区域叫做buffer pool是为了在内存中缓存数据和索引,知道innodb bufferpool怎么工作,和利用它读取频繁访问的数据,是mysql优化重要的方面. 理想状况下,把bufferpool的大小调整到足够大,留下足够的内存空间给其他该服务器上的进程(使其无缺页即可).bufferpool越大,innodb 月表现为内存型数据库,从硬盘上一次读取数据,之后并成了从内存中读取数

浅谈加速因子在策略中的意义

他站链接:浅谈加速因子在策略中的意义 NO:01没有完美的交易系统,但是却有完美的交易哲学.交易哲学.交易策略和资金管理三者缺一不可,才能构成正期望的交易系统.投机依赖价格的移动获得盈利(低买高卖或高买更高卖).在上升或下降趋势中,价格虽然在整体上朝着一个方向移动,但中间也会有短暂的反方向移动.而在横盘过程中,价格的移动方向则显得相对"随机"一些. NO:02关于价格的移动,可以类比物理学中的运动.其中包括:位移距离.时间.速度等.价格的位移相对于时间的比率就是价格的速度.除了速度之外

浅谈前端移动端页面开发(布局篇)

前言的一些碎碎念:最近一直在写移动端的页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什么,那是怎么样要那么写,就跟着别人的文档去了.本以为自己对移动端的那一丢丢理解,结果很多东西都特么有问题,所以,今天停下了手中的一些东西,来谈下移动端的布局方案吧 内容有些长,这也是我第一次写博客,不足之处还请严厉指出 一. viewport 什么是viewport 简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的

前端优化带来的思考,浅谈前端工程化

重复优化的思考 这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几个字就能说清楚: 传输层面:减少请求数,降低请求量执行层面:减少重绘&回流 传输层面的从来都是优化的核心点,而这个层面的优化要对浏览器有一个基本的认识,比如: ① 网页自上而下的解析渲染,边解析边渲染,页面内CSS文件会阻塞渲染,异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源,新开线

前端优化带来的思考,浅谈前端工程化【转】

重复优化的思考 这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几个字就能说清楚: 传输层面:减少请求数,降低请求量执行层面:减少重绘&回流 传输层面的从来都是优化的核心点,而这个层面的优化要对浏览器有一个基本的认识,比如: ① 网页自上而下的解析渲染,边解析边渲染,页面内CSS文件会阻塞渲染,异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源,新开线

2018 浅谈前端面试那些事

虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug,和一些定位写法css js放置位置和原因什么是渐进式渲染html模板语言meta viewport原理 2.CSS 盒模型,box-sizingCSS3新特性,伪类,伪元素,锚伪类CSS实现隐藏页面的方式如何实现水平居中和垂直居中.说说

浅谈前端自动化构建

前言 现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪.前端自动化构建在整个项目开发中越来越重要. 我们首先来回想一下之前我们是如何来开始做一个项目的. ① 首先要确定这个项目要使用什么样的技术来实现,然后开始规划我们的项目目录,接着就要往项目增加第三方库依赖,比如: 拷贝 CSS库(Yui Reset |

浅谈前端开发行业背景

自从第一个网站在上个世纪 90 年代初诞生以来,早期的网页完全由文本构成,除了一些小图片和毫无布局可言的标题与段落.然而,时代在进步,接下来出现了表格布局,然后是 Flash,最后是基于 CSS 的网页设计.无可否认,前端页面重构技术也经历着这样的一个过程:table布局页面→DIV+CSS→HTML5+CSS3,seo面对众多的浏览器与平台,Web前端不再是以前那样简单的重复性工作.下面让我们对Web前端开发行业的发展有一个简短的认识. 回首Web前端开发的过去,1991 年 8 月,Tim