一、同源策略
1995年,同源政策由 Netscape 公司(网景公司)引入浏览器。目前,所有浏览器都实行这个政策。同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。随着互联网的发展,“同源政策”越来越严格。目前,如果非同源,共有三种行为受到限制:
1. Cookie、LocalStorage
2. indexDB 无法读取
3. DOM 无法获得 AJAX请求不能发送
二、同源的三个条件:协议、域名、端口号要相同。
三、举例:请求页面和被请求页面的同源分析:
四、概念补充
1.Cookie是什么?
cookies中文名称为小型文本文件,指某些网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。它满足RFC6265标准。
Cookie是用户在访问网站时,服务器将存储在计算机上的数据发送到用户的浏览器上的文件,存储在 Cookie 中的数据是加密的,只有当用户离开该网站并重新访问时才会解密并使用。Cookie 一般包含了用户的个人信息,例如:用户名、密码、浏览历史、购买记录等。
Cookie 可以帮助网站和应用程序辨别用户身份,从而提高安全性和提供更好的用户体验。但是,Cookie 也可能被滥用,例如:被用于追踪用户行为、进行恶意攻击等。
为了保护用户隐私,一些网站和应用程序会限制 Cookie 的使用,或者要求用户在使用网站时同意关闭 Cookie。用户可以通过设置浏览器 扩展程序或使用无痕模式等方式来减少 Cookie 的使用。
2.LocalStorage 是什么?
LocalStorage是本地存储文件。
对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大。
localstorage 在浏览器的 API 有两个:localStorage 和sessionStorage,存在于 window 对象中:localStorage 对应 window.localStorage,sessionStorage 对应window.sessionStorage。
localStorage 和 sessionStorage 的区别主要是在于其生存期。
这里的作用域指的是:如何隔离开不同页面之间的localStorage。
localStorage只要在相同的协议、相同的主机名、相同的端口(符合同源策略)下,就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点,除了协议、主机名、端口外,还要求在同一窗口(也就是浏览器的标签页)下。
3.indexDB 是什么?
再知道indexDB之前,我们要知道现有的浏览器存贮方案:
1.cookie:大小不超过4kb,每次请求发回服务器。
2.localStorage:大小2.5MB到10MB之间,不提供搜索功能,不能建立自定义索引。
3.第三种就是indexDB,它是浏览器提供的本地数据库,可以被网页脚本创建和操作,允许存贮大量数据,提供查找接口,能建立索引。
数据库类型而言,indexDB更接近NoSQL数据库。
4.DOM是什么?
DOM是JS操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个JS对象,从而可以用脚本进行各种操作(比如增删内容)。
5.AJAX请求是什么?
“AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 ajax是一种浏览器通过js异步发起请求,局部更新页面的技术。