让前端开辟猛虎添翼,读书笔记

作者: 前端知识  发布:2019-11-03

了解一些额外知识,让前端开发锦上添花

2018/06/27 · 基础技术 · 前端

原文出处: 守候   

劝了别人无数次,让别人喝了鸡汤,帮别人填坑,自己却掉了坑

本文地址:http://www.jianshu.com/p/486b3a10efb2

1.前言

在前端学习里面,很多人都是注重学习代码(html,css,js)。或者是一些框架,库(jquery,vue,react),或者是各种工具(webpack,gulp)。在以往的文章里面,或者自己和别人交谈,都有建议过别人多练,不要闷头就写代码,多深入了解当中的原理,学习其中的思想。但是除了代码方面的知识之外,还有哪一些是作为一个前端,应该扩展学习的呢?下面简单罗列和整理了一下最近学习的资源。如果大家还有其它的推荐,欢迎在评论区留言。

下面的知识,可能不需要太过于深入,详细的掌握,但是必须要有所了解,这样在开发上遇到问题,解决问题的时候即使不是如虎添翼,也是锦上添花。

第三章 前端黑客之XSS

2.http,https

前端而言,不可避免的要和接口打交道。除了和后台对接口,请求数据,渲染页面,之外。对http的请求,也是要有一个了解,比如http协议,请求方式,请求过程,结果状态码等。了解这些,对开发的时候可能遇到的问题,就可以大概知道问题是怎么产生的,更快的知道怎么解决,避免。

XSS类型

XSS有三类:反射性XSS(也叫非持久型XSS)、存储型XSS(也叫持久型XSS)和 DOM XSS

  • 反射性XSS

发出请求时,XSS代码出现在URL中,作为输入提交到服务端,服务端解析后响应,然后XSS出现在响应,然后浏览器解析执行。

// 构造url http://foo.com/reflect.php?x=<script>alert(1)</script>
// 还可以构造base64加密方式
x=data:text/html;base64,PHNjcmlwdD5hbGVydCgnRVZBTCEhIScpPC9zY3JpcHQ 
  • 存储型XSS

提交数据会存储在服务端,比较隐蔽

2-1.请求

首先一个请求,包含有请求头,请求行,请求正文。具体是怎样境,看下面的代码

axios({ method: 'post', url: '/user/12345', headers:{ 'Content-Type':'application/x-www-form-urlencoded' }, data: { firstName: 'Fred', lastName: 'Flintstone' } });

1
2
3
4
5
6
7
8
9
10
11
axios({
  method: 'post',
  url: '/user/12345',
  headers:{
    'Content-Type':'application/x-www-form-urlencoded'  
  },
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

如上所述

methodurl就是这个请求的请求行(这里是请求行部分信息,其实请求行还包括http协议的版本等信息)。headers中的属性就是请求头,里面的属性,全部包含在请求的header里面,是服务端获取客户端版本,缓存等信息的一个途径。data对应的就是请求正文,也就是平常所说的参数。

常见输入点

  • document.URL
  • document.URLRnencoded
  • document.location(及location其他属性)
  • document.referrer
  • window.location
  • window.name
  • xhr(请求相关数据)
  • document.cookie
  • 表单值

2-2.响应

在请求发出去,并且响应已经回来的时候,就时候信息可分为响应行,响应头,响应正文。

响应行

引用看云的一个请求作为实例,如下代码就是这个请求的响应行,返回请求的http协议及版本,状态码,请求状态等描述信息。

Request URL: Request Method:GET Status Code:200 OK Remote Address:117.23.61.221:443

1
2
3
4
Request URL:https://www.kancloud.cn/yunye/axios/comment?article_id=234845&page=1
Request Method:GET
Status Code:200 OK
Remote Address:117.23.61.221:443

响应头

响应头和请求头格式一致,返回版本,缓存等信息。

响应正文

平常接触最多的就是响应正文,也就是日常开发需要用到的数据。开发者拿到这些数据之后,再进行相应的处理。

常见输出点

直接输出HTML内容

  • document.write()
  • document.writeln()
  • document.body.innerHtml=...

修改DOMshu树及事件

  • document.forms[0].action= ...
  • document.attachEvent()
  • document.create()
  • document.execCommand()
  • document.body
  • window.attachEvent()

替换document URL

  • document.location=...
  • document.location.hostname=...
  • document.location.replace
  • document.location.assign()
  • document.URL=...
  • window.navigator...

打开或修改窗口

  • document.open
  • window.open
  • window.location.href=...

直接执行脚本

  • eval
  • setInterval
  • setTimeout

2-3.关于https

关于 https 。下面可以先了解下 http 的缺点,https就是http基础上做的加密处理。

1.通信使用明文不加密,内容可能被窃听
2.不验证通信方身份,可能遭到伪装
3.无法验证报文完整性,可能被篡改

第四章 前端黑客之CSRF

全称 Cross Site Request Forgery(跨站请求伪造)

2-4.相关资料

关于http与https就简单说到这里,详细的推荐看下下面的资料。

HTTP教程

HTTP协议【详解】——经典面试题

一个故事讲完https

伪造请求

3.响应状态码

上面提到响应状态码,在这里也简单写下。在前端方面,请求接口可能会接触到各种情况,常见的有下面几个,应该怎么解决,就是具体问题,具体分析。

状态码 意义
200 请求成功
400 参数错误
403 拒绝或者禁止访问(无权限访问)
404 地址不存在
405 客户端请求中的方法被禁止(一般是请求方式错误)
500 服务器报错
502 请求超时,无效网关
503 服务器超载或者维护,无法响应

伪造GET

正常网站 a.com,恶意网站 b.com,在b站通过创建imgscriptlink等标签,诱惑用户访问b站,就跨站发送GET请求

注意

  • 如果用户在a.com中是登陆的,在跨站请求时也会带上cookie等相关信息,请求头只有 referer 不同。
  • 本地Cookie与内存Cookie在这种CSRF攻击中对于IE浏览器有些不同,其不允许a网站的本地Cookie在跨域中带上,除非在HTTP响应中设置P3P(Platform for Privacy Preferences)。非IE没有这个限制

3-1.参考资料

详细的状态码请参考下面内容。

HTTP状态码

伪造POST

通过在恶意网站创建 form 添加 form的method为post,可以做到伪造POST请求,其他请求也类似

4.前端方面的安全性

攻击类型

按攻击方式分为:HTML CSRF攻击、JSON HiJacking攻击和Falsh CSRF攻击

4-1.XSS

XSS(Cross Site Scripting)是跨站脚本攻击,为了区分CSS,所以缩写为XSS。XSS攻击方式是往Web页面插入恶意的 JavaScript 代码,当用户浏览网页的时候,插入的代码就是被执行,从而达到攻击的目的。

其中应用比较多的一个就是,在网页一些公用的交互区域。比如搜索的文本框,除了可以输入一些关键字,还可以输入一些 JavaScript 代码,一旦代码点击搜索,代码就会被执行,达到攻击的目的。如下例子

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

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

在文本框中输入以上代码,然后点击提交,就会把用户的cookie弹出来。

XSS防范

1.将重要的cookies标记为HTTP ONLY,让JavaScript代码无法调用,只有http能调用。或者将重要的信息保存在session里面。

2.只允许用户输入我们期望的数据。如消费金额框只能输入数字和小数点。

3.对数据进行加密处理。

4.过滤或者移除特殊的HTML标签,过滤JavaScript代码等。

HTML CSRF攻击

  • HTML

通过设置 src/href 等地址都可以发起GET请求

<link href=''>
<img src=''>
<img lowsrc=''>
<img dynsrc=''>
<meta http-equiv='refresh' content="0; url=''">
<iframe src=''>
<frame src=''>
<script src=''></script>
<bgsound src=''>
<embed src=''>
<video src=''>
<audio src=''>
<a src=''></a>
<table background=''></table>
// ...
  • CSS
@import ''
background:url('')

对于POST请求只能通过 form 形式

4-2.CSRF

CSRF(Cross-site request forgery)是跨站请求伪造。XSS利用站点内的信任用户,与XSS不同,CSRF是通过伪装来自受信任用户,在受信任的网站进行请求,盗取信息。其实就是攻击者盗用了受害者的身份,以受害者的名义向网站发送恶意请求。

CSRF攻击的思想

引用CSRF攻击原理及防御的一张图进行解释。图片 1

 

图片来自:CSRF攻击原理及防御

根据步骤,看了图,相信不难理解,就是在一个网站里面保留了cookie,然后访问了一些危险网站,然后被危险网站盗用了用户信息。

CSRF的防御

1.在表单里增加Hash值,以认证这确实是用户发送的请求,然后在服务器端进行Hash值验证。

2.验证码:每次的用户提交都需要用户在表单中填写一个图片上的随机字符串。

3.修改,增加重要信息,比如密码,个人信息的操作,尽量使用post。避免使用get把信息暴露在url上面。

JSON HiJacking

对AJAX响应中最常见的JSON数据类型进行劫持攻击。尤其是JSONP形式url中的callback

4-3.反爬虫

和之前的防护XSS和CSRF攻击目的不一样,反爬虫是为了防止网站重要的数据被别人拿走,比如电商的交易额,电影网站的票房统计,音乐网站的评论等。

反击爬虫,前端工程师的脑洞可以有多大?

Falsh CSRF攻击

本文由金沙澳门官网发布于前端知识,转载请注明出处:让前端开辟猛虎添翼,读书笔记

关键词: 金沙澳门官网

上一篇:插件开发实录
下一篇:没有了