Databases
StackOverflow2013
Postsdbo
POCan a Shadow DOM secure my elements?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan a Shadow DOM secure my elements?
    text
    copied!<h2>Goal: an encapculated widget</h2> <p>Suppose I'm the developer of a friends widget for FakeBook™. I provide a widget for website owners that adds a personalized message like this to their pages:</p> <blockquote> <p><em>Your friends Michael, Anna and Shirley love this webpage!</em></p> </blockquote> <h2>First approach: script that creates <code>span</code></h2> <p>Naively, I create a script which places this information in a <code>span</code> on the website. However, the owners of ExampleSite can now access the names of your friends by simple DOM operations! <br> That's a big <strong>privacy / security</strong> issue.</p> <h2>Second approach: an <code>iframe</code></h2> <p>I don't want ExampleSite to have access to their friends' names. So instead, I let website owners add the widget with an <code>iframe</code>:</p> <pre><code>&lt;iframe src="http://fakebook.com/friends?page=http%3A%2F%2Fexample.org%2F"&gt;&lt;/iframe&gt; </code></pre> <p>This works, because the owners of ExampleSite cannot scrape the contents of the <code>iframe</code>. However, this whole <code>iframe</code> thing is rather ugly, because it <strong>does not integrate</strong> into the styling of the website, while a <code>span</code> does.</p> <h2>Desired approach: Shadow DOM</h2> <p>When reading about <a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/" rel="noreferrer">Shadow Dom</a> yesterday, I wondered whether that could be a solution to both issues. It would allow me to have a script that creates a <code>span</code> the original website cannot access:</p> <pre><code>var host = document.querySelector('#friends'); var root = host.webkitCreateShadowRoot(); root.textContent = 'Your friends Michael, Anna and Shirley love this webpage!'; </code></pre> <p><br> However, <strong>does a Shadow DOM hide its contents from the surrounding page?</strong> <br> The assumption here is that nobody except my script can access <code>root</code>, but is that correct?</p> <p>The <a href="http://www.w3.org/TR/shadow-dom/" rel="noreferrer">Shadow DOM spec</a> after all says that it offers <em>functional encapsulation</em>, but I actually want <em>trust encapsulation</em>. And while the Component Model Use Cases actually list <a href="http://www.w3.org/2008/webapps/wiki/Component_Model_Use_Cases#Like.2F.2B1_Button" rel="noreferrer">this use case</a>, I'm not sure whether Shadow DOM realizes the nesessary <em>confinement</em> property.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload