Create sandbox iframes on demand rather than always by template code.

static/js/directives/odfcanvas.js

@@ -31,14 +31,16 @@ define(['require', 'underscore', 'jquery', 'text!partials/odfcanvas_sandbox.html
 		var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
 
 			var container = $($element);
-
 			var odfCanvas;
-
 			var template = sandboxTemplate;
 			template = template.replace(/__PARENT_ORIGIN__/g, $window.location.protocol + "//" + $window.location.host);
 			template = template.replace(/__WEBODF_SANDBOX_JS_URL__/g, restURL.createAbsoluteUrl(require.toUrl('sandboxes/webodf') + ".js"));
 			template = template.replace(/__WEBODF_URL__/g, restURL.createAbsoluteUrl(require.toUrl('webodf') + ".js"));
-			var sandboxApi = sandbox.createSandbox($("iframe", container)[0], template);
+			var sandboxApi = sandbox.createSandbox(container, template, "allow-scripts", null, {
+				allowfullscreen: true,
+				mozallowfullscreen: true,
+				webkitallowfullscreen: true
+			});
 
 			sandboxApi.e.on("message", function(event, message) {
 				var msg = message.data;
@@ -231,7 +233,7 @@ define(['require', 'underscore', 'jquery', 'text!partials/odfcanvas_sandbox.html
 		return {
 			restrict: 'E',
 			replace: true,
-			template: '<div class="canvasContainer odfcontainer"><iframe allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" sandbox="allow-scripts"></iframe></div>',
+			template: '<div class="canvasContainer odfcontainer"></div>',
 			controller: controller
 		};
 

static/js/directives/pdfcanvas.js

@@ -29,16 +29,18 @@ define(['require', 'underscore', 'jquery', 'text!partials/pdfcanvas_sandbox.html
 		var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
 
 			var container = $($element);
-
 			var pdfCanvas;
-
 			var template = sandboxTemplate;
 			template = template.replace(/__PARENT_ORIGIN__/g, $window.location.protocol + "//" + $window.location.host);
 			template = template.replace(/__PDFJS_SANDBOX_JS_URL__/g, restURL.createAbsoluteUrl(require.toUrl('sandboxes/pdf') + ".js"));
 			template = template.replace(/__PDFJS_URL__/g, restURL.createAbsoluteUrl(require.toUrl('pdf') + ".js"));
 			template = template.replace(/__PDFJS_WORKER_URL__/g, restURL.createAbsoluteUrl(require.toUrl('pdf.worker') + ".js"));
 			template = template.replace(/__PDFJS_COMPATIBILITY_URL__/g, restURL.createAbsoluteUrl(require.toUrl('libs/pdf/compatibility') + ".js"));
-			var sandboxApi = sandbox.createSandbox($("iframe", container)[0], template);
+			var sandboxApi = sandbox.createSandbox(container, template, "allow-scripts", null, {
+				allowfullscreen: true,
+				mozallowfullscreen: true,
+				webkitallowfullscreen: true
+			});
 
 			sandboxApi.e.on("message", function(event, message) {
 				var msg = message.data;
@@ -289,7 +291,7 @@ define(['require', 'underscore', 'jquery', 'text!partials/pdfcanvas_sandbox.html
 		return {
 			restrict: 'E',
 			replace: true,
-			template: '<div class="canvasContainer"><iframe allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" sandbox="allow-scripts"></iframe></div>',
+			template: '<div class="canvasContainer"></div>',
 			controller: controller
 		};
 

static/js/directives/youtubevideo.js

@@ -112,12 +112,11 @@ define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo
 					sandboxApi = null;
 				}
 				if (!sandboxApi) {
-					var sandboxFrame = $(".youtubeplayer", $element)[0];
 
 					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"));
-					sandboxApi = sandbox.createSandbox(sandboxFrame, template);
+					sandboxApi = sandbox.createSandbox($(".youtubeplayercontainer", $element)[0], template, "allow-scripts allow-same-origin", "youtubeplayer");
 
 					sandboxApi.e.on("message", function(event, message) {
 						var msg = message.data;

static/js/services/sandbox.js

@@ -24,11 +24,37 @@ define(["jquery", "underscore"], function($, _) {
 
 	return ["$window", function($window) {
 
-		var Sandbox = function(iframe, template) {
+		var Sandbox = function(container, template, sandbox, className, attrs) {
-			this.iframe = iframe;
 			var blob = new $window.Blob([template], {type: "text/html;charset=utf-8"});
 			this.url = $window.URL.createObjectURL(blob);
-			this.iframe.src = this.url;
+			var iframe;
+			var $container = $(container);
+			if ($container.is("iframe")) {
+				// Container is iframe.
+				if (className) {
+					$container.addClass(className);
+				}
+				if (attrs) {
+					$container.attr(attrs);
+				}
+				iframe = $container[0];
+				iframe.src = this.url;
+				this.created = false;
+			} else {
+				// Create iframe.
+				iframe = $window.document.createElement("iframe");
+				iframe.sandbox = sandbox;
+				if (className) {
+					iframe.className = className;
+				}
+				if (attrs) {
+					$(iframe).attr(attrs);
+				}
+				iframe.src = this.url;
+				$container.append(iframe);
+				this.created = true;
+			}
+			this.iframe = iframe;
 			this.target = this.iframe.contentWindow;
 			this.e = $({});
 			this.handler = _.bind(this.onPostMessageReceived, this);
@@ -47,6 +73,9 @@ define(["jquery", "underscore"], function($, _) {
 				$window.URL.revokeObjectURL(this.url);
 				this.url = null;
 			}
+			if (this.created) {
+				$(this.iframe).remove();
+			}
 		};
 
 		Sandbox.prototype.onPostMessageReceived = function(event) {
@@ -83,8 +112,11 @@ define(["jquery", "underscore"], function($, _) {
 		};
 
 		return {
-			createSandbox: function(iframe, template) {
+			createSandbox: function(iframe, template, sandbox, className, attrs) {
-				return new Sandbox(iframe, template);
+				if (!sandbox) {
+					sandbox = "";
+				}
+				return new Sandbox(iframe, template, sandbox, className, attrs);
 			}
 		};
 

static/partials/youtubevideo.html

@@ -30,9 +30,7 @@
 
 			<div ng-show="playbackActive">
 				<div class="row youtubecontainer">
-					<div class="embed-responsive embed-responsive-16by9">
+					<div class="embed-responsive embed-responsive-16by9 youtubeplayercontainer"></div>
-						<iframe sandbox="allow-scripts allow-same-origin" class="youtubeplayer"></iframe>
-					</div>
 					<div class="youtubeplayerinfo">
 						<div>{{_('Currently playing')}}<br><a href="{{ currentVideoUrl }}" rel="external" target="_blank">{{ currentVideoUrl }}</a></div>
 					</div>