同源策略

1. 同源策略

同源策略 (Same Origin Policy)

• 协议
• 域名
• 端口

​ 同时满足这三种条件就是同源，当存在两个站点，其中有一项不满足相同条件的时候，我们即可说这两个站点不是同源站点，而当其中一个站点想请求另外一个站点的资源的时候我们边称它为跨域请求，而由于安全考虑，跨域请求会受到同源策略的限制

1.1 不受影响的标签

2. img
3. iframe
4. link
5. css

在同源策略（Same-Origin Policy）中，不同源（即不同协议、主机或端口）之间的资源访问受到限制，以增强安全性。不过，某些标签和资源类型有特定的规则：

• <script>：不受同源策略限制，可以从不同源加载 JavaScript 文件。这使得从外部源加载脚本成为可能，但仍需注意跨站点脚本攻击（XSS）的风险。 主要是利用src属性

<script src=""></script>

• <img>：不受同源策略限制，可以从不同源加载图片。这使得网页能够显示来自不同源的图像，但不会影响其他资源或进行脚本操作。

• <iframe>：同样不受同源策略限制，可以嵌入不同源的网页。这允许在一个网页中显示来自不同站点的内容，但需要小心防止点击劫持等安全问题。

• <link> 和 CSS：在加载外部样式表时不受同源策略限制。网页可以链接到来自不同源的 CSS 文件，以应用样式。 link 主要是引入外部资源的。

​ 在HTML中<a>, <form>, <img>, <script>, <iframe>, <link> 等标签以及 Ajax 都可以指向一个资源地址 在这些标签中有以下的标签不受同源策略的限制

1. script

2. 同源策略的工作原理

同源策略的核心是：不同源的网页不能直接相互访问对方的数据。也就是说，一个网站的JavaScript代码不能访问另一个网站的数据，除非它们属于同一个源。

举个例子：

• 如果你访问 https://www.example.com 网站，你的浏览器会阻止该网站的JavaScript代码去读取 http://www.another.com 网站的数据。
• 但是如果 https://www.example.com 和 https://www.example.com 是同一个源，那么它们之间的JavaScript代码可以互相访问。

3. 同源策略的目标

1. 防止跨站脚本攻击（XSS）：恶意网站的JavaScript代码不能访问受害者在其他网站上存储的数据（如cookie、localStorage等）。
2. 防止跨站请求伪造（CSRF）：恶意网站不能向受害者已登录的网站发送请求并带上受害者的凭证（如cookie）。

4. ajax请求

1. 异步通信：

   • AJAX请求通常是异步的，意味着发送请求后，页面不需要等待服务器响应，可以继续执行其他操作。当响应数据返回时，JavaScript会处理返回的数据并更新页面。

2. JavaScript发起：

   • 这种请求是由JavaScript代码发起的。最常用的方法是使用XMLHttpRequest对象或现代的Fetch API。

3. 与服务器交互：

   • AJAX用于与服务器进行交互，可以发送GET、POST等HTTP请求，获取或提交数据，并动态更新页面内容。

4. 数据格式多样：

   • 虽然“XML”是AJAX的一个部分，但现代AJAX请求常常使用JSON作为数据交换格式，因为JSON比XML更轻量级，解析更高效。