CORS（跨来源资源共享）是一种允许浏览器从不同源请求数据的机制。在开发Web应用程序时，我们可能需要使用CORS，以便客户端可以从其他域中获取资源。
然而，如果我们使用 Access-Control-Allow-Origin: * 将所有来源添加到CORS响应头中，这会带来一些安全风险。本文将详细介绍这些风险，并提供相应的学习和指导意义。
跨站点请求伪造（CSRF）
通过为所有来源启用CORS，攻击者可以利用受害者浏览器中的身份验证凭据来发起跨站点请求伪造攻击（CSRF）。攻击者可以构造特定网站的请求，使其自动发送身份验证cookie，并执行恶意操作。
例如，假设攻击者为网站A构造一个图像标记，该标记链接到网站B。如果受害者已在网站B上进行了身份验证，当他单击该图像时，浏览器将发送与网站B相关联的cookie。因此，攻击者可以利用该cookie来模拟受害者的身份并执行恶意操作。
以下是一个示例代码块，展示如何通过JavaScript创建一个带有CSRF攻击的POST请求：
const xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/transfer-funds");
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('amount=1000&toAccount=123456&fromAccount=654321');这个示例向另一个域发送了一个POST请求，将1000美元转移到账户123456中。由于 withCredentials 属性被设置为 true，因此浏览器会自动携带身份验证cookie。
数据泄露
允许所有来源的CORS响应头可能会导致敏感数据泄露。攻击者可以利用这种机制来获取其他站点的内容，并使用JavaScript解析其中的敏感数据。
例如，假设我们在网站A上允许所有来源的CORS响应头，并向客户端返回以下JSON：
{
"username": "Alice",
"password": "s3cr3t"
}如果攻击者构造了一个图像标记，该标记链接到网站A，那么他就可以从浏览器中获取该JSON数据并分析其中的用户名和密码。
下面是一个展示如何通过JavaScript从CORS响应中获取数据的示例代码块：
fetch('https://example.com/api/data')
.then(response => response.json())
.then(data => {
console.log(data.username);
console.log(data.password);
});解决方案
为了避免跨站点请求伪造攻击和数据泄露，我们应该仅允许来自特定域的请求。可以通过在CORS响应头中指定允许的来源来实现这一点。
例如，以下代码示例演示如何配置CORS以仅允许来自example.com的跨域请求：
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "https://example.com");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});结论
将所有来源添加到CORS响应头中可能会导致严重的安全风险，包括跨站点请求伪造攻击和数据泄露。因此，我们应该仅允许来自特定域的请求，并避免使用通配符 *
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29175