Unreviewed, add demos (frame sandboxing and scrolling) for a blog post.
authorfred.wang@free.fr <fred.wang@free.fr@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 26 Jul 2017 13:43:25 +0000 (13:43 +0000)
committerfred.wang@free.fr <fred.wang@free.fr@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 26 Jul 2017 13:43:25 +0000 (13:43 +0000)
Patch by Frederic Wang <fwang@igalia.com> on 2017-07-26

* demos/frames/sandboxing/am-i-sandboxed.html: Added.
* demos/frames/sandboxing/framebusting-success.html: Added.
* demos/frames/sandboxing/framebusting-without-user-activation.html: Added.
* demos/frames/sandboxing/index.html: Added.
* demos/frames/scrollable-iframes.html: Added.
* demos/frames/scrollingElement.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@219942 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/demos/frames/sandboxing/am-i-sandboxed.html [new file with mode: 0644]
Websites/webkit.org/demos/frames/sandboxing/framebusting-success.html [new file with mode: 0644]
Websites/webkit.org/demos/frames/sandboxing/framebusting-without-user-activation.html [new file with mode: 0644]
Websites/webkit.org/demos/frames/sandboxing/index.html [new file with mode: 0644]
Websites/webkit.org/demos/frames/scrollable-iframes.html [new file with mode: 0644]
Websites/webkit.org/demos/frames/scrollingElement.html [new file with mode: 0644]

index d7d03bf..4735365 100644 (file)
@@ -1,3 +1,14 @@
+2017-07-26  Frederic Wang  <fwang@igalia.com>
+
+        Unreviewed, add demos (frame sandboxing and scrolling) for a blog post.
+
+        * demos/frames/sandboxing/am-i-sandboxed.html: Added.
+        * demos/frames/sandboxing/framebusting-success.html: Added.
+        * demos/frames/sandboxing/framebusting-without-user-activation.html: Added.
+        * demos/frames/sandboxing/index.html: Added.
+        * demos/frames/scrollable-iframes.html: Added.
+        * demos/frames/scrollingElement.html: Added.
+
 2017-07-20  Jiewen Tan  <jiewen_tan@apple.com>
 
         Unreviewed, add the final demo page for a WebCrypto API blog post
diff --git a/Websites/webkit.org/demos/frames/sandboxing/am-i-sandboxed.html b/Websites/webkit.org/demos/frames/sandboxing/am-i-sandboxed.html
new file mode 100644 (file)
index 0000000..952b46b
--- /dev/null
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Am I sandboxed?</title>
+    <meta charset="utf-8"/>
+  </head>
+  <body style="background-color: pink">
+
+    <p style="color: black;">I'm NOT allowed to execute JavaScript.</p>
+
+    <script>
+      document.querySelector('p').textContent = "I can execute JavaScript.";
+      document.body.style.backgroundColor = "lightgreen";
+    </script>
+
+    <p><a href="./am-i-sandboxed.html" target="_blank">Open this page as a popup</a></p>
+
+    <p><button onclick="alert('I can open modal dialog!')">Open an alert dialog</button></p>
+
+    <p><button onclick="top.location='./framebusting-success.html'">Navigate top frame</button></p>
+
+    <p><a href="./framebusting-without-user-activation.html" target="_blank">Open a popup to test top navigation without user activation</a></p>
+
+  </body>
+</html>
diff --git a/Websites/webkit.org/demos/frames/sandboxing/framebusting-success.html b/Websites/webkit.org/demos/frames/sandboxing/framebusting-success.html
new file mode 100644 (file)
index 0000000..72f6a6e
--- /dev/null
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Framebusting Success</title>
+    <meta charset="utf-8"/>
+  </head>
+
+  <body>
+
+    <p>Framebusting succeeded!</p>
+
+    <p>You will be redirected to <a href="index.html">the sandboxing demo page</a>.</p>
+
+    <script>
+        setTimeout(function() { location = 'index.html'; }, 3000);
+    </script>
+
+  </body>
+</html>
diff --git a/Websites/webkit.org/demos/frames/sandboxing/framebusting-without-user-activation.html b/Websites/webkit.org/demos/frames/sandboxing/framebusting-without-user-activation.html
new file mode 100644 (file)
index 0000000..35b65e4
--- /dev/null
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Framebusting without user activation</title>
+    <meta charset="utf-8"/>
+  </head>
+  <body>
+    <p>If you see this message, then framebusting without user activation failed!</p>
+    <iframe srcdoc="<p>This frame tries to navigate its top context...</p><script>top.location='data:text/html,Framebusting without user activation succeeded!'</script>"></iframe>
+  </body>
+</html>
diff --git a/Websites/webkit.org/demos/frames/sandboxing/index.html b/Websites/webkit.org/demos/frames/sandboxing/index.html
new file mode 100644 (file)
index 0000000..3e1eb56
--- /dev/null
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Frame Sandboxing</title>
+    <meta charset="utf-8"/>
+  </head>
+  <body>
+
+    <h1>Frame Sandboxing</h1>
+
+    <p>Note: In order to run these demos, you might need to modify your
+      preference to allow javascripts, popups or modal dialogs.</p>
+
+    <h2>Basic flags</h2>
+
+    <p>The following iframes contain a page to test some actions
+      (executing javascript, opening popups, opening modal dialogs, redirecting
+      the top frame). These actions are all permitted for unsandboxed frames
+      and (by default) all forbidden for sandboxed frames. You can use some
+      <code>allow-*</code> flags to relax these restrictions one by one.</p>
+
+    <ul>
+      <li>Unsandboxed frame: <iframe src="am-i-sandboxed.html"></iframe></li>
+      <li>Sandboxed frame: <iframe sandbox="" src="am-i-sandboxed.html"></iframe></li>
+      <li><code>allow-scripts</code>: <iframe sandbox="allow-scripts" src="am-i-sandboxed.html"></iframe></li>
+      <li><code>allow-popups</code>: <iframe sandbox="allow-popups" src="am-i-sandboxed.html"></iframe></li>
+      <li><code>allow-scripts allow-top-navigation</code>: <iframe sandbox="allow-scripts allow-top-navigation" src="am-i-sandboxed.html"></iframe></li>
+    </ul>
+
+    <h2>allow-popup-to-escape-sandbox</h2>
+
+    <p>By default, popups opened from a sandboxed frames has the
+      same restrictions as the frame.
+      This is sometimes not wanted e.g. for the landing page of trusted ads.
+      The <code>allow-popup-to-escape-sandbox</code> flag allows the popups
+      to be opened in a new unsandboxed context. Click the
+      "Open this page as a popup" links to check the difference to see the
+      effect of that flag:
+    </p>
+    <ul>
+      <li><code>allow-popups</code>: <iframe sandbox="allow-popups" src="am-i-sandboxed.html"></iframe></li>
+      <li><code>allow-popups allow-popups-to-escape-sandbox</code>: <iframe sandbox="allow-popups allow-popups allow-popups-to-escape-sandbox" src="am-i-sandboxed.html"></iframe></li>
+    </ul>
+
+    <h2>allow-top-navigation-by-user-activation</h2>
+
+    <p>The <code>allow-top-navigation</code> has been used to perform malicious
+      redirection of the top frame without the user's permission. The
+      <code>allow-top-navigation-by-user-activation</code> provides a safer flag
+      which only allows redirections triggered by user actions. The
+      "Navigate top frame" button should work in both cases but the
+      "Open a popup to test top navigation without user activation" should
+      be blocked for <code>allow-top-navigation-by-user-activation</code>.
+    </p>
+
+    <ul>
+      <li><code>allow-scripts allow-popups allow-top-navigation</code>: <iframe sandbox="allow-scripts allow-popups allow-top-navigation" src="am-i-sandboxed.html"></iframe></li>
+      <li><code>allow-scripts allow-popups allow-top-navigation-by-user-activation</code>: <iframe sandbox="allow-scripts allow-popups allow-top-navigation-by-user-activation" src="am-i-sandboxed.html"></iframe></li>
+    </ul>
+
+    <h2>allow-modals</h2>
+
+    <p>Opening modal dialogs used to always be permitted for sandboxed frames.
+      In more recent versions of the HTML specification, an
+      <code>allow-modals</code> flag is introduced to explicitly request
+      permission to open such modal dialogs, hence providing better safety by
+      default.</p>
+
+    <ul>
+      <li><code>allow-scripts</code>: <iframe sandbox="allow-scripts" src="am-i-sandboxed.html"></iframe></li>
+      <li><code>allow-scripts allow-modals</code>: <iframe sandbox="allow-scripts allow-modals" src="am-i-sandboxed.html"></iframe></li>
+    </ul>
+
+  </body>
+</html>
diff --git a/Websites/webkit.org/demos/frames/scrollable-iframes.html b/Websites/webkit.org/demos/frames/scrollable-iframes.html
new file mode 100644 (file)
index 0000000..188e8d6
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width">
+  </head>
+  <body>
+    <h1>Scrollable iframes</h1>
+
+    <h2>Basic iframe with vertical and horizontal overflows</h2>
+    <iframe style="height: 100px; width: 200px;" scrolling="yes" srcdoc="<div style='height: 500px; width: 300px; background: linear-gradient(135deg, red, blue);'></div>"></iframe>
+
+    <h2>Iframe with text and images</h2>
+    <iframe style="border: 10px solid black; width: 200px; height: 200px" scrolling="yes" srcdoc="<p style='color: red'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p style='color: green'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><img src='https://planet.igalia.com/images/logo.png'/><p style='color: blue'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"></iframe>
+
+    <h2>Nested iframes</h2>
+    <iframe style="width: 400px; height: 300px; background: green;" srcdoc="<iframe style=&quot;width: 200px; height: 600px; background: orange&quot; srcdoc=&quot;&amp;lt;div style=&amp;quot;height: 1000px; background: linear-gradient(180deg, blue, purple);&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&quot;></iframe>"></iframe>
+
+    <h2>Overlapping iframes and elements</h2>
+    <div style="height: 300px">
+      <div style="position: absolute;">
+        <iframe style="position: absolute; top: 20px; left:0; width: 300px; height: 200px;" scrolling="yes" srcdoc="<div style='height: 1000px; background: linear-gradient(180deg, red, yellow);'></div>"></iframe>
+        <div style="position: absolute; top: 20px; left: 0; width: 500px; height: 100px; background: gray; z-index: -1"></div>
+        <iframe style="position: absolute; top: 80px; left: 70px; width: 300px; height: 200px;" scrolling="yes" srcdoc="<div style='height: 1000px; background: linear-gradient(180deg, green, blue);'></div>"></iframe>
+        <div style="position: absolute; top: 120px; left: 50px; width: 100px; height: 100px; background: gray;"></div>
+      </div>
+    </div>
+
+    <h2>Iframe with CSS transforms</h2>
+    <iframe style="width: 300px; height: 200px; transform: translate(100px,0px) skewX(-30deg)" scrolling="yes" srcdoc="<div style='height: 1000px; background: linear-gradient(180deg, orange, purple);'></div>"></iframe><br/>
+    <iframe style="width: 300px; height: 200px; transform: translate(400px,0px) rotate(45deg)" scrolling="yes" srcdoc="<div style='height: 1000px; background: linear-gradient(180deg, cyan, red);'></div>"></iframe><br/>
+
+    <h2>iframe with position:fixed</h2>
+
+    <iframe style="height: 200px; width: 200px;" scrolling="yes" srcdoc="<div style='height: 500px; width: 300px; background: linear-gradient(135deg, red, blue);'></div><div style='position: fixed; left: 30px; top: 30px; height: 100px; width: 100px; background: green;'></div>"></iframe>
+    
+    <h2>iframe with complex content</h2>
+    <iframe style="margin: 0; border-style: solid; border-color: black; border-width: 5px 2% 5px 2%; width: 96%; height: 300px;" src="https://en.wikipedia.org/wiki/Igalia"/>
+
+  </body>
+</html>
diff --git a/Websites/webkit.org/demos/frames/scrollingElement.html b/Websites/webkit.org/demos/frames/scrollingElement.html
new file mode 100644 (file)
index 0000000..6034661
--- /dev/null
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width">
+  </head>
+  <body>
+    <h1>scrollingElement</h1>
+
+    <p>The iframe below is in no-quirks mode. Per the <a href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface">CSSOM View Module</a>, one has to use the root element (i.e. <code>document.documentElement</code>) in order to scroll its view. However, the behaviors of browsers have historically been inconsistent. When available, the new <a href="https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement">document.scrollingElement</a> property gives you the DOM element to use in your browser without having to go with browser sniffing or similar.</p>
+
+    <p><iframe style="width: 300px; height: 50px;"></iframe></p>
+    <p id="output"></p>
+
+    <script>
+        var frame = document.querySelector("iframe");
+
+        frame.onload = function() {
+            var frameWindow = frame.contentWindow;
+            var output = document.getElementById("output");
+            output.innerText += "The value of document.scrollingElement in your browser is ";
+            if (!frameWindow.document.scrollingElement)
+                output.innerText += " undefined";
+            else if (frameWindow.document.scrollingElement === frameWindow.document.documentElement)
+                output.innerText += " document.documentElement";
+            else if (frameWindow.document.scrollingElement === frameWindow.document.body)
+                output.innerText += " document.body";
+            else
+                output.innerText += " ???";
+            output.innerText += "\n\n";
+
+            output.innerText += "In order to scroll the iframe in your browser, the scroll* properties can be used on ";
+            frameWindow.document.documentElement.scrollLeft = 50;
+            if (frameWindow.document.documentElement.scrollLeft === 50)
+                output.innerText += " document.documentElement"
+            else {
+                frameWindow.document.body.scrollLeft = 25;
+                if (frameWindow.document.body.scrollLeft === 25)
+                    output.innerText += " document.body"
+                else
+                    output.innerText += " ???";
+            }
+        }
+
+        frame.srcdoc = "<!DOCTYPE html><div style='width: 600px; height: 1px;'>"
+    </script>
+  </body>
+</html>