面试题：Vue跨域优化与安全考量

可能存在的安全风险

CORS 配置不当：
- 允许所有来源访问：若在 CORS 配置中设置 Access-Control-Allow-Origin: *，这意味着任何域都能发起跨域请求，容易遭受跨站请求伪造（CSRF）攻击。恶意站点可以利用用户在目标站点已登录的状态，伪造请求执行恶意操作。
- 泄露敏感信息：如果错误地配置了 Access-Control-Allow-Headers，允许一些不必要的敏感头部（如 Authorization）被跨域请求携带，可能导致敏感信息泄露。攻击者可以通过精心构造的跨域请求获取这些敏感头部信息。
JSONP 风险：
- 注入攻击：JSONP 是通过动态创建 <script> 标签来实现跨域请求。若服务端对返回的数据没有进行严格的过滤和验证，攻击者可以注入恶意脚本。例如，恶意攻击者可以篡改 JSONP 回调函数，执行恶意代码，导致用户浏览器被攻击。
中间人攻击：
- 数据篡改：在跨域请求过程中，如果通信没有加密（如未使用 HTTPS），中间人可以拦截请求和响应，篡改数据。例如修改用户的交易金额等关键信息，给用户和系统带来损失。

优化策略

性能优化：
- 合理设置缓存：对于不经常变化的跨域数据，可以在客户端或服务端设置缓存。在 Vue 中，可以使用 axios 的拦截器来处理缓存逻辑。例如：

import axios from 'axios';

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use(config => {
    const cachedResponse = localStorage.getItem(config.url);
    if (cachedResponse) {
        return Promise.resolve(JSON.parse(cachedResponse));
    }
    return config;
});

axiosInstance.interceptors.response.use(response => {
    localStorage.setItem(response.config.url, JSON.stringify(response.data));
    return response;
});

- **合并请求**：如果有多个跨域请求需要获取的数据存在关联性，可以将这些请求合并为一个请求。例如，在一个电商项目中，商品详情页可能需要同时获取商品信息、商品评论和相关推荐，服务端可以提供一个接口一次性返回这些数据，减少跨域请求次数。

2. 安全防护措施： - CORS 正确配置： - 限制来源：在服务端配置 Access-Control-Allow-Origin 时，只允许可信的来源访问。例如，在 Node.js 中使用 express - cors 中间件：

const express = require('express');
const cors = require('cors');
const app = express();

const whitelist = ['http://example.com', 'https://example.com'];
const corsOptions = {
    origin: function (origin, callback) {
        if (whitelist.indexOf(origin)!== -1 ||!origin) {
            callback(null, true);
        } else {
            callback(new Error('Not allowed by CORS'));
        }
    }
};

app.use(cors(corsOptions));

    - **严格限制头部**：在 `Access-Control-Allow-Headers` 中只允许必要的头部字段。例如，只允许 `Content - Type` 等常见字段，避免允许敏感头部：

app.use(cors({
    origin: whitelist,
    allowedHeaders: ['Content - Type']
}));

- **JSONP 安全处理**：
    - **服务端验证**：服务端要对 JSONP 回调函数名进行严格验证，只允许符合规范的回调函数名。可以使用正则表达式验证回调函数名是否合法。
    - **数据过滤**：对返回给 JSONP 的数据进行严格的过滤和转义，防止恶意脚本注入。
- **使用 HTTPS**：确保跨域请求使用 HTTPS 协议，加密通信数据，防止中间人攻击。在实际项目中，购买 SSL 证书并配置到服务器上，使所有跨域请求都通过 HTTPS 进行。例如，在阿里云等云服务平台上，可以方便地申请和配置 SSL 证书。

结合实际项目举例

在一个企业内部的项目管理系统中，前端使用 Vue 开发，后端使用 Node.js。该系统需要从另一个内部服务获取项目相关的文档数据，存在跨域需求。

起初，CORS 配置采用了 Access-Control-Allow-Origin: *，在安全审计时发现存在 CSRF 风险。随后进行整改，将 Access-Control-Allow-Origin 设置为企业内部前端应用的域名，同时在服务端对所有跨域请求进行 CSRF 令牌验证。

在性能方面，由于文档数据更新频率较低，通过在前端设置缓存，当用户再次访问项目文档页面时，优先从缓存中获取数据，大大提高了页面加载速度。对于一些需要实时获取的项目进度数据，则通过 HTTPS 协议进行跨域请求，确保数据传输的安全性。通过这些措施，在不影响业务功能的前提下，实现了跨域请求的高效与安全。

星途面试题库

面试题：Vue跨域优化与安全考量

知识考点

面试题答案

可能存在的安全风险

优化策略

结合实际项目举例