Append external styles inside head instead of body. Closes #1473

src/canvas/view/CanvasView.js

@@ -80,19 +80,20 @@ module.exports = Backbone.View.extend({
    * @private
    */
   renderBody() {
-    var wrap = this.model.get('frame').get('wrapper');
-    var em = this.config.em;
+    const { config, model } = this;
+    const wrap = this.model.get('frame').get('wrapper');
+    const em = config.em;
+
     if (wrap) {
-      var ppfx = this.ppfx;
-      //var body = this.frame.$el.contents().find('body');
-      var body = $(this.frame.el.contentWindow.document.body);
-      var cssc = em.get('CssComposer');
-      var conf = em.get('Config');
-      var confCanvas = this.config;
-      var protCss = conf.protectedCss;
-      var externalStyles = '';
-
-      confCanvas.styles.forEach(style => {
+      const Canvas = em.get('Canvas');
+      const ppfx = this.ppfx;
+      const body = $(Canvas.getBody());
+      const head = $(Canvas.getDocument().head);
+      const cssc = em.get('CssComposer');
+      const conf = em.get('Config');
+      let externalStyles = '';
+
+      config.styles.forEach(style => {
         externalStyles += `<link rel="stylesheet" href="${style}"/>`;
       });
 
@@ -155,11 +156,11 @@ module.exports = Backbone.View.extend({
         }
 
         ${conf.canvasCss || ''}
-        ${protCss || ''}
+        ${conf.protectedCss || ''}
       `;
 
       if (externalStyles) {
-        body.append(externalStyles);
+        head.append(externalStyles);
       }
 
       body.append('<style>' + frameCss + '</style>');