Enable iframe security through the 'sandbox' attribute

kumavis · kumavis · commit 0b76758914f7 · 2013-12-31T14:43:43.000-10:00
diff --git a/index.js b/index.js
@@ -17,6 +17,7 @@ IFrame.prototype.parseHTMLOptions = function(opts) {
     if (!opts.head) opts.head = ""
     opts.html = '<!DOCTYPE html><html><head>' + opts.head + '</head><body>' + opts.body + '</body></html>'
   }
+  if (!opts.sandboxAttributes) opts.sandboxAttributes = ['allow-scripts']
   return opts
 }
 
@@ -28,14 +29,24 @@ IFrame.prototype.setHTML = function(opts) {
   opts = this.parseHTMLOptions(opts)
   if (!opts.html) return
   this.remove()
-  this.iframe = document.createElement('iframe')
-  this.iframe.setAttribute('scrolling', this.opts.scrollingDisabled ? 'no' : 'yes')
-  this.iframe.style.width = '100%'
-  this.iframe.style.height = '100%'
-  this.iframe.style.border = '0'
-  this.container.appendChild(this.iframe)
-  var content = this.iframe.contentDocument || this.iframe.contentWindow.document
-  content.open()
-  content.write(opts.html)
-  content.close()
+  // create temporary iframe for generating HTML string
+  // element is inserted into the DOM as a string so that the security policies do not interfere
+  // see: https://gist.github.com/kumavis/8202447
+  var tempIframe = document.createElement('iframe')
+  tempIframe.setAttribute('scrolling', this.opts.scrollingDisabled ? 'no' : 'yes')
+  tempIframe.style.width = '100%'
+  tempIframe.style.height = '100%'
+  tempIframe.style.border = '0'
+  tempIframe.sandbox = opts.sandboxAttributes.join(' ')
+  // create a blob for opts.html and set as iframe `src` attribute
+  var blob = new Blob([opts.html], {type: 'text/html;charset=UTF-8'})
+  var targetUrl = URL.createObjectURL(blob)
+  tempIframe.src = targetUrl
+  // generate HTML string
+  var htmlSrc = tempIframe.outerHTML
+  // insert HTML into container
+  this.container.insertAdjacentHTML('beforeend',htmlSrc)
+  // retrieve created iframe from DOM
+  var neighborIframes = this.container.querySelectorAll('iframe')
+  this.iframe = neighborIframes[neighborIframes.length-1]
 }
diff --git a/readme.md b/readme.md
@@ -30,12 +30,25 @@ you can pass this into the constructor or `setHTML`
   head: string contents for `<head>`
   html: string contents for entire iframe
   container: (constructor only) dom element to append iframe to, default = document.body
+  sandboxAttributes: array of capability flag strings, default = ['allow-scripts']
   scrollingDisabled: (constructor only) boolean for the iframe scrolling attr
 }
 ```
 
 you can also just pass in a string and it will be used as `{html: 'yourstring'}`
 
+### security
+
+by default the sandbox attribute is set with 'allow-scripts' enabled. pass in an array of capability flag strings. [Available flags](http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/):
+```
+allow-forms allows form submission.
+allow-popups allows (shock!) popups.
+allow-pointer-lock allows (surprise!) pointer lock.
+allow-same-origin allows the document to maintain its origin; pages loaded from https://example.com/ will retain access to that origin’s data.
+allow-scripts allows JavaScript execution, and also allows features to trigger automatically (as they’d be trivial to implement via JavaScript).
+allow-top-navigation allows the document to break out of the frame by navigating the top-level window.
+```
+
 ## gotchas
 
 iframes are weird. here are some things I use to fix weirdness:
