Suppose I'm the developer of a widget showing a list of friends, such as:
Your friends Michael, Anna and Shirley love this webpage!
span
Naively, I create a script which places this information in a span
on the website. However, the owners of ExampleSite can now access the names of your friends by simple DOM operations!
That's a big privacy / security issue.
iframe
I don't want ExampleSite to have access to their friends' names. So instead, I let website owners add the widget with an iframe
:
<iframe src="http://fakebook.com/friends?page=http%3A%2F%2Fexample.org%2F"></iframe>
This works, because the owners of ExampleSite cannot scrape the contents of the iframe
. However, this whole iframe
thing is rather ugly, because it does not integrate into the styling of the website, while a span
does.
When reading about Shadow Dom yesterday, I wondered whether that could be a solution to both issues. It would allow me to have a script that creates a span
the original website cannot access:
var host = document.querySelector('#friends');
var root = host.webkitCreateShadowRoot();
root.textContent = 'Your friends Michael, Anna and Shirley love this webpage!';
The Shadow DOM spec after all says that it offers functional encapsulation, but I actually want trust encapsulation. And while the Component Model Use Cases actually list this use case, I'm not sure whether Shadow DOM realizes the necessary confinement property.
It does not, but it's in the works: https://www.w3.org/Bugs/Public/show_bug.cgi?id=20144
The encapsulation of trust will involve creating a new scripting context for each shadow tree, which is overkill for most scenarios. However, as the bug says, we'll add a flag (details TBD) that would allow this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With