Browse Source

Load Youtube sandbox content on demand.

pull/208/head
Simon Eisenmann 10 years ago
parent
commit
ff8150569b
  1. 5
      html/sandboxes/youtubevideo_sandbox.html
  2. 36
      static/js/directives/youtubevideo.js

5
static/partials/youtubevideo_sandbox.html → html/sandboxes/youtubevideo_sandbox.html

@ -2,7 +2,8 @@ @@ -2,7 +2,8 @@
<html>
<head>
<title>YouTube Player Sandbox</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src __PARENT_ORIGIN__ https://www.youtube.com https://s.ytimg.com 'unsafe-eval'; frame-src https://www.youtube.com; style-src 'unsafe-inline'">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src <%.Origin%> https://www.youtube.com https://s.ytimg.com 'unsafe-eval'; frame-src https://www.youtube.com; style-src 'unsafe-inline'">
<base href="<%.Cfg.B%>">
<style type="text/css">
html, body {
height:100%;
@ -22,6 +23,6 @@ @@ -22,6 +23,6 @@
</head>
<body>
<div id="youtubeplayer"></div>
<script src="__YOUTUBE_SANDBOX_JS_URL__" data-parent-origin="__PARENT_ORIGIN__"></script>
<script src="<%.Cfg.S%>/js/sandboxes/youtube.js" data-parent-origin="<%.Origin%>"></script>
</body>
</html>

36
static/js/directives/youtubevideo.js

@ -20,9 +20,9 @@ @@ -20,9 +20,9 @@
*/
"use strict";
define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo.html', 'text!partials/youtubevideo_sandbox.html', 'bigscreen'], function(require, $, _, moment, template, sandboxTemplate, BigScreen) {
define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo.html', 'bigscreen'], function(require, $, _, moment, template, BigScreen) {
return ["$window", "$document", "mediaStream", "alertify", "translation", "safeApply", "appData", "$q", "restURL", "sandbox", function($window, $document, mediaStream, alertify, translation, safeApply, appData, $q, restURL, sandbox) {
return ["$window", "$document", "mediaStream", "alertify", "translation", "safeApply", "appData", "$q", "restURL", "sandbox", "$http", function($window, $document, mediaStream, alertify, translation, safeApply, appData, $q, restURL, sandbox, $http) {
var YOUTUBE_IFRAME_API_URL = "//www.youtube.com/iframe_api";
@ -106,25 +106,14 @@ define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo @@ -106,25 +106,14 @@ define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo
var initialState = null;
var sandboxApi = null;
var createSandboxApi = function(force) {
var createSandboxApi = function(force, template) {
if (sandboxApi && force) {
sandboxApi.destroy();
sandboxApi = null;
}
if (!sandboxApi) {
var template = sandboxTemplate;
template = template.replace(/__PARENT_ORIGIN__/g, $window.location.protocol + "//" + $window.location.host);
template = template.replace(/__YOUTUBE_SANDBOX_JS_URL__/g, restURL.createAbsoluteUrl(require.toUrl('sandboxes/youtube') + ".js"));
// NOTE(longsleep): Youtube needs to have allow-same-origin
// on the sandbox to function. For this reason, the sandbox
// frame is loaded from a blob: URL. Bottom line is that the
// CSP in the meta tag then does get ignored by Firefox and
// the global CSP is used instead. Means if a secure CSP is
// set, Youtube player does not work in Firefox. See
// https://bugzilla.mozilla.org/show_bug.cgi?id=663570 for details.
sandboxApi = sandbox.createSandbox($(".youtubeplayercontainer", $element)[0], template, null, "allow-scripts allow-same-origin", "youtubeplayer");
sandboxApi.e.on("message", function(event, message) {
var msg = message.data;
var data = msg[msg.type] || {};
@ -551,12 +540,25 @@ define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo @@ -551,12 +540,25 @@ define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo
}
};
$scope.loadYouTubeAPI = function() {
createSandboxApi(true);
$scope.loadYouTubeAPI = function(soft) {
var url = restURL.sandbox("youtubevideo");
var baseRegex = /<base href=.*>/i;
// NOTE(longsleep): Youtube needs to have allow-same-origin
// on the sandbox to function. For this reason, the sandbox
// frame is loaded from a blob: URL. Bottom line is that the
// CSP in the meta tag then does get ignored by Firefox and
// the global CSP is used instead. Means if a secure CSP is
// set, Youtube player does not work in Firefox. See
// https://bugzilla.mozilla.org/show_bug.cgi?id=663570 for details.
$http.get(url).success(function(data) {
var base = '<base href="'+restURL.createAbsoluteUrl("")+'">';
data = data.replace(baseRegex, base);
createSandboxApi(!soft, data);
});
};
$scope.showYouTubeVideo = function() {
createSandboxApi();
$scope.loadYouTubeAPI(true);
$scope.layout.youtubevideo = true;
$scope.$emit("mainview", "youtubevideo", true);
if (currentToken) {

Loading…
Cancel
Save