Diff
Modified: trunk/Websites/webkit.org/ChangeLog (219941 => 219942)
--- trunk/Websites/webkit.org/ChangeLog 2017-07-26 13:41:37 UTC (rev 219941)
+++ trunk/Websites/webkit.org/ChangeLog 2017-07-26 13:43:25 UTC (rev 219942)
@@ -1,3 +1,14 @@
+2017-07-26 Frederic Wang <[email protected]>
+
+ 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 <[email protected]>
Unreviewed, add the final demo page for a WebCrypto API blog post
Added: trunk/Websites/webkit.org/demos/frames/sandboxing/am-i-sandboxed.html (0 => 219942)
--- trunk/Websites/webkit.org/demos/frames/sandboxing/am-i-sandboxed.html (rev 0)
+++ trunk/Websites/webkit.org/demos/frames/sandboxing/am-i-sandboxed.html 2017-07-26 13:43:25 UTC (rev 219942)
@@ -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="" 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="" target="_blank">Open a popup to test top navigation without user activation</a></p>
+
+ </body>
+</html>
Property changes on: trunk/Websites/webkit.org/demos/frames/sandboxing/am-i-sandboxed.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/Websites/webkit.org/demos/frames/sandboxing/framebusting-success.html (0 => 219942)
--- trunk/Websites/webkit.org/demos/frames/sandboxing/framebusting-success.html (rev 0)
+++ trunk/Websites/webkit.org/demos/frames/sandboxing/framebusting-success.html 2017-07-26 13:43:25 UTC (rev 219942)
@@ -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="" sandboxing demo page</a>.</p>
+
+ <script>
+ setTimeout(function() { location = 'index.html'; }, 3000);
+ </script>
+
+ </body>
+</html>
Property changes on: trunk/Websites/webkit.org/demos/frames/sandboxing/framebusting-success.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/Websites/webkit.org/demos/frames/sandboxing/framebusting-without-user-activation.html (0 => 219942)
--- trunk/Websites/webkit.org/demos/frames/sandboxing/framebusting-without-user-activation.html (rev 0)
+++ trunk/Websites/webkit.org/demos/frames/sandboxing/framebusting-without-user-activation.html 2017-07-26 13:43:25 UTC (rev 219942)
@@ -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>
Property changes on: trunk/Websites/webkit.org/demos/frames/sandboxing/framebusting-without-user-activation.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/Websites/webkit.org/demos/frames/sandboxing/index.html (0 => 219942)
--- trunk/Websites/webkit.org/demos/frames/sandboxing/index.html (rev 0)
+++ trunk/Websites/webkit.org/demos/frames/sandboxing/index.html 2017-07-26 13:43:25 UTC (rev 219942)
@@ -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 _javascript_s, 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=""
+ <li>Sandboxed frame: <iframe sandbox="" src=""
+ <li><code>allow-scripts</code>: <iframe sandbox="allow-scripts" src=""
+ <li><code>allow-popups</code>: <iframe sandbox="allow-popups" src=""
+ <li><code>allow-scripts allow-top-navigation</code>: <iframe sandbox="allow-scripts allow-top-navigation" src=""
+ </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=""
+ <li><code>allow-popups allow-popups-to-escape-sandbox</code>: <iframe sandbox="allow-popups allow-popups allow-popups-to-escape-sandbox" src=""
+ </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=""
+ <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=""
+ </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=""
+ <li><code>allow-scripts allow-modals</code>: <iframe sandbox="allow-scripts allow-modals" src=""
+ </ul>
+
+ </body>
+</html>
Property changes on: trunk/Websites/webkit.org/demos/frames/sandboxing/index.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/Websites/webkit.org/demos/frames/scrollable-iframes.html (0 => 219942)
--- trunk/Websites/webkit.org/demos/frames/scrollable-iframes.html (rev 0)
+++ trunk/Websites/webkit.org/demos/frames/scrollable-iframes.html 2017-07-26 13:43:25 UTC (rev 219942)
@@ -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=''/><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="width: 200px; height: 600px; background: orange" srcdoc="&lt;div style=&quot;height: 1000px; background: linear-gradient(180deg, blue, purple);&quot;&gt;&lt;/div&gt;"></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=""
+
+ </body>
+</html>
Property changes on: trunk/Websites/webkit.org/demos/frames/scrollable-iframes.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/Websites/webkit.org/demos/frames/scrollingElement.html (0 => 219942)
--- trunk/Websites/webkit.org/demos/frames/scrollingElement.html (rev 0)
+++ trunk/Websites/webkit.org/demos/frames/scrollingElement.html 2017-07-26 13:43:25 UTC (rev 219942)
@@ -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="" 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="" 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>
Property changes on: trunk/Websites/webkit.org/demos/frames/scrollingElement.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
