一、csrf和xss的网络攻击及防范
什么是CSRF(跨站请求伪造)
当用户访问A(信任网站)网站并登录成功时,在用户处产生A的Cookie。这时候用户访问了B(危险网站)网站,当B要求访问第三方站点(A)的时,浏览器会带着用户最开始登录A的时候产生的Cookie访问A,而A网站并不能分辨请求是由用户发出的还是由B发出的,这时候B网站就能模拟用户操作,例如转账等操作。
如何防范CSRF:
1 .使用token:可以在 HTTP 请求中以参数的形式加入一个随机产生的 token,并在服务器端建立一个拦截器来验证这个 token,如果请求中没有 token 或者 token 内容不正确,则认为可能是 CSRF 攻击而拒绝该请求。
- token和cookie的区别,基于token的身份验证就是服务端需要验证 Token是自己生成的,而非伪造的,比如说服务端用 HMAC-SHA256 加密算法,再加上一个只有服务端才知道的密钥, 对数据做一个签名, 把这个签名和数据一起作为 Token 发给客户端, 客户端收到 Token 以后可以把它存储起来,比如存储在 Cookie 里或者 Local Storage 中,由于密钥除了服务端任何其他用户都不知道, 就无法伪造令牌(Token)。cookie是保存在本地终端的数据。cookie由服务器生成,发送给浏览器,浏览器把cookie以kv形式保存到某个目录下的文本文件内,下一次请求同一网站时会把该cookie发送给服务器。总的来说就是token是带有加密的身份信息,相比cookie更加安全
2 .检查http头部的refer:根据 HTTP 协议,在 HTTP 头中有一个字段叫 refer,它记录了该 HTTP 请求的来源地址。例如我们要在网上银行执行转账,那么我们发出去的请求的http中的refer通常是通常是以 bank.example 域名开头的地址,既该银行的页面上的url,而黑客执行CSRF攻击的时候http中的refer是黑客自己网站的url。如果 Referer 是其他网站的话,则有可能是黑客的 CSRF 攻击,拒绝该请求。
3.使用验证码: 在表单中增加一个随机的数字或字母验证码,通过强制用户和应用进行交互,来有效地遏制CSRF攻击
什么是XSS攻击(跨站脚本攻击)
XSS跨站脚本攻击:黑客想尽一切方法 将一段脚本内容放到目标网站的目标浏览器上解释执行,去获取cookie,或者其他用户身份信息。
-
反射型: 反射型 XSS 一般是攻击者通过特定手法(如电子邮件),诱使用户去访问一个包含恶意代码的 URL,当受害者点击这些专门设计的链接的时候,恶意代码会直接在受害者主机上的浏览器执行。对于访问者而言是一次性的,具体表现在我们把我们的恶意脚本通过 URL 的方式传递给了服务器,而服务器则只是不加处理的把脚本“反射”回访问者的浏览器而使访问者的浏览器执行相应的脚本。反射型 XSS 的触发有后端的参与,要避免反射性 XSS,必须需要后端的协调,后端解析前端的数据时首先做相关的字串检测和转义处理。此类 XSS 通常出现在网站的搜索栏、用户登录口等地方,常用来窃取客户端 Cookies 或进行钓鱼欺骗。
-
存储型:攻击者事先将恶意代码上传或储存到漏洞服务器中,只要受害者浏览包含此恶意代码的页面就会执行恶意代码。这就意味着只要访问了这个页面的访客,都有可能会执行这段恶意脚本,因此储存型XSS的危害会更大。存储型 XSS 一般出现在网站留言、评论、博客日志等交互处,恶意脚本存储到客户端或者服务端的数据库中。
如何防范XSS攻击:
1 . cookie设置httpOnly属性:HTTPOnly是在Set-Cookie时被标记的。服务器可能会设置多个Cookie(多个key-value对),而HttpOnly可以有选择性地加在任何一个Cookie值上。在某些时候,应用可能需要JavaScript访问某几项Cookie,这种Cookie可以不设置HttpOnly标记;而仅把HttpOnly标记给用于认证的关键Cookie。添加httponly后cookie就不会被JavaScript读取到。
2 . 输入检查: 输入检查的逻辑,必须放在服务器端代码中实现。如果只是在客户端使用JavaScript进行输入检查,是很容易被攻击者绕过的。目前Web开发的普遍做法,是同时在客户端JavaScript中和服务器代码中实现相同的输入检查。客户端JavaScript的输入检查,可以阻挡大部分误操作的正常用户,从而节约服务器资源。在XSS的防御上,输入检查一般是检查用户输入的数据中是否包含一些特殊字符,如<、>、’、“等,如果发现存在特殊字符,者将这些特殊字符过滤或者编码。
3 .输出检查: 一般来说,除了富文本的输出外,在变量输出到HTML页面时,可以使用编码或转义的方式来防御XSS攻击。
二、cookie和session、localstorage和sessionstorage的区别的区别
-
cookie数据存放在客户的浏览器上,session数据放在服务器上。
-
cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。 -
session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
考虑到减轻服务器性能方面,应当使用COOKIE。 -
单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
下面从几个方向区分一下cookie
,localstorage
,sessionstorage
的区别
-
生命周期:
Cookie:可设置失效时间,否则默认为关闭浏览器后失效
Localstorage:除非被手动清除,否则永久保存
Sessionstorage:仅在当前网页会话下有效,关闭页面或浏览器后就会被清除 -
存放数据:
Cookie:4k左右
Localstorage和sessionstorage:可以保存5M的信息 -
http请求:
Cookie:每次都会携带在http头中,如果使用cookie保存过多数据会带来性能问题
其他两个:仅在客户端即浏览器中保存,不参与和服务器的通信 -
易用性:
Cookie:需要程序员自己封装,原生的cookie接口不友好
其他两个:即可采用原生接口,亦可再次封装 -
应用场景:
从安全性来说,因为每次http请求都会携带cookie信息,这样子浪费了带宽,所以cookie应该尽可能的少用,此外cookie还需要指定作用域,不可以跨域调用,限制很多,但是用户识别用户登陆来说,cookie还是比storage好用,其他情况下可以用storage,localstorage可以用来在页面传递参数,sessionstorage可以用来保存一些临时的数据,防止用户刷新页面后丢失了一些参数
三、web性能优化
1 . 降低请求量:合并资源,减少HTTP 请求数,minify / gzip
压缩,webP
,lazyLoad
。
minify/gzip
: 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service非常像,不过Minify可以合并任何你想要合并的JavaScript和CSS文件。webP
: 是 Google 的一种可以同时提供有损压缩(像 JPEG 一样)和透明度(像 PNG 一样)的图片文件格式,不过与 JPEG 或 PNG 相比,这种格式可以提供更好的压缩。lazyLoad
: 当网页页面滚动到相应的地方,对应位置的内容才进行加载显示,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担。
2 . 加快请求速度:预解析*DNS,减少域名数,并行加载,CDN 分发。(*DNS解析跳到末尾)
DNS Prefetch(DNS预获取)
:DNS预解析是浏览器试图在用户访问链接之前解析域名,这是计算机的正常DNS解析机制。域名解析后,如果用户确实访问该域名,那么DNS解析时间将不会有延迟。CDN 分发
:CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘",使用户可以就近取得所需的内容,解决Internet网络拥塞状况,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因,解决用户访问网站的响应速度慢的根本原因。
3 . 缓存:HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存localStorage。
HTTP 协议缓存请求
: 如果服务器页面的内容没有更新,浏览器将把本地缓存的内容给用户,不用请求服务器。如果客户端缓存内容过期了,浏览器发送了一个请求给服务器,这时,服务器还可以进一步判断请求的页面内容是否有更改,如果没有更改,也不用进行磁盘操作去读取页面内容,而是直接返回一个特殊的状态码给客户端,客户端收到这个状态码后就直接取本地的缓存展现给用户浏览。离线缓存 manifest
: 简单来说manifest能让你的应用在无网的情况下也能访问。
它有三大优势:
1、离线浏览,无网情况下也能正常访问;
2、更快的加载速度,缓存在本地访问速度自然更快;
3、减轻服务请求压力,文件缓存后不需要再次请求,只需要请求需要更新的文件。
4 . 渲染:JS/CSS优化,加载顺序,服务端渲染,pipeline。
服务端渲染
:简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记(CSS)"混合"为客户端上完全交互的应用程序pipeline
: 简单来说,就是一套运行于Jenkins上的工作流框架,将原本独立运行于单个或者多个节点的任务连接起来,实现单个任务难以完成的复杂发布流程
四、HTML5、CCS3新增的特性
html5:
1.标签增删
- 8个语义元素 header section footer aside nav main article figure
- 内容元素mark高亮 progress进度
- 新的表单控件calander date time email url search
- 新的input类型 color date datetime datetime-local email
- 移除过时标签big font frame frameset
2)canvas绘图,支持内联SVG。支持MathML
3)多媒体audio video source embed track
4)本地离线存储,把需要离线存储在本地的文件列在一个manifest配置文件
5)web存储。localStorage、SessionStorage
css3:
CSS3边框如border-radius,box-shadow等;CSS3背景如background-size,background-origin等;CSS3 2D,3D转换如transform等;CSS3动画如animation等。
五、HTTP2.0 的特性
http2.0的特性如下:
-
内容安全,应为http2.0是基于https的,天然具有安全特性,通过http2.0的特性可以避免单纯使用https的性能下降
-
二进制格式,http1.X的解析是基于文本的,http2.0将所有的传输信息分割为更小的消息和帧,并对他们采用二进制格式编码,基于二进制可以让协议有更多的扩展性,比如引入了帧来传输数据和指令
-
多路复用,这个功能相当于是长连接的增强,每个request请求可以随机的混杂在一起,接收方可以根据request的id将request再归属到各自不同的服务端请求里面,另外多路复用中也支持了流的优先级,允许客户端告诉服务器那些内容是更优先级的资源,可以优先传输,
-
提升访问速度(可以对于,请求资源所需时间更少,访问速度更快,相比http1.0)
*DNS解析过程
- 浏览器先检查自身缓存中有没有被解析过的这个域名对应的ip地址,如果有,解析结束。同时域名被缓存的时间也可通过TTL属性来设置。
- 如果浏览器缓存中没有(专业点叫还没命中),浏览器会检查操作系统缓存中有没有对应的已解析过的结果。而操作系统也有一个域名解析的过程。在windows中可通过c盘里一个叫hosts的文件来设置,如果你在这里指定了一个域名对应的ip地址,那浏览器会首先使用这个ip地址。
- 如果至此还没有命中域名,才会真正的请求本地域名服务器(LDNS)来解析这个域名,这台服务器一般在你的城市的某个角落,距离你不会很远,并且这台服务器的性能都很好,一般都会缓存域名解析结果,大约80%的域名解析到这里就完成了。
- 如果LDNS仍然没有命中,就直接跳到Root Server 域名服务器请求解析
- 根域名服务器返回给LDNS一个所查询域的主域名服务器(gTLD Server,国际顶尖域名服务器,如.com .cn .org等)地址
- 此时LDNS再发送请求给上一步返回的gTLD
- 接受请求的gTLD查找并返回这个域名对应的Name Server的地址,这个Name Server就是网站注册的域名服务器
- Name Server根据映射关系表找到目标ip,返回给LDNS
- LDNS缓存这个域名和对应的ip
- LDNS把解析的结果返回给用户,用户根据TTL值缓存到本地系统缓存中,域名解析过程至此结束
参考
- https://blog.csdn.net/weixin_43813718/article/details/105587291
- https://blog.csdn.net/qq_38218238/article/details/82425974