第2章 第3节 HTTP/HTML/浏览器(三)

推荐给朋友

● csrf和xss的网络攻击及防范

参考回答:

CSRF:跨站请求伪造,可以理解为攻击者盗用了用户的身份,以用户的名义发送了恶意请求,比如用户登录了一个网站后,立刻在另一个tab页面访问量攻击者用来制造攻击的网站,这个网站要求访问刚刚登陆的网站,并发送了一个恶意请求,这时候CSRF就产生了,比如这个制造攻击的网站使用一张图片,但是这种图片的链接却是可以修改数据库的,这时候攻击者就可以以用户的名义操作这个数据库,防御方式的话:使用验证码,检查https头部的refer,使用token

XSS:跨站脚本攻击,是说攻击者通过注入恶意的脚本,在用户浏览网页的时候进行攻击,比如获取cookie,或者其他用户身份信息,可以分为存储型和反射型,存储型是攻击者输入一些数据并且存储到了数据库中,其他浏览者看到的时候进行攻击,反射型的话不存储在数据库中,往往表现为将攻击代码放在url地址的请求参数中,防御的话为cookie设置httpOnly属性,对用户的输入进行检查,进行特殊字符过滤

● 怎么看网站的性能如何

参考回答:

检测页面加载时间一般有两种方式,一种是被动去测:就是在被检测的页面置入脚本或探针,当用户访问网页时,探针自动采集数据并传回数据库进行分析,另一种主动监测的方式,即主动的搭建分布式受控环境,模拟用户发起页面访问请求,主动采集性能数据并分析,在检测的精准度上,专业的第三方工具效果更佳,比如说性能极客

● 介绍HTTP协议(特征)

参考回答:

HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)HTTP是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的规范化工作正在进行之中,而且HTTP-NG(Next Generation of HTTP)的建议已经提出。HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后,向客户端发送响应信息。

● 输入URL到页面加载显示完成发生了什么?

参考回答:

DNS解析

TCP连接

发送HTTP请求

服务器处理请求并返回HTTP报文

浏览器解析渲染页面

连接结束

● 说一下对Cookie和Session的认知,Cookie有哪些限制?

参考回答:

1.    cookie数据存放在客户的浏览器上,session数据放在服务器上。

2.    cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。

3.    session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
考虑到减轻服务器性能方面,应当使用COOKIE。

4.    单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

● 描述一下XSS和CRSF攻击?防御方法?

参考回答:

XSS, 即为(Cross Site Scripting), 中文名为跨站脚本, 是发生在目标用户的浏览器层面上的,当渲染DOM树的过程成发生了不在预期内执行的JS代码时,就发生了XSS攻击。大多数XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码。实际上是在目标网站的作用域下执行了这段js代码。

CSRF(Cross Site Request Forgery,跨站请求伪造),字面理解意思就是在别的站点伪造了一个请求。专业术语来说就是在受害者访问一个网站时,其 Cookie 还没有过期的情况下,攻击者伪造一个链接地址发送受害者并欺骗让其点击,从而形成 CSRF 攻击。

XSS防御的总体思路是:对输入(和URL参数)进行过滤,对输出进行编码。也就是对提交的所有内容进行过滤,对url中的参数进行过滤,过滤掉会导致脚本执行的相关内容;然后对动态输出到页面的内容进行html编码,使脚本无法在浏览器中执行。虽然对输入过滤可以被绕过,但是也还是会拦截很大一部分的XSS攻击。

防御CSRF 攻击主要有三种策略:验证 HTTP Referer 字段;在请求地址中添加 token 并验证;在 HTTP 头中自定义属性并验证。

● 知道304吗,什么时候用304?

参考回答:

304:如果客户端发送了一个带条件的GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个304状态码。

● 具体有哪些请求头是跟缓存相关的

参考回答:

缓存分为两种:强缓存和协商缓存,根据响应的header内容来决定。

强缓存相关字段有expires,cache-control。如果cache-control与expires同时存在的话,cache-control的优先级高于expires。

协商缓存相关字段有Last-Modified/If-Modified-Since,Etag/If-None-Match

● cookie和session的区别

参考回答:

1.    cookie数据存放在客户的浏览器上,session数据放在服务器上。

2.    cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。

3.    session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
考虑到减轻服务器性能方面,应当使用COOKIE。

4.    单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

● cookie有哪些字段可以设置

参考回答:

name字段为一个cookie的名称。

value字段为一个cookie的值。

domain字段为可以访问此cookie的域名。

非顶级域名,如二级域名或者三级域名,设置的cookie的domain只能为顶级域名或者二级域名或者三级域名本身,不能设置其他二级域名的cookie,否则cookie无法生成。

顶级域名只能设置domain为顶级域名,不能设置为二级域名或者三级域名,否则cookie无法生成。

二级域名能读取设置了domain为顶级域名或者自身的cookie,不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享,需要设置domain为顶级域名,这样就可以在所有二级域名里面或者到这个cookie的值了。
顶级域名只能获取到domain设置为顶级域名的cookie,其他domain设置为二级域名的无法获取。

path字段为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test,那么只有/test路径下的页面可以读取此cookie。

expires/Max-Age 字段为此cookie超时时间。若设置其值为一个时间,那么当到达此时间后,此cookie失效。不设置的话默认值是Session,意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页,而是整个浏览器) 后,此cookie失效。

Size字段 此cookie大小。

http字段  cookie的httponly属性。若此属性为true,则只有在http请求头中会带有此cookie的信息,而不能通过document.cookie来访问此cookie。

secure 字段 设置是否只能通过https来传递此条cookie

● cookie有哪些编码方式?

参考回答:

encodeURI()

● 前端优化策略


● 既然你看过图解http,那你回答下200和304的区别

参考回答:

200    OK    请求成功。一般用于GET与POST请求

304    Not Modified    未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

● 除了cookie,还有什么存储方式。说说cookie和localStorage的区别

参考回答:

还有localStorage,sessionStorage,indexdDB等

cookie和localStorage的区别:

cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递

cookie数据还有路径(path)的概念,可以限制。cookie只属于某个路径下

存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如回话标识。

localStorage虽然也有存储大小的限制,但是比cookie大得多,可以达到5M或更大

localStorage始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口和浏览器关闭。

● 浏览器输入网址到页面渲染全过程

参考回答:

DNS解析

TCP连接

发送HTTP请求

服务器处理请求并返回HTTP报文

浏览器解析渲染页面

连接结束

● HTML5和CSS3用的多吗?你了解它们的新属性吗?有在项目中用过吗?

参考回答:

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等。 参考https://www.cnblogs.com/xkweb/p/5862612.html

● HTTP状态码

参考回答:

200    OK    请求成功。一般用于GET与POST请求

201    Created    已创建。成功请求并创建了新的资源

202    Accepted    已接受。已经接受请求,但未处理完成

203    Non-Authoritative Information    非授权信息。请求成功。但返回的meta信息不在原始的服务器,而是一个副本

204    No Content    无内容。服务器成功处理,但未返回内容。在未更新网页的情况下,可确保浏览器继续显示当前文档

205    Reset Content    重置内容。服务器处理成功,用户终端(例如:浏览器)应重置文档视图。可通过此返回码清除浏览器的表单域

206    Partial Content    部分内容。服务器成功处理了部分GET请求

300    Multiple Choices    多种选择。请求的资源可包括多个位置,相应可返回一个资源特征与地址的列表用于用户终端(例如:浏览器)选择

301    Moved Permanently    永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302    Found    临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

303    See Other    查看其它地址。与301类似。使用GET和POST请求查看

304    Not Modified    未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

305    Use Proxy    使用代理。所请求的资源必须通过代理访问

306    Unused    已经被废弃的HTTP状态码

307    Temporary Redirect    临时重定向。与302类似。使用GET请求重定向

400    Bad Request    客户端请求的语法错误,服务器无法理解

401    Unauthorized    请求要求用户的身份认证

402    Payment Required    保留,将来使用

403    Forbidden    服务器理解请求客户端的请求,但是拒绝执行此请求

404    Not Found    服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面

500    Internal Server Error    服务器内部错误,无法完成请求

501    Not Implemented    服务器不支持请求的功能,无法完成请求

502    Bad Gateway    作为网关或者代理工作的服务器尝试执行请求时,从远程服务器接收到了一个无效的响应

503    Service Unavailable    由于超载或系统维护,服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

504    Gateway Time-out    充当网关或代理的服务器,未及时从远端服务器获取请求

505    HTTP Version not supported    服务器不支持请求的HTTP协议的版本,无法完成处理

● http常见的请求方法

参考回答:

get、post,这两个用的是最多的,还有很多比如patch、delete、put、options等等

● get和post的区别

参考回答:

GET - 从指定的资源请求数据。

POST - 向指定的资源提交要被处理的数据。

GET:不同的浏览器和服务器不同,一般限制在2~8K之间,更加常见的是1k以内。

GET和POST的底层也是TCP/IP,GET/POST都是TCP链接。

GET产生一个TCP数据包;POST产生两个TCP数据包。

对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);

而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。

● 说说302,301,304的状态码

参考回答:

301    Moved Permanently    永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302    Found    临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

304    Not Modified    未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

● web性能优化

参考回答:

降低请求量:合并资源,减少HTTP 请求数,minify / gzip 压缩,webP,lazyLoad。

加快请求速度:预解析DNS,减少域名数,并行加载,CDN 分发。

缓存:HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存localStorage。

渲染:JS/CSS优化,加载顺序,服务端渲染,pipeline。

● 浏览器缓存机制

参考回答:

缓存分为两种:强缓存和协商缓存,根据响应的header内容来决定。

强缓存相关字段有expires,cache-control。如果cache-control与expires同时存在的话,cache-control的优先级高于expires。

协商缓存相关字段有Last-Modified/If-Modified-Since,Etag/If-None-Match

● post和get区别

参考回答:

GET - 从指定的资源请求数据。

POST - 向指定的资源提交要被处理的数据。

GET:不同的浏览器和服务器不同,一般限制在2~8K之间,更加常见的是1k以内。

GET和POST的底层也是TCP/IP,GET/POST都是TCP链接。

GET产生一个TCP数据包;POST产生两个TCP数据包。

对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);

而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。