[JAVA] Spielen Sie Videos mit eingeschränktem Zugriff (HLS-Format) unter CloudFront mit Video.js mit signierten Cookies ab

Der Titel ist immer noch lang (als ich bei Google gesucht habe, wurde er in der Mitte des Titels abgeschnitten ... Ich dachte, es wäre das Ende, das jemand registriert hat), aber ** Richten Sie signierte Cookies (für CloudFront) mit benutzerdefinierten Richtlinien mithilfe des AWS SDK für Java ein ** Videos im HLS-Format (.m3u8-Datei + .ts-Datei, unterteilt in mehrere Teile) werden in der in Schritt 1 festgelegten Umgebung abgelegt und aus einer externen Anwendung gelesen.

Für die Videowiedergabe im HLS-Format auf Video.js ist der folgende Artikel hilfreich (obwohl die Version von Video.js etwas alt ist). ** Streaming von Videos im HLS-Format mit Video.js (akiyoko blog) **

** 6/5 Postscript: Das Verfahren zum Ändern der Verhaltenseinstellungen von CloudFront wurde weggelassen und daher korrigiert. ** ** **

0. Annahme

Zuerst, ** Richten Sie signierte Cookies (für CloudFront) mit benutzerdefinierten Richtlinien mithilfe des AWS SDK für Java ein ** Es wird davon ausgegangen, dass CloudFront und S3 wie in gezeigt eingestellt sind. Darüber hinaus muss die Testanwendung mithilfe von Spring Boot in der lokalen Entwicklungsumgebung implementiert werden (Änderung der Hostdatei erforderlich).

Die Domain zum Veröffentlichen der Anwendung oder des Inhalts sollte mit dem Artikel in ↑ übereinstimmen. ** Anwendung: https://hmatsu47.site/** → ** Wenn Sie auf "https://hmatsu47.site/set-cookie" ** zugreifen, ändert sich dies in ** "https://hmatsu47.site/index.html" ** und der Videoplayer wird angezeigt. ** Videoinhalt: https://www.hmatsu47.site/** → S3-Bucket ** "testmatsu signiertes Cookie" ** Direkt unter ** "sample.m3u8" ** Datei und die in derselben Datei beschriebene geteilte Videodatei (** XXXXX.ts **) werden gespeichert.

In jedem Fall lesen / schreiben Sie bitte entsprechend Ihrer eigenen Umgebung.

1. Ändern Sie die Einstellungen für das CloudFront-Verhalten

Ändern Sie in CloudFront die Verhaltenseinstellungen der Zielverteilung und speichern Sie die an den S3-Bucket weitergeleitete HTTP-Anforderung, damit ** "Origin" ** im Anforderungsheader nicht ausgeschlossen wird. cf_whitelist.jpg

2. Ändern Sie die S3-Bucket-Einstellungen (CORS).

Verwenden Sie beim S3-Bucket-Zugriff den CORS-Konfigurationseditor, um die Einstellungen so zu ändern, dass ein originalübergreifender Skriptzugriff möglich ist.

CORS-Einstellungen


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

3. Ändern Sie die Anwendung

Im vorherigen Artikel ** "[2. Code zum Setzen signierter Cookies in der Anwendung implementieren](http://qiita.com/hmatsu47/items/8edd5cfde92bfd0d5a6c#2-%E3%82%A2%E3%83] % 97% E3% 83% AA% E3% 82% B1% E3% 83% BC% E3% 82% B7% E3% 83% A7% E3% 83% B3% E3% 81% AB% E7% BD% B2 % E5% 90% 8D% E4% BB% 98% E3% 81% 8Dcookie% E3% 82% 92% E3% 82% BB% E3% 83% 83% E3% 83% 88% E3% 81% 99% E3 % 82% 8B% E3% 82% B3% E3% 83% BC% E3% 83% 89% E3% 82% 92% E5% AE% 9F% E8% A3% 85% E3% 81% 99% E3% 82 % 8B) "" SetCookieController.java " Ändern Sie das ** nach der Kommentarzeile (" * // Übergang durch Umleitung * ") ** am Ende, um die P3P-Kompaktrichtlinie zum Antwortheader hinzuzufügen. Schreiben Sie es mit (für IE11) so um, dass es auf der lokalen Seite in index.html übergeht.

SetCookieController.Java (geänderter Teil = nur Ende)


		res.setHeader("P3P", "CP=\"[P3P Compact Policy]\"");
		//Übergang durch Umleitung
		res.sendRedirect("index.html");
	}
}

Die P3P-Kompaktrichtlinie ist so festgelegt, dass IE11 Cookies vom Skript an einen anderen Ursprung senden kann (Site mit einem anderen FQDN oder einer anderen Protokoll- / Portnummer). Auch wenn der Inhalt nicht korrekt ist, scheint es zu funktionieren, wenn eine beliebige Zeichenfolge festgelegt ist. Da es in anderen Browsern als dem Internet Explorer noch nicht funktioniert, ist es außerdem möglich, ein Cookie (per Skript) an einen anderen Ursprung zu senden, auch wenn es nicht angegeben ist.

4. Platzieren Sie die für die Videowiedergabe erforderlichen Dateien

Bereiten Sie Video.js, erforderliche .js-Dateien usw. und index.html vor, um sie aufzurufen.

Erstellen Sie unten in der Spring Boot-Umgebung einen ** "statischen" ** Ordner unter ** "src / main / resources" **. Bitte bereiten Sie die Dateien zu Video.js vor, indem Sie sie herunterladen.

index.html


<html>
  <head>
    <title>HLS test</title>
    <link href="/video-js.5.19.2/video-js.min.css" rel="stylesheet">
    <script src="/video-js.5.19.2/video.min.js"></script>
    <script src="/video-js.5.19.2/videojs-contrib-media-sources.min.js"></script>
    <script src="/video-js.5.19.2/videojs-contrib-hls.min.js"></script>
    <script>
      videojs.options.flash.swf = "/video-js.5.19.2/video-js.swf"
    </script>
  </head>
  <body>
    <video id="test" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="[Breite des Videoplayers]" height="[Selbe Größe]">
    </video>
    <script>
      var player = videojs('test', {techOrder: ['flash', 'html5']});

      player.src({
        src: 'https://www.hmatsu47.site/sample.m3u8',
        type: 'application/x-mpegURL',
        withCredentials: true
      });
    </script>    
  </body>
</html>

** "withCredentials" ** wird auf ** "true" ** gesetzt, um signierte Cookies vom Skript an CloudFront zu senden.

In IE11 gibt es ein Problem beim Abspielen von Videos im HLS-Format mit Video.js + HTML5, sodass diese mit Flash abgespielt werden. Übrigens habe ich angegeben, das lokale "video-js.swf" zu lesen, aber nur IE11 ignoriert diese Spezifikation und es wird vom CDN heruntergeladen ... Infolgedessen wird angenommen, dass diese Spezifikation nur verhindern soll, dass die externe Datei von einem anderen Browser als dem IE gelesen wird.

5. Laden Sie die Videodatei in den S3-Bucket hoch

Laden Sie auch die Datei "sample.m3u8" und die geteilte Videodatei in den S3-Bucket hoch.

6. Testen Sie die Videowiedergabe

Mit der oben genannten Arbeit haben Sie eine Umgebung, in der Sie Videos abspielen können, die durch signierte Cookies geschützt sind.

Öffnen Sie in Ihrem lokalen Browser ** "https://hmatsu47.site/set-cookie" **, um den Videowiedergabebildschirm anzuzeigen, und klicken Sie auf die Wiedergabetaste, um die Videowiedergabe zu starten.

Darüber hinaus ist bei der Wiedergabe mit Flash mit IE11 der Ladezeitpunkt des geteilten Videos langsamer als bei der Wiedergabe mit HTML5, sodass das Video je nach Wiedergabegerät und Zeilengeschwindigkeit ruckartig werden kann. Bitte seien Sie vorsichtig.

7. Ergänzung / Über Cookies und CORS

Es ist kompliziert, aber der Umfang von Cookies und die "Zugriffskontrolle zwischen Ursprüngen" von CORS sind unterschiedlich.

** ■ Cookie-Bereich: Angegeben durch Domain-Attribut, Secure-Attribut, Path-Attribut, HttpOnly-Attribut **

** ■ CORS: Steuert den Zugriff über Ursprünge hinweg (Kombination aus FQDN und Protokollportnummer) **

Mit anderen Worten

darüber.

In diesem Beispiel wird das Attribut "HttpOnly" hinzugefügt, wenn ein signiertes Cookie mit Java-Code generiert wird. Dies liegt daran, dass Sie im Quell-JavaScript nicht auf dieses Cookie verweisen müssen. Infolgedessen funktioniert es auch mit dem Attribut "HttpOnly" einwandfrei.

Recommended Posts

Spielen Sie Videos mit eingeschränktem Zugriff (HLS-Format) unter CloudFront mit Video.js mit signierten Cookies ab
[Rails] Zugriff auf signierte / verschlüsselte Cookies mit Anforderungsspezifikation