Django 拒绝在 iframe 中显示 YouTube 视频，因为它将“X-Frame-Options”设置为“SAMEORIGIN”

Posted 2023-02-24

【中文标题】Django 拒绝在 iframe 中显示 YouTube 视频，因为它将“X-Frame-Options”设置为“SAMEORIGIN”

【英文标题】：Django refused to display YouTube video in a iframe because it set 'X-Frame-Options' to 'SAMEORIGIN'

【发布时间】：2016-07-13 03:22:05

【问题描述】：

我的 html 页面如下所示：

 <div>
    <iframe margin="0" padding="0" border="none"   frameBorder="0"
      ng-src="exercise_video_url">
    </iframe>  
  </div>

'exercise_video_url' 我在控制器中设置如下：

$http.get("https://localhost:8000/api/exercises/initial/").then(function(response)

  $scope.initial_data=response.data;

  angular.forEach($scope.initial_data, function(item)

               $scope.exercise_type=item.exercise_type;
               $scope.exercise_description=item.description;
               $scope.exercise_video_url=$sce.trustAsResourceUrl(item.video_url);
)

我正在从我的 Django 视图中获取特定的锻炼相关信息，锻炼模型有一个 video_url 作为属性。我在某处阅读并在我的角度控制器中注入了 $sce 服务。

视频链接本身看起来像'https://youtu.be/******' --> * 是几个随机字符。如果您在浏览器中点击此链接或直接将其作为 ng-src 的来源，则此链接可以独立工作。

我还尝试在我的 settings.py 中评论 'django.middleware.clickjacking.XFrameOptionsMiddleware'

【问题讨论】：

您收到的完整错误是什么？

拒绝在框架中显示“youtube.com/watch?v=ItIEG9d2ZH0*”，因为它将“X-Frame-Options”设置为“SAMEORIGIN”。我在我的 chrome 控制台中看到了这个错误。我在这里用 * 修改了网址，因为它是私人视频！

embed youtube video - Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'的可能重复

是的，问题是一样的，但在公认的解决方案中，他在 iframe 中对 url 进行了硬编码，这也适用于我。但是我想像这样添加它 url 。

然后将其传递为 url ...您遇到的问题仍然是该问题的重复。 url 只需更改为正确的格式即可。

【参考方案1】：

它是您使用的 YouTube 网址，它需要是嵌入版本。我刚刚在我的网站上修复了类似的问题并工作了。

由于您将其嵌入到 iframe 中，因此只能使用 YouTube 嵌入网址。

所以示例不要使用短 url 嵌入 iframe，使用嵌入 url。

错误： <iframe width="1260" height="709" src="<iframe width="1260" height="709" src="https://www.youtube.com/watch?v=xWRNBOXoLf8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

正确： <iframe width="1260" height="709" src="<iframe width="1260" height="709" src="https://www.youtube.com/embed/xWRNBOXoLf8?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

使用https://www.youtube.com/embed/xWRNBOXoLf8?ecver=1