【浏览器安全机制】一文带你了解同源策略（Same origin policy）及跨域请求

同源策略的目的是保护用户的安全和隐私。它防止恶意网站通过跨域请求访问用户的敏感信息，或者利用其他网站上的漏洞进行攻击。

同源策略施加了以下限制：

• JavaScript 只能访问与其来源相同的页面和代码。
• DOM（文档对象模型）限制了对不同源文档的访问。
• XMLHttpRequest 和 Fetch API 限制了对不同源的 AJAX 请求。

了解同源策略对于编写安全的网络应用程序和了解跨域问题的解决方案至关重要。

然而，同源策略并不适用于所有场景。为了允许跨域请求，可以使用一些机制，如跨域资源共享（CORS）和服务器端代理等。接下来进行详细介绍。

---

JSONP跨域通信

JSONP（JSON with Padding）是一种利用<script>标签的跨域通信技术，在跨域请求中使用动态创建<script>标签来加载数据。以下是JSONP工作原理的步骤：

1. 客户端创建一个动态<script>标签，并指定要请求的URL地址，同时定义一个回调函数，该回调函数在数据加载完成后被调用。
2. 服务器接收到请求后，将数据包装在回调函数中的响应返回给客户端。
3. 客户端的浏览器通过执行回调函数处理响应数据。

JSONP的关键点是服务器返回的数据需要包裹在预定义的回调函数中。这样，即使是跨域请求，客户端仍然可以通过动态创建<script>标签加载数据，并在响应返回后执行预定义的回调函数。

举个例子：

假设我们有两个网站：https://www.example.com 和 https://api.example.com。根据同源策略，这两个网站被认为是不同源的。

在 https://www.example.com 的页面中，我们想要获取来自 https://api.example.com/data 的数据，而且 https://api.example.com 并没有启用CORS，此时可以进行JSONP跨域通信。

1. 在客户端，我们需要定义一个回调函数来处理获取到的数据：

function processData(data) {
    console.log(data);
}

2. 创建一个动态的<script>标签，将 https://api.example.com/data 作为其src属性值，并指定回调函数名作为查询参数，例如：

var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=processData';
document.head.appendChild(script);

3. 当浏览器加载该<script>标签时，会发送请求到 https://api.example.com/data?callback=processData，服务器应返回的数据包装在processData()函数中，响应内容如下：

processData({ "message": "This is cross-origin data" });

4. 浏览器解析响应并执行processData()函数，客户端就可以访问到跨域请求的数据。

通过JSONP，我们可以在不启用CORS的情况下实现跨域请求。

需要注意的是： JSONP具有一定的局限性（如只支持GET请求、安全问题等），且它依赖于对外公开的回调函数，可能受到恶意代码注入的风险。但在不需要复杂跨域请求时，它是一种简单有效的解决方案。

---

跨域资源共享（CORS）

CORS 是一种机制，允许在浏览器中通过特定的 HTTP 头来控制跨域请求。它基于服务器的信任模型，服务器可以发送额外的响应头来指示浏览器是否允许跨域请求。当浏览器发起跨域请求时，会进行预检请求（OPTIONS 请求）来检查服务器允许的跨域操作。如果服务器返回了合适的 CORS 响应头，浏览器就会执行实际的跨域请求。

览器将CORS请求分成两类：简单请求和非简单请求。

简单请求需要满足以下两大条件：

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

CORS简单请求跨域实现流程：

同时，也可以在服务器端设置允许来自特定源的跨域请求：

# Python Flask 示例代码
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/data', methods=['GET'])
def get\_data():
    response = jsonify({'message': 'This is a cross-origin response'})
    response.headers.add('Access-Control-Allow-Origin', 'https://www.example.com')
    response.headers.add('Access-Control-Allow-Methods', 'GET')
    return response

if __name__ == '\_\_main\_\_':
    app.run()

上述代码中，Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 是 CORS 相关的响应头，它们指示浏览器允许来自特定源的 GET 请求。

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

---

服务器端代理

服务器端代理是一种通过在服务器上转发请求来处理跨域请求的方法。它涉及设置一个位于客户端和目标服务器之间的代理服务器，客户端将请求发送到代理服务器，代理服务器再将请求转发给目标服务器，并将响应返回给客户端。由于代理服务器与目标服务器在同源中，所以不存在跨域问题。

服务器代理实现流程：

例如，当客户端需要与 https://api.example.com/data 进行跨域通信时，可以通过服务器端设置一个代理路由 /proxy，然后客户端将请求发送到 /proxy/data，代理服务器再将该请求转发给 https://api.example.com/data，并将响应返回给客户端。

这样，对于客户端来说，它发送的请求是在同源（相对于代理服务器）中进行的，避免了跨域问题。

---

反向代理

反向代理是一种代理服务器的布置方式，它将客户端请求转发到内部资源服务器，并将响应返回给客户端。与正向代理不同，反向代理透明地对外提供服务，客户端无需知道实际提供服务的服务器。

以下是反向代理的工作原理和一些关键概念：

1. 客户端发送请求到反向代理服务器，如https://www.example.com。
2. 反向代理服务器收到客户端请求后，根据预定义的规则和路由配置，决定将请求转发到哪个内部资源服务器进行处理。
3. 反向代理服务器将请求转发到内部资源服务器，如https://appserver1.example.com。
4. 内部资源服务器接收到请求后，根据其所提供的服务或内容，生成响应并发送回反向代理服务器。
5. 反向代理服务器接收到来自内部资源服务器的响应后，将响应返回给客户端。

在实际应用中，反向代理可以使用常见的Web服务器软件（如Nginx、Apache）来配置和搭建。通过适当的配置，反向代理可以提供高性能、安全和可扩展的服务。

举个例子：

假设你有一个网站 https://www.example.com，并希望在该网站上提供多个服务，如静态文件、API和应用程序。为了提高性能和安全性，你决定使用反向代理来管理这些服务。

（1）配置反向代理服务器：
你使用Nginx作为反向代理服务器，并进行相应的配置。

（2）静态文件服务：
在你的内部资源服务器上，你有一个用于存储静态文件的目录，如 /var/www/html。你在Nginx的配置中指定将以 /static 路径开头的请求转发到该目录。例如：

location /static {
    alias /var/www/html;
}

当客户端访问 https://www.example.com/static/file.jpg 时，Nginx会将请求转发到内部资源服务器的 /var/www/html/file.jpg 文件，并将响应返回给客户端。

（3）API服务：
你的内部资源服务器还提供了一组API接口，如 /api/getData 和 /api/saveData。你在Nginx的配置中指定将以 /api 路径开头的请求转发到该API服务器。例如：

location /api {
    proxy_pass http://api-server;
}

当客户端发起对 https://www.example.com/api/getData 的请求时，Nginx会将请求转发到内部资源服务器上的 API 服务器，并将响应返回给客户端。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数网络安全工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年网络安全全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上网络安全知识点！真正的体系化！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

567994758)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上网络安全知识点！真正的体系化！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！