Shadow DOM not clear

Question

I need to access the body element of an opened window that has Shadow DOM. Run this code on your browser (you need to disable third party security on your browser):

<script type="text/javascript">
janela = window.open("http://www.google.com.br");

window.setTimeout(

    function() {

        console.log(janela.window.document.body.innerHTML);

    },
    5000

);
</script>

If you see at your console there will be an empty string. Now change the URL http://www.google.com.br to http://www.bing.com.br and it works fine: the BODY innerHTML is displayed in the console.

I see that Google is now using Shadow DOM and it's probably what is causing my problem. Open Google.com in your browser -> F12 and you will see there is a #shadow-root element and I think this creates my problem. How can I bypass that and have access to the DOM?

All pages have a `#shadow-root` in Chrome DevTools. That doesn't mean they're actually using the shadow DOM. — CodingIntrigue, Jun 03 '15 at 14:55
In addition to the above, your issue isn't to do with the shadow DOM, but to probably same origin policy. [Disable the same origin policy](http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome) on your Chrome and try again - your code worked for me — CodingIntrigue, Jun 03 '15 at 15:00
@RGraham no you are wrong. I am already using --disable-web-security flag with my Chrome. — Amanda Novaes, Jun 03 '15 at 17:19
@RGraham what is your browser version? Is it updated? In my browser the "janela.window.document.body.innerHTML" returns an empty string because of the shadow... — Amanda Novaes, Jun 03 '15 at 22:27
@AmandaNovaes v43 - up to date. You should take heed of the opinions you've been given here by experienced members instead of disregarding them assuming you know better. Let me demo. This is a working shadow DOM example: [This is what you will see](http://imgur.com/VBW3ItH) when a site is using Shadow DOM. It will be wrapped around an element, **not in the `` tag**. [This is what you'll see](http://imgur.com/VBW3ItH,ivbOYR1,Iypn1Fy#1) on **all pages** in Chrome, regardless of shadow usage. [And this is Google's source](http://imgur.com/VBW3ItH,ivbOYR1,Iypn1Fy#2). See, *no Shadow DOM* :) — CodingIntrigue, Jun 04 '15 at 07:11
@RGraham thank you so much but I think that my Chrome browser is reading the shadow DOM content in this image you posted -> http://imgur.com/VBW3ItH,ivbOYR1,Iypn1Fy#1 . Did you see that inside that "shadow" there is an empty "body" tag? The JS code that I posted in the question is probably retrieving that shadowed body and not the real body. Please, please, execute this code http://jsfiddle.net/kq9dqvLu/ with you chrome using --disable-web-security and tell me the result. My chrome shows an empty alert, not the expected result as you said it should happens! — Amanda Novaes, Jun 04 '15 at 12:28
@AmandaNovaes Using your link and `--disable-web-security` this is what I get: http://imgur.com/h076b60 - `Chrome browser is reading the shadow DOM content in this image you posted`, no it's not. Open any page on the web, they all have that. — CodingIntrigue, Jun 04 '15 at 12:33
@RGraham you are so kind helping me. Thank you a lot, your printscreen is exactly what I want.. unfortunatelly my Windows 8.1 with Chrome 43.0.2357.81 is presenting an empty string ONLY with Google.com.br page. With any other page that code works fine. I already disabled all extensions and have no clue what is going on. Could you please tell me your OS, if I am not abusing your patience. — Amanda Novaes, Jun 04 '15 at 16:10

score 3 · Answer 1 · answered Jun 03 '15 at 15:06

Shadow DOM has nothing to do with this. Your browser doesn't want to let any random website open up something like gmail.com and read whatever they see there. If it did, then any website you visit could read all your email any time you're signed in to your gmail account.

Please read the section on "Cross-origin script API access" here.

JavaScript APIs such as iframe.contentWindow, window.parent, window.open and window.opener allow documents to directly reference each other. When the two documents do not have the same origin, these references provide very limited access to Window and Location objects, as described in the next two sections.

I am using --disable-web-security flag with my Chrome, so you are wrong. I just want to do this for testing purposes, you probably didnt understand my question. — Amanda Novaes, Jun 03 '15 at 17:20

score 1 · Answer 2 · answered Jun 03 '15 at 14:48

1

The whole idea of shadow DOM is encapsulation, so you cannot access the shadow DOM using JavaScript outside of the context of the context that creates it.

answered Jun 03 '15 at 14:48

Konstantin Dinev

30,746
13
64
91

Thank you for clarifying this. But if I am outside the shadow DOM (which in the example I provided I am outside it) why I cant access the DOM itself? – Amanda Novaes Jun 03 '15 at 14:52
So how can I access the DOM tree without the shadow? – Amanda Novaes Jun 03 '15 at 14:55
1

@AmandaNovaes You should be able to access it. This is not caused by shadow DOM. – Konstantin Dinev Jun 03 '15 at 15:00
did you test my example? I cannot access the DOM because exactly of the shadow. My example works fine with any other website (bing, gmail, yahoo...) but just does not work with Google.com . I cant access the content of the window probably because of the shadow. – Amanda Novaes Jun 03 '15 at 17:21
can you please execute this code http://jsfiddle.net/kq9dqvLu/ and tell me the result? Run your chrome with --disable-web-security flag to avoid the third party block. I see an empty alert. – Amanda Novaes Jun 04 '15 at 12:30
@AmandaNovaes Look at the other answer. The issue you're facing is related to it. – Konstantin Dinev Jun 04 '15 at 12:37
the other answer has nothing to do with my problem. I am already disabling the web security in my Chrome browser so same origin policy has nothing to do with my problem. I dont even know why that question got so many upvotes cause I made it very clear in my question that I am using --disable-web-security – Amanda Novaes Jun 05 '15 at 19:15

Shadow DOM not clear

2 Answers2