html5rocks · ebidel · Jan 2, 2013 · Jan 1, 2013
diff --git a/content/tutorials/security/sandboxed-iframes/en/_footer.html b/content/tutorials/security/sandboxed-iframes/en/_footer.html
@@ -0,0 +1,2 @@
+
+{% endblock %}
diff --git a/content/tutorials/security/sandboxed-iframes/en/_header.html b/content/tutorials/security/sandboxed-iframes/en/_header.html
@@ -0,0 +1,14 @@
+{% extends "tutorial.html" %}
+
+{% block head %}
+{% endblock %}
+
+{% block iscompatible %}
+  return !!('sandbox' in document.createElement('iframe'));
+{% endblock %}
+
+{% block html5badge %}
+{% endblock %}
+
+{% block content %}
+
diff --git a/content/tutorials/security/sandboxed-iframes/en/build.sh b/content/tutorials/security/sandboxed-iframes/en/build.sh
@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+
+# Remove original index.
+rm index.html
+# Process some stuff.
+cat _header.html >> index.html
+kramdown index.markdown >> index.html
+cat _footer.html >> index.html
+# Pretty print everything.
+sed -ibak  's/<pre>/<pre class="prettyprint">/' index.html
+rm -rf ./index.htmlbak
+
+echo "redid it."
diff --git a/content/tutorials/security/sandboxed-iframes/en/index.html b/content/tutorials/security/sandboxed-iframes/en/index.html
diff --git a/content/tutorials/security/sandboxed-iframes/en/index.markdown b/content/tutorials/security/sandboxed-iframes/en/index.markdown
diff --git a/database/tutorials.yaml b/database/tutorials.yaml
@@ -1,3 +1,23 @@
+title: "Play safely in sandboxed IFrames"
+url: /tutorials/security/sandboxed-iframes/
+author_id: mikewest
+publication_date: 2013-01-04
+description: "Learn how to run IFramed content in a sandbox, greatly reducing the risk associated with third-party widgets, and your own application's code."
+browser_support:
+- chrome
+- safari
+- ff
+- ie
+tags:
+- security
+- xss
+- sandbox
+- iframe
+- type:article
+- class:nuts_and_bolts
+
+---
+
 title: "Techniques for Streaming Multimedia in HTML5"
 url: /tutorials/streaming/multimedia/
 author_id: ericbidelman

diff --git a/static/demos/evalbox/frame.html b/static/demos/evalbox/frame.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Evalbox's Frame</title>
+    <script>
+      window.addEventListener('message', function (e) {
+        var mainWindow = e.source;
+        var result = '';
+        try {
+          result = eval(e.data);
+        } catch (e) {
+          result = 'eval() threw an exception.';
+        }
+        mainWindow.postMessage(result, event.origin);
+      });
+    </script>
+  </head>
+</html>
diff --git a/static/demos/evalbox/index.html b/static/demos/evalbox/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Evalbox</title>
+    <style>
+      body {
+        width: 500px;
+        border: 1px solid #CCC;
+        box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
+        border-width: 0 1px 1px 1px;
+        margin: 0 auto;
+        padding: 1em;
+        overflow: hidden;
+      }
+      html {
+        margin: 0;
+        padding: 0;
+      }
+      h1 {
+        font: 2em Helvetica, Arial, Sans-Serif;
+        font-weight: 700;
+        text-align: center;
+        margin: 0;
+      }
+      button {
+        margin: 0;
+      }
+      button + button {
+        float: right;
+      }
+      textarea {
+        display: block;
+        width: 494px;
+        height: 100px;
+        margin-bottom: 1em;
+      }
+      iframe { display: none; }
+    </style>
+  </head>
+  <body>
+    <h1>Evalbox</h1>
+    <p class='lead'>A toy demonstration of sandboxing. Type some JavaScript into
+    the field below; clicking one of the two buttons will run the code through
+    <code>eval()</code> in an <code>iframe</code>. The difference between the
+    sandboxed and unsandboxed versions should quickly become apparent:</p>
+    <textarea id='code'>window.localStorage['sekrit']</textarea>
+
+    <button id='unsafe'>eval() in an unsandboxed frame.</button>
+    <button id='safe'>eval() in a sandboxed frame.</button>
+
+    <iframe id='unsandboxed'
+            src='frame.html'></iframe>
+    <iframe sandbox='allow-scripts'
+            id='sandboxed'
+            src='frame.html'></iframe>
+
+    <script>
+      window.localStorage['sekrit'] = '[insert sensitive information here]';
+      var sandboxedFrame = document.getElementById('sandboxed');
+      var unsandboxedFrame = document.getElementById('unsandboxed');
+
+      function evaluate(frame) {
+        var code = document.getElementById('code').value;
+        frame.contentWindow.postMessage(code, '*');
+      }
+
+      document.getElementById('unsafe').addEventListener('click', function () {
+        evaluate(unsandboxedFrame);
+      });
+      document.getElementById('safe').addEventListener('click', function () {
+        evaluate(sandboxedFrame);
+      });
+
+      // Listen for response messages from the frames.
+      window.addEventListener('message', function (e) {
+        alert('Result: ' + e.data);
+      });
+    </script>
+  </body>
+</html>