浏览器前端面试题【自己总结版】

前排提醒，本文所有引用标注在文末，感兴趣的朋友可以查看原帖学习！谢谢各位佬❤

1、浏览器的同源策略是什么？

2、跨域问题的解决？

3、介绍一下xss攻击？危害是？对应的防御策略？

4、CSRF漏洞？

5、浏览器 Referer ？空referer？

6、从输入一个URL到显示页面的步骤？

7、介绍GET、POST、PUT方法？

8、TCP与UDP的区别？

9、HTTP request报文结构是怎样的 ？HTTP response报文结构是怎样的？ 

10、HTTP状态码及其含义？

11、请描述一下cookies、sessionStorage和localStorage的区别？

12、iframe是什么？有哪些缺点？

13、简述一下src和href的区别

---

 1、浏览器的同源策略是什么？跨域问题的解决？

同源策略(Same Origin Policy)会阻止一个域的javascrip脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制。三要素为域名、端口、协议。如果两个网页之间不满足同源策略，则他们不能进行：

(1)不能共享Cookie、LocalStorage、IndexDB 
(2)不能获取DOM
(3)AJAX请求不能发送

img、script、style等变迁都允许跨域引用资源，严格来说这都是不符合同源要求的。只不过这里只是引用这些资源，并不能读取到这些资源的内容。

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

---

 2、跨域问题的解决？

CORS(cross-origin-resource-share)跨域资源共享机制，需要浏览器和服务器同时支持。整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户无感知。

使用场景：用户在使用浏览器的情况下会使用到 CORS，因为控制访问权限的是浏览器而非服务器。因此使用其它客户端的时候无需关心任何跨域问题。

 CORS需要服务器端和浏览器端共同支持

服务器端：CORS头：即(Access-Control-Allow-Origin)如果响应头携带该字样，即允许跨域

 浏览器端：ajax请求为简单请求，

（1) 请求方法是以下三种方法之一：HEAD、GET、POST
（2）HTTP的头信息不超出以下几种字段：Accept、Accept-Language、Content-Language、Last-Event-ID
    Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
    当浏览器发现发起的ajax请求是简单请求时，会在请求头中携带一个字段：Origin.

Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*（代表任意域名）。上图CORS策略配置的允许跨域请求来源是“*”，表示全部域名都允许。
Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true

如何解决跨域问题？

1 · 通过jsonp跨域

var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
    alert(JSON.stringify(res));
} 

2 · 通过document.domain + iframe跨域

此方案仅限于主域相同，子域不同的跨域应用场景

1.父窗口 例如http://www.domain.com/a.html

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script> 

 2.子窗口 例如(http://child.domain.com/b.html)

document.domain = 'domain.com';
// 获取父窗口中变量
alert('get js data from parent ---> ' + window.parent.user); 

3 · nginx代理跨域

4 · nodejs中间件代理跨域

5 · 后端在头部信息里面设置安全域名 

---

3、介绍一下xss攻击？危害是？对应的防御策略？

 跨站脚本攻击(Cross-site scripting，XSS)，是一种常见的网络安全漏洞，攻击者通过在受害网站注入恶意脚本代码，使得其他用户访问该网站时执行这些恶意代码，从而达到攻击的目的。

危害：

· 获取用户信息：(如浏览器信息、ip地址、cookie信息等）
· 钓鱼：(利用xss漏洞构造出一个登录框，骗取用户账户密码，提示登录过期，模拟一个网站的登录框，将用户名、密码发送到攻击者服务器）
· 注入木马或广告链接：(有些在主站注入非法网站的链接，对公司的声誉有一定的影响)·
· 后台增删改网站数据等操作：(配合CSRF漏洞，骗取用户点击，利用s模拟浏览器发包）
· xss蠕虫(微博蠕虫：只要看过某人的微博就是自动关注某人；贴吧蠕虫：看过某个帖子就是自动回复这个帖子) 

主要有以下几种类型：

1. 反射型XSS：攻击者构造一个包含恶意脚本的链接，诱骗用户点击后触发攻击。
2. 存储型XSS：攻击者将恶意脚本代码上传到目标网站数据库中，当其他用户访问该网站后执行恶意代码。
3. DOM型XSS：攻击者通过DOM操作动态插入恶意脚本代码，然后用户触发恶意代码执行。

防御策略： 

· 对用户输入做好过滤和转义处理，避免被直接执行作为脚本代码。开发者可以使用一些现成的库和框架来实现数据过滤和转义，例如OWASP ESAPI、JQuery等。
· 在请求中包含HTTPOnly标记的cookie，避免JavaScript脚本获取Cookie值。
· 配置CSP（Content-Security-Policy）头部，限制页面资源的加载和执行，减少XSS攻击的可能性。
· 使用低特权账号和权限分离策略，避免敏感操作的恶意执行和篡改页面内容。
· 及时更新补丁和升级软件版本，以消除可能存在的安全漏洞。
· 对于发生XSS攻击的网站，及时清除和恢复受影响的数据，同时加强监控和日志审计，快速发现异常情况并进行处理。

---

 4、CSRF漏洞？

       跨站请求伪造CSRF(Cross-site request forgery)也被称为One Click Attack或者Session Riding，XSS利用站点内的信任用户，而CSRF则通过伪装成受信任用户请求受信任的网站。

简单的说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己以前认证过的站点并运行一些操作（如发邮件，发消息，甚至财产操作（如转账和购买商品））。因为浏览器之前认证过，所以被访问的站点会觉得这是真正的用户操作而去运行。

攻击原理：URL的所有参数与参数值可能被猜测到。

攻击过程：用户登录受信任站点A，并在本地生成Cookie。 在不登出A的情况下，访问危急站点B。

CSRF分类:

1、GET类型CSRF

2、POST类型CSRF

漏洞测试工具：CSRFTester：首先需要抓取我们在浏览器中访问过的所有链接以及所有的表单等信息，然后通过在CSRFTester中修改相应的表单等信息，重新提交，这相当于一次伪造客户端请求。如果修改后的测试请求成功被网站服务器接受，则说明存在CSRF漏洞，当然此款工具也可以被用来进行CSRF攻击。

防御策略：

1、验证码

2、在请求地址中添加 token 并验证(由于在每一处请求处加入token很麻烦且容易遗漏，通常使用的方法就是在每次页面加载时，使用 javascript 遍历整个 dom 树，对于 dom 中所有的 a 和 form 标签后加入 token)

3、在 HTTP 头中自定义属性并验证(通过 XMLHttpRequest 这个类，可以一次性给所有该类请求加上 csrftoken 这个 HTTP 头属性，并把 token 值放入其中。局限性非常大，XMLHttpRequest 请求通常用于 Ajax 方法中对于页面局部的异步刷新，并非所有的请求都适合用这个类来发起)

4、验证HTTP Referer字段：给所有安全敏感的请求统一增加一个拦截器来检查 Referer 的值，安全性靠第三方浏览器。

---

 5、浏览器 Referer ？空referer？

定义：HTTP请求中，Referer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器该网页是从哪个页面链接过来的，服务器因此可以获得一些信息用于处理。

作用：

1.防盗链：

       只允许我本身的网站访问本身的图片服务器，假如域名是www.google.com，那么图片服务器每次取到Referer来判断一下域名是不是www.google.com，如果是就继续访问，不是就拦截。将这个http请求发给服务器后，如果服务器要求必须是某个地址或者某几个地址才能访问，而你发送的referer不符合他的要求，就会拦截或者跳转到他要求的地址，然后再通过这个地址进行访问。

2、防止恶意请求

     对于某些风险较高的文件类型，可使用Referer使得该类型文件只能来自我所指定的网站。

空referer：

有时，Referer内容为空，根据Referer的定义，它的作用是指示一个请求是从哪里链接过来，那么当一个请求并不是由链接触发产生的，那么自然也就不需要指定这个请求的链接来源。

比如，直接在浏览器的地址栏中输入一个资源的URL地址，那么这种请求是不会包含 Referer 字段的，因为这是一个“凭空产生”的 HTTP 请求，并不是从一个地方链接过去的。

空referer的情况有
 

• 浏览器内直接输入URL
• Windows桌面的超链接图标
• 浏览器内书签
• 第三方软件内容中的链接

---

 6、从输入一个URL到显示页面的步骤？

基础版：

1、浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求

2、DNS（Domain Name System，域名系统）是域名和IP地址相互映射的一个分布式数据库。DNS使用UDP端口53。当前，对于每一级域名长度的限制是63个字符，域名总长度则不能超过253个字符。

3、服务器交给后台处理完成后返回数据，浏览器接受文件（HTML、JS、CSS、图像等）

4、浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立响应的内部数据结构（如HTML的DOM）

5、载入解析到的资源文件，渲染页面，完成。

详细版：

1、在浏览器地址栏输入URL

2、浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤

     · 如果资源未缓存，发起新请求

     · 如果已经缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。

     ·  检验新鲜通常由两个HTTP头进行控制Expires和Cache-Control

     ·  HTTP1.0提供Expires，值为一个绝对事件表示缓存新鲜日期

     ·  HTTP1.1增加了Cache-Control：max-age= ,值为以秒为单位的最大新鲜时间

3、浏览器解析URL获取协议，主机，端口，path

4、浏览器组装一个HTTP（GET）请求报文

5、浏览器获取主机ip地址，过程如下：

     · 浏览器缓存

     · 本机缓存

     · hosts文件

     · 路由器缓存

     · ISP DNS缓存

     · DNS递归查询（可能存在负载均衡导致每次IP不一样）

6、打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：

     1. 客户端发送一个TCP的SYN = 1，Seq = X 的包到服务器端口

     2. 服务器发回SYN = 1，ACK = X + 1, Seq = Y 的响应包

     3. 客户端发送ACK = Y + 1, Seq = Z

7、TCP链接建立后发送HTTP请求

8、服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序

9、服务器检查HTTP请求头是否包含缓存验证信息。如果验证缓存新鲜，返回304等对应状态码

10、处理程序读取完成请求并准备HTTP响应，可能需要查询数据库等操作

11、服务器将响应报文通过TCP连接发送回浏览器

12、浏览器接受HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：

      1、主动方发送Fin = 1，Ack = Z,  Seq = X 报文

      2、被动方发送ACK = X + 1 ,Seq = Z报文

      3、被动方发送Fin = 1，ACK = X, Seq = Y报文

      4、主动方发送ACK = Y, Seq = X 报文

13、浏览器检查响应状态码，是否为1XX, 3XX, 4XX, 5XX，这些情况处理与2XX不同

14、如果资源可以缓存，进行缓存

15、对响应进行解码（例如gzip压缩）

16、根据资源类型决定如何处理（假设资源为HTML文档）

17、解析HTML文档，构建DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释

       · 构建DOM树

          · Tokenizing：根据HTML规范将字符流解析为标记

          · Lexing: 词法分析将标记转换为对象并定义属性和规则

          · DOM construction：根据HTML标记关系将对象组成DOM树

      · 解析过程中遇到图片，样式表，js文件，启动下载

      · 构建CSSOM树

           · Tokenizing：字符流转换为标记流

           · Node：根据标记创建节点

           · CSSOM：节点创建CSSOM树

      · 根据DOM树和CSSOM树构建渲染树

           · 从DOM树的根节点遍历所有可见节点，不可见节点包括：1) script,meta这样本身不可见的标签。 2) 被css隐藏的节点，如display ：none

           · 对每一个可见节点，找到恰当的CSSOM规则并应用

           · 发布可视节点的内容和计算样式   

18、js解析如下：

      · 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readstate = loading

      · HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容

     · 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等他下载。异步脚本禁止使用document.write()，他们可以访问自己script和之前的文档元素

    · 当文档完成解析，document.readState = interactive

    · 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()

    · 浏览器在Document对象上触发DOMContentLoaded事件

    · 此时文档 完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState = complete，window 触发load事件

19、显示页面（HTML解析过程中会逐步显示页面）

---

 7、介绍GET、POST、PUT方法？

GET方法：发送一个请求来获取服务器上的某一资源

特点：

· GET方法是HTTP的一种请求方法，用于从服务器获取资源

· 是一种幂等的方法，多次发送相同的GET请求会返回相同的结果

· GET请求将参数附加在 URL的查询字符串中，请求的数据会显示在URL中

· GET请求一般用于获取数据

· GET请求不应该有请求体，参数应该通过URL的查询字符串传递

` GET请求不会对服务器端的资源产生副作用，因此被视为安全的

POST方法：向URL指定的资源提交数据或附加新的数据 

特点：

· POST方法是HTTP的一种请求方法，用于向服务器提交资源

· 不是一种幂等的方法

· POST请求的数据可以通过请求体以表单形式传递，或者以JSON等格式传递

· POST请求可能对服务器端的资源产生副作用，因此被视为不安全

PUT方法： 将数据发送给服务器，并将其存储在指定的URL位置。与POST方法不同的是，PUT方法指定了资源在服务器上的位置

特点：

· POST方法是HTTP的一种请求方法，用于将数据发送给服务器并存储在指定的URL位置 

· 是一种幂等的方法，多次发送相同的PUT请求会返回相同的结果

· PUT请求用于指定资源在服务器上的位置，POST请求没有指定位置

· PUT请求一般用于更新或者替换资源，而POST请求一般用于新增资源或提交数据

---

8、TCP与UDP的区别？ 

       首先，TCP/IP 中有两个具有代表性的传输层协议，分别是 TCP 和 UDP。

· TCP协议全称是传输控制协议，是一种面向连接的、可靠的、基于字节流的传输层通信协议。

TCP连接过程：

第一次握手

        客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态。

第二次握手

        服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。

第三次握手

        当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入 ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。

 TCP断开连接：

TCP 是全双工的，在断开连接时两端都需要发送 FIN 和 ACK。

第一次握手

        若客户端 A 认为数据发送完成，则它需要向服务端 B 发送连接释放请求。

第二次握手

        B 收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明 A 到 B 的连接已经释放，不再接收 A 发的数据了。但是因为 TCP 连接是双向的，所以 B 仍旧可以发送数据给 A。

第三次握手

        B 如果此时还有没发完的数据会继续发送，完毕后会向 A 发送连接释放请求，然后 B 便进入 LAST-ACK 状态。

第四次握手

        A 收到释放请求后，向 B 发送确认应答，此时 A 进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有 B 的重发请求的话，就进入 CLOSED 状态。当 B 收到确认应答后，也便进入 CLOSED 状态。

 TCP协议的特点：

· 面向连接
        面向连接，是指发送数据之前必须在两端建立连接。建立连接的方法是“三次握手”，这样能建立可靠的连接。建立连接，是为数据的可靠传输打下了基础。

· 仅支持单播传输
        每条TCP传输连接只能有两个端点，只能进行点对点的数据传输，不支持多播和广播传输方式。

· 面向字节流
        TCP不像UDP一样那样一个个报文独立地传输，而是在不保留报文边界的情况下以字节流方式进行传输。

· 可靠传输
        对于可靠传输，判断丢包，误码靠的是TCP的段编号以及确认号。TCP为了保证报文传输的可靠，就给每个包一个序号，同时序号也保证了传送到接收端实体的包的按序接收。然后接收端实体对已成功收到的字节发回一个相应的确认(ACK)；如果发送端实体在合理的往返时延(RTT)内未收到确认，那么对应的数据（假设丢失了）将会被重传。

· 提供拥塞控制
        当网络出现拥塞的时候，TCP能够减小向网络注入数据的速率和数量，缓解拥塞

UDP ：UDP协议全称是用户数据报协议，在网络中它与TCP协议一样用于处理数据包，是一种无连接的协议。在OSI模型中，在第四层——传输层，处于IP协议的上一层。UDP有不提供数据包分组、组装和不能对数据包进行排序的缺点，也就是说，当报文发送之后，是无法得知其是否安全完整到达的。

UDP协议的特点：

1. 面向无连接

       首先 UDP 是不需要和 TCP一样在发送数据前进行三次握手建立连接的，想发数据就可以开始发送了。并且也只是数据报文的搬运工，不会对数据报文进行任何拆分和拼接操作。

具体来说就是：

       在发送端，应用层将数据传递给传输层的 UDP 协议，UDP 只会给数据增加一个 UDP 头标识下是 UDP 协议，然后就传递给网络层了
      在接收端，网络层将数据传递给传输层，UDP 只去除 IP 报文头就传递给应用层，不会任何拼接操作
2. 有单播，多播，广播的功能

       UDP 不止支持一对一的传输方式，同样支持一对多，多对多，多对一的方式，也就是说 UDP 提供了单播，多播，广播的功能。

3. UDP是面向报文的

       发送方的UDP对应用程序交下来的报文，在添加首部后就向下交付IP层。UDP对应用层交下来的报文，既不合并，也不拆分，而是保留这些报文的边界。因此，应用程序必须选择合适大小的报文

4. 不可靠性

        首先不可靠性体现在无连接上，通信都不需要建立连接，想发就发，这样的情况肯定不可靠。

        并且收到什么数据就传递什么数据，并且也不会备份数据，发送数据也不会关心对方是否已经正确接收到数据了。

        再者网络环境时好时坏，但是 UDP 因为没有拥塞控制，一直会以恒定的速度发送数据。即使网络条件不好，也不会对发送速率进行调整。这样实现的弊端就是在网络条件不好的情况下可能会导致丢包，但是优点也很明显，在某些实时性要求高的场景（比如电话会议）就需要使用 UDP 而不是 TCP。

5. 头部开销小，传输数据报文时是很高效的。 

 总结：

• TCP向上层提供面向连接的可靠服务 ，UDP向上层提供无连接不可靠服务。
• 虽然 UDP 并没有 TCP 传输来的准确，但是也能在很多实时性要求高的地方有所作为
• 对数据准确性要求高，速度可以相对较慢的，可以选用TCP

---

9、HTTP request报文结构是怎样的 ？HTTP response报文结构是怎样的？ 

HTTP request 报文结构：

1、首先是Resquest-Line 包括： 请求方法、请求URL、协议版本、CRLF（回车符)

2、首行之后是若干行请求头，包括general-header，request-header或者entity-header，每个一行以CRLF结束

3、请求头和消息实体之间有一个CRLF分隔

4、根据实际请求需要可能包含一个消息实体

一个请求报文例子如下：

GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT

name=qiu&age=25 

 HTTP response报文结构：

1、首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF

2、首行之后是若干行响应头，包括：通用头部，响应头部，实体头部

3、响应头部是响应实体之间用一个CRLF空行分隔

4、最后是一个可能的消息实体

 响应报文例子如下：

HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1

{"name": "qiu", "age": 25} 

---

10、HTTP状态码及其含义？ 

1XX：信息状态码

          100 Continue 继续，一般在发送post请求时，已经发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

2XX：成功状态码

          200 OK正常返回信息

          201 Created 请求成功并且服务器创建了新的资源

          202 Accepted 服务器已经接受请求，但尚未处理

3XX：重定向

         301 Moved Permanently 请求的网页已永久移动到新位置

         302 Found 临时性重定向

         303 See other 临时性重定向，且总是使用GET请求新的URL

         304 Not Modified 自从上次请求后，请求的网页未修改过

4XX：客户端错误

        400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

        401 Unauthorized 请求未授权

        403 Forbidden 禁止访问

        404 Not Found 找不到如何与URL相匹配的资源

5XX：服务器错误

       500 Internal Server Error 最常见的服务器端错误

       503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

---

11、请描述一下cookies、sessionStorage和localStorage的区别？ 

cookie是网站为了标示用户身份而存储在用户本地终端（Client Side）上的数据，通常经过加密，cookie数据始终在同源的http请求中携带，会在浏览器和服务器间来回传递

sessionStorage 和localStorage不会自动把数据发给服务器，仅在本地保存 

存储大小：

cookie数据大小不能超过4k

sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大的多，可以达到5m或更大 

有效时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭 

---

12、iframe是什么？有哪些优缺点？ 

iframe也称作嵌入式框架，全称为inline-frame（内联框架）。它可以把一个网页的框架和内容嵌入在现有的网页中。iframe通常用于在当前页面中加载另一个页面，例如嵌入地图、视频、广告等。它的基本用法如下：

<iframe src="https://example.com" width="600" height="400"></iframe>

优点：

1.它属于html的独立封装，可以把需要的代码分成一个个html的模块存储，需要的时候进行引用，代码复用上挺好的。
2.它另外一个非常霸道的地方在于2个页面中有遇到重复命名的时候它的css和js不会互相冲突，对于团队开发命名上可以很好的避免同名冲突。

缺点：

· iframe会阻塞主页面的Onload事件

· 搜索引擎的检索程序无法解读这种页面，不利于SEO

· iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载

· 使用iframe之前需考虑这两个缺点，如果需要使用iframe，最好是通过javascript动态给iframe添加src属性，这样可以绕过以上两个问题

---

13、简述一下src和href的区别 

· src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

· src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和iframe等元素

    例如<script src = "js.js"></script>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部页面而不是头部

· href时Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href = "common.css" rel= "stylesheet"/ >那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式

引用：

同源策略与跨域_同源策略和跨域-CSDN博客

跨站脚本攻击漏洞（XSS）：基础知识和防御策略-CSDN博客

CSRF漏洞原理攻击与防御（非常细）-CSDN博客

HTTP请求头中Referer的作用_请求转发 请求头里面会有有referer嘛-CSDN博客

TCP与UDP的区别_tcp和udp的区别-CSDN博客