web前端的同源策略是什么？

一、同源策略

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异步发起请求,局部更新页面的技术。