Невозможно воспроизвести файл HLS m3u8 с файлами cookie, подписанными AWS CloudFront.

Я работаю над проектом, в котором мне нужно будет воспроизвести зашифрованный видеофайл HLS (.m3u8). Я использую CloudFront и подписанные файлы cookie для защиты контента. Я могу воспроизводить файл .m3u8 без подписанных файлов cookie, но когда я использую подписанные файлы cookie, файлы cookie не отправляются в запросах.

Я использую альтернативный домен для распространения CloudFront и подтверждаю, что, кроме файла .m3u8, я могу получить доступ ко всем другим файлам с помощью подписанных файлов cookie.

После исследования я обнаружил, что если установить withCredentials в значение true, как в следующем коде, подписанные файлы cookie будут отправлены в запросе:

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

Этот код работает, и подписанные файлы cookie отправляются по запросу, однако я начал получать новую ошибку:

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>

Вот политика CORS с поддержкой S3:

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

Заранее спасибо.


amazon-cloudfront video.js amazon-signed-cookie hls.js vivado-hls
person Faisal Shaikh    schedule 21.12.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Ответ находится в сообщении об ошибке браузера. Значение заголовка «Access-Control-Allow-Origin» в ответе не должно быть подстановочным знаком «*», когда режим учетных данных запроса «включить». Политика CORS вашей корзины S3 не может использовать подстановочный знак для значения AllowedOrigins.

Кроме того, ваше пустое значение AllowedHeaders может удалять значение Host из предварительной проверки запроса, поэтому на всякий случай установим для него подстановочный знак.

Если вы обновите политику CORS корзины S3 до этой, это должно решить проблему:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "POST",
            "GET",
            "PUT",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://example.com",
            "https://protected.example.com"
        ],
        "ExposeHeaders": []
    }
]
person Brian Burton    schedule 30.12.2020
comment
Сейчас это работает. Большое спасибо. - person Faisal Shaikh; 31.12.2020
comment
Привет Брайан. он работает в производстве. Но я не могу получить доступ с локального хоста. Я изменил свой компьютерный хост на dev.example.com, а мой производственный URL-адрес — example.com. в основном, всякий раз, когда я пытаюсь получить доступ к видео с dev.example.com (localhsot), он говорит ``` 'dev.example.com» заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». ``` - person Anwarul Islam; 20.01.2021
comment
Вам нужно добавить dev.example.com в свою политику CORS S3 в AllowedOrigins. - person Brian Burton; 22.01.2021