奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 题库 >

JS跨域和存储面试题及答案,来自小神

时间:2018-09-11 22:29来源: 作者:Vuez
什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。各种存储方案的简单对比1、Cookies:浏览器均支持,容量为4KB 2、UserData:仅IE支持,容量为64KB

什么是跨域?

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源

1、资源跳转: A链接、重定向、表单提交
2、资源嵌入: <link><script><img><frame>等dom标签,还有样式中background:url()、@font-face()等文件外链
3、脚本请求: js发起的ajax请求、dom和js对象的跨域操作等

什么是同源策略?

同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

url 哪些地方不同算作跨域?协议、域名、端口,三个有两个不同就是不同的源,就是跨域

同源策略限制以下几种行为:

1、Cookie、LocalStorage 和 IndexDB 无法读取
2、 DOM 和 Js对象无法获得
3、 AJAX 请求不能发送

跨域解决方案

1、通过jsonp跨域
2、document.domain + iframe跨域
3、 location.hash + iframe
4、window.name + iframe跨域
5、postMessage跨域
6、跨域资源共享(CORS)
7、nginx代理跨域
8、nodejs中间件代理跨域
9、WebSocket协议跨域
各种存储方案的简单对比
 1、Cookies:浏览器均支持,容量为4KB 2、UserData:仅IE支持,容量为64KB 3、 Flash:100KB,非HTML原生,需要插件支持 4、 Google Gears SQLite :需要插件支持,容量无限制 5、 LocalStorage:HTML5,容量为5M 6、 SesstionStorage:HTML5,容量为5M 7、globalStorage:Firefox独有的,Firefox13开始就不再支持这个方法

特点
1、cookie的大小受限制,cookie大小被限制在4KB,不能接受像大文件或邮件那样的大数据 2、cookie要在服务器和浏览器之间来回传送,cookie数据始终在同源的http请求中携带(即使不需要) 3、cookie是服务端生成,客户端进行维护和存储

Cookie的生成方式

生成方式一:http response header中的set-cookie
生成方式二:js中可以通过document.cookie可以读写cookie//以键值对的形式展示

Cookie的缺陷

1、cookie会被附加在每个HTTP请求中,在HttpRequest 和HttpResponse的header中都是要被传输的,所以无形中增加了一些不必要的流量损失
cookie是用来维护用户信息的,而域名(domain)下所有请求都会携带cookie,但对于静态文件的请求,携带cookie信息根本没有用,此时可以通过cdn(存储静态文件的)的域名和主站的域名分开来解决

2、由于在HTTP请求中的Cookie是明文传递的,所以安全性成问题,除非用HTTPS。 可以使用HttpOnly提升Cookie安全性。httponly 不支持读写,浏览器不允许脚本操作document.cookie去更改cookie,一般情况下都应该设置这个为true,这样可以避免被XSS攻击拿到cookie

session

session机制是一种服务器端的机制,服务器使用一种类似于散列表的结构(也可能就是使用散列表)来保存信息

localStorage

这是一种持久化的存储方式,也就是说如果不手动清除,数据就永远不会过期。它也是采用Key - Value的方式存储数据,底层数据接口是sqlite,按域名将数据分别保存到对应数据库文件里。它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费

localStorage缺点

① localStorage大小限制在500万字符左右,各个浏览器不一致
② localStorage在隐私模式下不可读取
③ localStorage本质是在读写文件,数据多的话会比较卡
④ localStorage不能被爬虫爬取,不要用它完全取代URL传参

SessionStorage

和服务器端使用的session类似,是一种会话级别的缓存,关闭浏览器会数据会被清除。不过有点特别的是它的作用域是窗口级别的,也就是说不同窗口间的sessionStorage数据不能共享的。

SessionStorage缺点

① 会话级别的浏览器存储
② 大小为5M左右
③仅在客户端使用,不和服务端进行通信
④ 接口封装较好


内容来自:https://hongqingcao.github.io/Front-end-notes/
(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
Vuez 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2018-03-30 22:03 最后登录:2018-09-11 22:09

关注奔三路