关于AWS CloudFront访问控制与视频加载优化的技术咨询

可以，通过Lambda@Edge或AWS WAF实现，核心思路是拦截不带指定请求头的请求（比如浏览器直接访问时不会携带自定义头），返回403禁止访问。

方案1：Lambda@Edge（灵活可控） #

创建一个Origin Request触发的Lambda函数，检查请求中是否包含你的自定义标识头（比如X-App-Auth），不符合则拦截：

exports.handler = async (event) => {
    const request = event.Records[0].cf.request;
    const headers = request.headers;

    // 校验自定义请求头是否存在且匹配预设值
    if (!headers['x-app-auth'] || headers['x-app-auth'][0].value !== '你的专属验证值') {
        return {
            status: '403',
            statusDescription: 'Forbidden',
            body: '仅允许应用内访问',
            headers: {
                'content-type': [{ key: 'Content-Type', value: 'text/plain' }]
            }
        };
    }

    return request;
};

部署注意事项：

• Lambda函数必须部署在us-east-1区域，才能关联到CloudFront分发
• 将函数关联到CloudFront分发的Origin Request事件类型
• 修改你现有fetch代码，携带自定义头：

  fetch(url, {
      method: 'GET',
      headers: {
          'X-App-Auth': '你的专属验证值' // 新增自定义头
      }
  }).then(res => res.blob())
    .then(blob => {
        const urlObject = URL.createObjectURL(blob);
        document.querySelector('#output-frame-id').setAttribute("src", urlObject);
    })
  

方案2：AWS WAF（简单快速） #

如果不需要复杂逻辑，直接用WAF创建规则：

• 新建Web ACL并关联到CloudFront分发
• 添加规则：检查请求头中是否存在X-App-Auth，不存在则执行“阻止”动作

当前fetch转blob的方式需要等待全量下载完成，针对视频可以用流式播放方案，核心是利用Media Source Extensions（MSE）或自适应码率协议（HLS/DASH）实现边下边播，同时携带自定义请求头。

方案1：Media Source Extensions（MSE）流式处理 #

直接通过fetch的ReadableStream分段读取视频数据，实时喂给video标签：

async function streamVideoWithHeaders(videoUrl, customHeaders) {
    const videoElement = document.querySelector('#your-video-tag-id');
    const mediaSource = new MediaSource();
    videoElement.src = URL.createObjectURL(mediaSource);

    mediaSource.addEventListener('sourceopen', async () => {
        // 根据视频编码设置MIME类型，示例为MP4(H.264/AAC)
        const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
        const response = await fetch(videoUrl, { headers: customHeaders });
        
        const reader = response.body.getReader();
        let bufferChunks = [];

        while (true) {
            const { done, value } = await reader.read();
            if (done) break;

            bufferChunks.push(value);
            // 当SourceBuffer空闲时，追加数据
            if (!sourceBuffer.updating) {
                const combinedChunk = new Uint8Array([].concat(...bufferChunks));
                sourceBuffer.appendBuffer(combinedChunk);
                bufferChunks = [];
            }
        }

        // 处理最后剩余的片段
        if (bufferChunks.length > 0 && !sourceBuffer.updating) {
            const combinedChunk = new Uint8Array([].concat(...bufferChunks));
            sourceBuffer.appendBuffer(combinedChunk);
        }
    });
}

// 调用示例
streamVideoWithHeaders('你的CloudFront视频URL', { 'X-App-Auth': '你的专属验证值' });

注意事项：

• 视频编码需支持MSE（主流的H.264/AAC编码MP4都兼容）
• CloudFront和S3需配置CORS，允许Range请求和你的应用域名跨域
• 确保响应返回206 Partial Content状态码（CloudFront默认支持Range请求）

方案2：HLS/DASH自适应码率播放 #

如果视频是HLS（.m3u8）或DASH格式，可以用专业播放器库（比如hls.js）实现流式播放，同时配置请求头：

// 先引入hls.js库
const videoElement = document.querySelector('#your-video-tag-id');

if (Hls.isSupported()) {
    const hls = new Hls({
        // 配置请求头
        xhrSetup: (xhr) => {
            xhr.setRequestHeader('X-App-Auth', '你的专属验证值');
        }
    });
    hls.loadSource('你的CloudFront HLS播放列表URL');
    hls.attachMedia(videoElement);
}

这种方案优势是支持自适应码率（根据网络情况切换清晰度），播放体验更流畅，但需要提前将视频转成HLS/DASH格式，CloudFront也可配置对应的缓存策略优化分发。

内容的提问来源于stack exchange，提问作者barba