iframe - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

index.js

@@ -20,2 +20,3 @@ module.exports = function(opts) {
   }
+  if (!opts.sandboxAttributes) opts.sandboxAttributes = ['allow-scripts']
   return opts
@@ -32,12 +33,22 @@ }
   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]
 }

package.json

 {
   "name": "iframe",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "higher level api for creating and using iframes in browsers",
@@ -11,3 +11,22 @@ "repository": {
     "node": "0.8.x"
+  },
+  "devDependencies": {
+    "tape": "~2.3.2"
+  },
+  "testling": {
+    "files": "test.js",
+    "browsers": [
+      "ie/8..latest",
+      "firefox/17..latest",
+      "firefox/nightly",
+      "chrome/22..latest",
+      "chrome/canary",
+      "opera/12..latest",
+      "opera/next",
+      "safari/5.1..latest",
+      "ipad/6.0..latest",
+      "iphone/6.0..latest",
+      "android-browser/4.2..latest"
+    ]
   }
 }

readme.md

@@ -5,2 +5,6 @@ # iframe
 
+[![browser support](https://ci.testling.com/maxogden/iframe.png)](https://ci.testling.com/maxogden/iframe)
+
+[![NPM](https://nodei.co/npm/iframe.png)](https://nodei.co/npm/iframe/)
+
 ## usage
@@ -34,2 +38,3 @@
   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
@@ -41,4 +46,33 @@ }
 
+### 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:
+
+### loading javascript into iframes
+
+```javascript
+// setTimeout is because iframes report inaccurate window.innerWidth/innerHeight, even after DOMContentLoaded!
+var body = '<script type="text/javascript"> setTimeout(function(){' + javascriptCodeHere + '}, 0)</script>'
+```
+
+### getting rid of dumb iframe default styles
+
+```javascript
+var head = "<style type='text/css'> html, body { margin: 0; padding: 0; border: 0; } </style>"
+```
+
 ## license
 
 BSD

No alert changes

Improved metrics

Total package byte prevSize

5529

increased by112.98%

Number of package files

7

increased by40%

Lines of code

56

increased by51.35%

Number of lines in readme file

76

increased by80.95%

Worsened metrics

Dev dependency count

1

increased byInfinity%

No dependency changes