17370845950

本文介绍如何在前后端分离架构下，安全地流式传输受保护的 mp4 视频：前端通过 `crossorigin="use-credentials"` 携带 cookie 发起请求，后端从 cookie 解析 jwt 或会话令牌完成鉴权，并正确处理 http range 请求以支持拖拽、暂停等播放功能。

要在浏览器中播放需身份验证的视频流，关键在于让视频 请求能携带认证凭证（如 Cookie），并确保服务端能识别该凭证、校验权限，同时仍支持标准的 HTTP 范围请求（Range / 206 Partial Content）——这是实现快进、拖拽、缓冲等现代播放体验的基础。

✅ 前端：启用凭据传递与正确配置 video 标签

默认情况下，

⚠️ 注意事项：

• crossOrigin="anonymous" ❌（不发送 Cookie，无法鉴权）
• crossOrigin="use-credentials" ✅（发送 Cookie，但要求服务端响应头包含 Access-Control-Allow-Credentials: true）
• 不可省略 preload="metadata"（提升首帧加载体验）
• 确保你的前端域名与后端 API 域名满足 CORS 策略（同源或已配置合法跨域）

✅ 后端：从 Cookie 提取 Token 并集成鉴权中间件

由于视频请求由浏览器自动发起（非 fetch/axios），它无法手动设置 Authorization 头，但会自动携带同域 Cookie。因此，你需要：

1. 在认证中间件中优先从 Cookie 解析 token（例如 token 或 session_id 字段）；
2. 确保该中间件在视频路由之前执行；
3. 若鉴权失败，直接返回 401，中断流式响应。

示例 Express 中间件（兼容 Header + Cookie 双模式）：

// auth.middleware.js
const jwt = require('jsonwebtoken');

const authenticate = (req, res, next) => {
  // 1. 优先尝试从 Cookie 获取 token（适用于 video 请求）
  const token = req.cookies?.token || 
                req.headers.authorization?.replace('Bearer ', '');

  if (!token) {
    return res.status(401).json({ message: 'Access denied: No token provided' });
  }

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (err) {
    res.status(403).json({ message: 'Invalid or expired token' });
  }
};

module.exports = authenticate;

然后挂载到视频路由：

const express = require('express');
const router = express.Router();
const fs = require('fs').promises;

router.get('/v1/video/get/:id', authenticate, async (req, res) => {
  const { id } = req.params;
  if (!id) return res.status(500).json({ message: 'Invalid request' });

  // ✅ 此时 req.user 已存在，可做细粒度权限检查（如：用户是否有权访问该视频）
  // if (!await canViewVideo(req.user.id, id)) {
  //   return res.status(403).json({ message: 'Forbidden' });
  // }

  const videoPath = `videos/${id}.mp4`;
  let videoStat;
  try {
    videoStat = await fs.stat(videoPath);
  } catch (e) {
    return res.status(404).json({ message: 'Video not found' });
  }

  const fileSize = videoStat.size;
  const videoRange = req.headers.range;

  if (videoRange) {
    const parts = videoRange.replace(/bytes=/, '').split('-');
    const start = parseInt(parts[0], 10);
    const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
    const chunkSize = end - start + 1;

    const file = fs.createReadStream(videoPath, { start, end });
    res.writeHead(206, {
      'Content-Range': `bytes ${start}-${end}/${fileSize}`,
      'Accept-Ranges': 'bytes',
      'Content-Length': chunkSize,
      'Content-Type': 'video/mp4',
      'Access-Control-Allow-Credentials': 'true', // ✅ 必须响应此头
      'Access-Control-Allow-Origin': 'https://your-frontend-domain.com', // 显式指定，不可为 *
    });
    file.pipe(res);
  } else {
    res.writeHead(200, {
      'Content-Length': fileSize,
      'Content-Type': 'video/mp4',
      'Access-Control-Allow-Credentials': 'true',
      'Access-Control-Allow-Origin': 'https://your-frontend-domain.com',
    });
    fs.createReadStream(videoPath).pipe(res);
  }
});

module.exports = router;

? 补充安全建议

• Cookie 设置务必安全：后端设 Cookie 时应启用 httpOnly, secure, sameSite: 'lax'（或 'strict'），防止 XSS 泄露；
• 避免 token 暴露在 URL 中：切勿将 token 拼入 src 查询参数（易被日志/代理记录）；
• 视频路径需防遍历：对 id 做白名单校验或使用 UUID，避免 ../../../etc/passwd 类攻击；
• 考虑 CDN 或对象存储代理：生产环境建议用 Nginx 或 Cloudflare 实现鉴权转发，减轻 Node.js 流式压力。

通过以上配置，你就能在保障安全的前提下，为用户提供丝滑、可交互的受控视频播放体验。