無法使用 AWS CloudFront 簽名 Cookies 播放 HLS m3u8 文件

Question

我正在做一個需要播放 HLS 加密視頻 (.m3u8) 文件的項目。 我正在使用 CloudFront 並簽署 cookies 來保護內容。 我可以在沒有簽名的 cookies 的情況下播放.m3u8 文件，但是當我使用簽名的 cookies 時，cookies 不會收到發送請求。

我正在使用備用域進行 CloudFront 分發，並且我確認除了 .m3u8 文件之外，我還可以使用簽名的 cookies 訪問所有其他文件。

經過研究，我發現如果我像下面的代碼一樣將withCredentials設置為 true，那么簽名的 cookies 將在請求中發送：

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

此代碼有效並且簽名的 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.

然后我發現我必須將Access-Control-Allow-Credentials設置為 true。 但是，這對我不起作用。

我正在使用 video.js 庫，我也嘗試過 hls.js 並得到相同的錯誤並卡在同一個地方。

在過去的 7 天里，我一直被困在這個問題上，我認為 AWS 文檔真的是壓倒性的，我已經提到了很多關於 SO 的問題和關於 Github 的問題，但仍然沒有運氣。 希望有人會在這里幫助我。

這是 CloudFront 分配行為的屏幕截圖：

這是我的 php 和 js 代碼； 索引.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>

這是 S3 降壓 CORS 策略：

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

先感謝您。

Answer 1

答案在瀏覽器的錯誤消息中，“當請求的憑據模式為 'include' 時，響應中的 'Access-Control-Allow-Origin' header 的值不能是通配符 '*'。” 您的 S3 存儲桶的 CORS 策略不能對 AllowedOrigins 值使用通配符。

此外，您的空 AllowedHeaders 值可能會從預檢請求檢查中刪除 Host 值，因此為了安全起見，我們將其設置為通配符。

如果您將 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