Angular 16中如何隐藏检查元素时暴露的Dropbox视频URL？

我正在开发一个个人视频播放网站，基于Angular 16框架，目前通过给Dropbox链接末尾添加raw=1来获取视频数据，视频链接存储在API中，页面加载时从API拉取。现在遇到的问题是，用户通过检查页面元素就能看到视频URL，需要隐藏该链接避免被轻易获取。

相关代码 #

loadVideo(videoLink: string): void {
    this.videoLink = videoLink;
     setTimeout(() => {
    this.videoPlayer.nativeElement.src = this.videoLink;
    this.videoPlayer.nativeElement.load();
        this.videoPlayer.nativeElement.play();
        this.isLoading = false;
    }, 2000);
}

ngAfterViewInit() {
    this.initializeVideo();
    this.ngAfterViewInit2();
    if(this.ClassDetails?.VideoLink != undefined){
        this.videoPlayer.nativeElement.load();
        this.ClassProgress = this.ClassDetails.Progress ? this.ClassDetails.Progress : 0;
    }
}

解决方案 #

1. 使用Dropbox临时签名链接 #

利用Dropbox官方API生成带过期时间的临时签名链接，前端不再直接接触原始Dropbox链接：

• 后端调用Dropbox的create_shared_link_with_settings接口，设置expires参数指定链接有效期，同时可限制访问权限。
• 前端仅需请求后端接口获取该临时链接，再赋值给video元素。临时链接过期后无法复用，大幅降低链接泄露的风险。

2. 后端代理视频流（最安全的方案） #

通过后端服务器中转视频请求，完全隐藏真实的Dropbox URL：

• 后端创建代理接口（如/api/video/{videoId}），当前端请求该接口时，后端去请求Dropbox的视频资源，再将数据流返回给前端。
• 前端将video的src设置为后端代理接口地址，用户在页面元素中只能看到后端接口URL，无法直接获取Dropbox链接。
• Angular代码修改示例：

// 需注入HttpClient和定义销毁信号
import { HttpClient } from '@angular/common/http';
import { Subject, takeUntil } from 'rxjs';

private destroy$ = new Subject<void>();

constructor(private http: HttpClient) {}

loadVideo(videoId: string): void {
  this.http.get(`/api/video/${videoId}`, { responseType: 'blob' })
    .pipe(takeUntil(this.destroy$))
    .subscribe(blob => {
      const blobUrl = URL.createObjectURL(blob);
      this.videoPlayer.nativeElement.src = blobUrl;
      this.videoPlayer.nativeElement.load();
      this.videoPlayer.nativeElement.play();
      this.isLoading = false;
      // 组件销毁时释放Blob URL
      this.destroy$.subscribe(() => URL.revokeObjectURL(blobUrl));
    });
}

3. 基础隐藏（仅防普通用户） #

如果只是想避免在元素属性中直接显示明文URL，可使用Angular的DomSanitizer转换为安全资源URL，但资深用户仍可通过抓包获取真实链接：

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

loadVideo(videoLink: string): void {
  const safeUrl: SafeResourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl(videoLink);
  setTimeout(() => {
    this.videoPlayer.nativeElement.src = safeUrl as string;
    this.videoPlayer.nativeElement.load();
    this.videoPlayer.nativeElement.play();
    this.isLoading = false;
  }, 2000);
}

注意事项 #

没有绝对的方法能完全阻止用户获取视频资源（因为视频需在浏览器播放），上述方案仅能提高获取门槛。优先选择Dropbox临时链接或后端代理方案，安全性更高。

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