hls.js AWSを使用しているCORSクラウドフロントのCookieに関する問題

Question

Cloudfront HLS機能を使用してビデオストリーミングを設定しようとしていますが、リクエストでクレデンシャルCookieを送信するのに問題があります。

クッキーを転送し、アクセス制御ヘッダーを転送するようにCloudfrontが既に設定されています。私はまた、GET、HEADを含めるように私のS3 CORSポリシーを設定しました。

問題は、私がxhr.withCredentials = trueを設定していてもセッションでクッキーが定義されていても、Chromeのコンソールを使用してリクエストを見ると、HLSリクエストクッキーはありません。その結果、私はクラウドフロントから、資格情報のクッキーを含める必要があるというエラー応答を受け取ります。

コード： まず、サーバーにajaxリクエストを実行してCookieを生成します。以下のよう

function test(){ 
    if (Hls.isSupported()) { 
    var video = document.getElementById('video'); 
    var config = { 
    debug: true, 
    xhrSetup: function (xhr,url) { 
     xhr.withCredentials = true; // do send cookie 
    xhr.setRequestHeader("Access-Control-Allow-Headers","Content-Type, Accept, X-Requested-With"); 
     xhr.setRequestHeader("Access-Control-Allow-Origin","http://sybdomain.domain.com:8080"); 
    xhr.setRequestHeader("Access-Control-Allow-Credentials","true"); 
    } 
    }; 
    var hls = new Hls(config); 
    // bind them together 
    hls.attachMedia(video); 
    hls.on(Hls.Events.MEDIA_ATTACHED, function() { 
    console.log("video and hls.js are now bound together !"); 
    hls.loadSource("http://cloudfrontDomain.net/small.m3u8"); 
    hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) { 
     console.log("manifest loaded, found " + data.levels.length + " quality level"); 
    }); 
    }); 
} 
video.play(); 
} 

：

$.ajax(
{ 
type: 'GET', 
url: 'http://subdomain.mydomain.com:8080/service- 
webapp/rest/resourceurl/cookies/98400738-a415-4e32-898c-9592d48d1ad7', 
success: function (data) { 
     playMyVideo(); 
}, 
headers: { "Authorization": 'Bearer XXXXXX' } 
}); 

クッキーが保存されるとテスト機能がHLS.jsを使用して、私のビデオを再生するために呼び出されます。サーバーは、ブラウザでのセッションクッキーとして記憶された3セットクッキーヘッダを返します。あなたはHLS OPTIONSの下に確認して、リクエストをGETできるセッションクッキーを設定していない：

HLS OPTIONS要求：

OPTIONS /hls/98400738-a415-4e32-898c-9592d48d1ad7/small.m3u8 HTTP/1.1 
Host: cloudfrontDomain.net 
Connection: keep-alive 
Access-Control-Request-Method: GET 
Origin: subdomain.mydomain.com:8080 
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.104 Safari/537.36 
Access-Control-Request-Headers: access-control-allow-credentials,access-control-allow-headers,access-control-allow-origin 
Accept: */* 
Referer: http://subdomain.mydomain.com:8080/play.html 
Accept-Encoding: gzip, deflate 
Accept-Language: en-US,en;q=0.8,es;q=0.6 

CloudFrontの応答：クッキーを逃す

HTTP/1.1 200 OK 
Content-Length: 0 
Connection: keep-alive 
Date: Fri, 07 Jul 2017 00:16:31 GMT 
Access-Control-Allow-Origin: http://subdomain.mydomain.com:8080 
Access-Control-Allow-Methods: GET, HEAD 
Access-Control-Allow-Headers: access-control-allow-credentials, access-control-allow-headers, access-control-allow-origin 
Access-Control-Max-Age: 3000 
Access-Control-Allow-Credentials: true 
Server: AmazonS3 
Vary: Origin,Access-Control-Request-Headers,Access-Control-Request-Method 
Age: 845 
X-Cache: Hit from cloudfront 
Via: 1.1 cloudfrontDomain.net (CloudFront) 
X-Amz-Cf-Id: XXXXXX 

HLS、その後のGETリクエスト：私はこれを理解しようとして4日間を過ごしてきた

GET /hls/98400738-a415-4e32-898c-9592d48d1ad7/small.m3u8 HTTP/1.1 
Host: cloudfrontDomain.net 
Connection: keep-alive 
Origin: http://subdomain.mydomain.com:8080 
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.104 Safari/537.36 
Access-Control-Allow-Origin: http://subdomain.mydomain.com:8080 
Access-Control-Allow-Credentials: true 
Access-Control-Allow-Headers: Content-Type, Accept, X-Requested-With 
Accept: */* 
Referer: http://subdomain.mydomain.com:8080/play.html 
Accept-Encoding: gzip, deflate 
Accept-Language: en-US,en;q=0.8,es;q=0.6 

。私はたくさんの研究をしましたが、私は解決策を理解できません。私はCORSには新しいので、多分私はいくつかの原則を理解していない。私は、クッキーがセッションに保存されていると思ったが、あなたが資格情報でxhrを有効にした場合に設定されるが、そうではないようだ。

もう1つ注目したのは、HLS.jsによって生成されたGETリクエストがxmlhttprequestヘッダーを設定していないことです。

ありがとうございました:)

Answer 1

私はついにそれを動作させることができました。助けてくれてありがとう！ CORSの原則がどのように機能し、awsサービスを適切に設定するかを理解していないということが分かりました。主な問題は、クラウドフロントを使用してWebサービスとs3バケットの両方にサービスを提供することで、クロスドメイン要求を回避することです。私が追加したい1つの重要な注意点は、awsで行った変更が伝播するのを待たなければならないということです。新しいaws開発者として私はそれを知らなかったし、何の効果もなかった変更を加えることに非常に不満を持っていた。ここにソリューションがあります：

1）S3バケットを作成します。

2）Cloudfrontディストリビューションを作成します。

3）ディストリビューションでは、デフォルトの起点としてあなたのWebサービスドメインを設定します。

4）2番目の起点を追加し、すべての.m3u8と.tsファイルをS3バケットに転送する動作をディストリビューションに追加します。

5）バケット原点を追加するときは、アクセスを制限し、バケットポリシーのチェックボックスを更新することを確認してください。

6）バケット配信の動作では、すべてのホワイトリストのヘッダーとCookieが転送されていることを確認してください。これはすべてawsコンソールで設定できます。

7）サービスで異なるポートを使用している場合は、それらのポートをディストリビューションにも設定してください。

8）あなたのS3バケットの設定に移動し、次へCORSの設定を更新します。

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
<CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <AllowedMethod>HEAD</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>*</AllowedHeader> 
</CORSRule> 
</CORSConfiguration> 

あなたには、以下の設定を設定するHLS.jsを使用している場合にすることが重要である：

var config = { 
debug: true, 
xhrSetup: function (xhr,url) { 
xhr.withCredentials = true; // do send cookie 
xhr.setRequestHeader("Access-Control-Allow-Headers","Content-Type, Accept, X-Requested-With"); 
    xhr.setRequestHeader("Access-Control-Allow-Origin","http://sybdomain.domain.com:8080"); 
xhr.setRequestHeader("Access-Control-Allow-Credentials","true"); 
} 
}; 
var hls = new Hls(config); 

その他の重要なメモ：

ウェブサービスでCookieを提供する場合、パスを「/」に設定すると、ドメイン内のすべてのリクエストに適用されます。