无法使用 AWS CloudFront 签名 Cookies 播放 HLS m3u8 文件

Question

I am working on a project where I will need to play HLS encrypted video (.m3u8) file.我正在做一个需要播放 HLS 加密视频 (.m3u8) 文件的项目。 I am using CloudFront and signed cookies to secure the content.我正在使用 CloudFront 并签署 cookies 来保护内容。 I am able to play.m3u8 file without signed cookies but when I use signed cookies then cookies do not get send in requests.我可以在没有签名的 cookies 的情况下播放.m3u8 文件，但是当我使用签名的 cookies 时，cookies 不会收到发送请求。

I am using the alternate domain for CloudFront distribution and I confirm that apart from.m3u8 file I am able to access all other files using signed cookies.我正在使用备用域进行 CloudFront 分发，并且我确认除了 .m3u8 文件之外，我还可以使用签名的 cookies 访问所有其他文件。

After research, I found that if I set withCredentials to true like the following code then signed cookies will be send in request:经过研究，我发现如果我像下面的代码一样将withCredentials设置为 true，那么签名的 cookies 将在请求中发送：

player.ready(function() {
    player.src({
        src: 'https://protected.example.com/output-plain/art.m3u8',
        type: 'application/x-mpegURL',
        withCredentials: true
    });
});

This code works and signed cookies are getting send in request however I started getting a new error which is:此代码有效并且签名的 cookies 正在收到发送请求，但是我开始收到一个新错误，即：

Access to XMLHttpRequest at 'https://protected.example.com/output-plain/art.m3u8undefined' from origin 'https://example.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Then I found that I have to set Access-Control-Allow-Credentials to true.然后我发现我必须将Access-Control-Allow-Credentials设置为 true。 however, this does not work for me.但是，这对我不起作用。

I am using video.js library, I have also tried hls.js and getting the same error and stuck at same place.我正在使用 video.js 库，我也尝试过 hls.js 并得到相同的错误并卡在同一个地方。

I am stuck on this issue for the last 7 days and I think AWS docs are really overwhelming, I have referred many questions on SO and issues on Github but still no luck.在过去的 7 天里，我一直被困在这个问题上，我认为 AWS 文档真的是压倒性的，我已经提到了很多关于 SO 的问题和关于 Github 的问题，但仍然没有运气。 Hope someone will help me here.希望有人会在这里帮助我。

Here is the screenshot of CloudFront distribution behavior:这是 CloudFront 分配行为的屏幕截图：

And here is my php and js code;这是我的 php 和 js 代码； index.php:索引.php：

<?php

header("Access-Control-Allow-Origin: https://protected.example.com");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 1000");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");

?>

<!DOCTYPE html>
<html>
<head>
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
</head>


<body>

<video
        id="video_player"
        class="video-js"
        controls
        preload="auto"
        poster="//vjs.zencdn.net/v/oceans.png"
        data-setup='{}'
        width=600 height=300>
      
    </video>

<script src="https://vjs.zencdn.net/7.10.2/video.js"></script>

<script>
    var player = videojs('video_player')

    player.responsive(true);

    player.ready(function() {
        player.src({
            src: 'https://protected.example.com/output-plain/art.m3u8',
            type: 'application/x-mpegURL',
            withCredentials: true
        });
    });
</script>

</body>
</html>

Here is S3 bucked CORS Policy:这是 S3 降压 CORS 策略：

[
    {
        "AllowedHeaders": [
            ""
        ],
        "AllowedMethods": [
            "POST",
            "GET",
            "PUT",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Thank you in advance.先感谢您。

Answer 1

The answer is within the browser's error message, "The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'."答案在浏览器的错误消息中，“当请求的凭据模式为 'include' 时，响应中的 'Access-Control-Allow-Origin' header 的值不能是通配符 '*'。” Your S3 bucket's CORS policy cannot use a wildcard for the AllowedOrigins value.您的 S3 存储桶的 CORS 策略不能对 AllowedOrigins 值使用通配符。

Also your empty AllowedHeaders value may be removing the Host value from the preflight request check, so let's set it to a wildcard just to be safe.此外，您的空 AllowedHeaders 值可能会从预检请求检查中删除 Host 值，因此为了安全起见，我们将其设置为通配符。

If you update your S3 bucket's CORS policy to this, it should resolve the issue:如果您将 S3 存储桶的 CORS 策略更新为此，它应该可以解决问题：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "POST",
            "GET",
            "PUT",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://example.com",
            "https://protected.example.com"
        ],
        "ExposeHeaders": []
    }
]

无法使用 AWS CloudFront 签名 Cookies 播放 HLS m3u8 文件

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-12-30 11:58:59

无法使用 AWS CloudFront 签名 Cookies 播放 HLS m3u8 文件

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-12-30 11:58:59

解决方案1
2 已采纳 2020-12-30 11:58:59