[Caja] Pass DOM from the guest to host or vice versa

Discussion:

Melisa Bok

2016-04-16 14:14:40 UTC

Hi!

I'm wanting to generate some tools to create DOM objects in the host place
and return the object created to the guest. I tried with several options
and I couldn't. Here is my code:

host.html

<html>
<head>
<title>Caja host page</title>
<script type="text/javascript" src="//caja.appspot.com/caja.js"/>
</script>

</head>

<body>
<h1>Caja host page</h1>
<div id="guest"></div>
<script type="text/javascript">

var createPanelReturnDom = function() {
var div = document.createElement("div");
var t = document.createTextNode("This is a paragraph");
div.appendChild(t);
return caja.tame(div);
}

var createPanelReceiveDom = function(dom) {
var div = document.createElement("div");
var t = document.createTextNode("This is a paragraph");
div.appendChild(t);
dom.appendChild(div);
}

caja.initialize({
cajaServer: 'https://caja.appspot.com',
forceES5Mode: true,
debug: true
});

caja.load(document.getElementById('guest'), caja.policy.net.ALL,
function(frame) {

frame.code('guest.html',
'text/html')
.api({ 'createPanelReturnDom':
caja.tame(caja.markFunction(createPanelReturnDom)),
'createPanelReceiveDom':
caja.tame(caja.markFunction(createPanelReceiveDom))
})
.run();
});
</script>
</body>
</html>

and guest.html

<html>
<head>
</head>
<body>
<div id='main'>Hello World!</div>
<script type="text/javascript">
// Test 1
// var main = document.getElementById('main');
// var panel = createPanelReturnDom();
// main.appendChild(panel);

// Test 2
createPanelReceiveDom(document.getElementById('main'));
</script>
</body>
</html>

When I run test 1 in the guest code I get: "This operation requires a
TameBackedNode in source"
and when I run test 2: "Untaming of guest constructed objects unsupported:
[domado object HTMLDivElement DIV]"

Even test 2 is explained in the API Reference
<http://google-caja.googlecode.com/svn/doc/cajajs/index.html> where it says
that you need to "unwrapDom" before using it in the host code. But I read
that is not longer necessary.

How can I pass DOM objects from one side to the other side?

Thank you so much for you help.

Melisa

--
---
You received this message because you are subscribed to the Google Groups "Google Caja Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-caja-discuss+***@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

'Kevin Reid' via Google Caja Discuss

2016-04-18 17:14:43 UTC

Permalink

Post by Melisa Bok
I'm wanting to generate some tools to create DOM objects in the host place
and return the object created to the guest. I tried with several options

...

Post by Melisa Bok
var div = document.createElement("div");
var t = document.createTextNode("This is a paragraph");
div.appendChild(t);
return caja.tame(div);

Special measures are required for DOM nodes that were not *created or first
seen by *the guest. Specifically, call

frame.domicile.tameNodeAsForeign(div)

before passing it back. The Google APIs taming
(src/com/google/caja/apitaming) is an existing example of doing this.

Caveats:

- This also sets a policy that the guest is not allowed to look at or
modify that node or its children (they are âopaque nodesâ). If that is not
what you need, the only *current* way around this is to not pass a DOM
node back, but create the nodes in a container passed out and let the guest
walk the tree to find them. (I would not recommend doing that.)
- frame.domicile is not really a public API. We should provide a better
one, but don't currently.

Melisa Bok

2016-04-19 12:54:57 UTC

Permalink

Thanks Kevin for your response.

I replace the line:

return caja.tame(div);

with:

return frame.domicile.tameNodeAsForeign(div);

I'm still getting the same error: This operation requires a TameBackedNode
when I try to append the node in the guest code.
1. Is it because we are getting a TameForeignNode and not a
TameBackedNode, right?
2. And what you mentioned before: "the guest is not allowed to look at or
modify that node or its children": can't I append an opaque node to a
current guest node?
3. And about to pass the DOM node from the guest to the host doesn't work
anymore?

Thanks again,

Melisa

On Mon, Apr 18, 2016 at 1:14 PM, 'Kevin Reid' via Google Caja Discuss <

Post by 'Kevin Reid' via Google Caja Discuss

Post by Melisa Bok
I'm wanting to generate some tools to create DOM objects in the host
place and return the object created to the guest. I tried with several

...

Post by Melisa Bok
var div = document.createElement("div");
var t = document.createTextNode("This is a paragraph");
div.appendChild(t);
return caja.tame(div);

Special measures are required for DOM nodes that were not *created or
first seen by *the guest. Specifically, call
frame.domicile.tameNodeAsForeign(div)
before passing it back. The Google APIs taming
(src/com/google/caja/apitaming) is an existing example of doing this.
- This also sets a policy that the guest is not allowed to look at or
modify that node or its children (they are âopaque nodesâ). If that is not
what you need, the only *current* way around this is to not pass a DOM
node back, but create the nodes in a container passed out and let the guest
walk the tree to find them. (I would not recommend doing that.)
- frame.domicile is not really a public API. We should provide a
better one, but don't currently.
--
---
You received this message because you are subscribed to the Google Groups
"Google Caja Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an
For more options, visit https://groups.google.com/d/optout.

'Kevin Reid' via Google Caja Discuss

2016-04-19 20:31:11 UTC

Permalink

Post by Melisa Bok
Thanks Kevin for your response.
return caja.tame(div);
return frame.domicile.tameNodeAsForeign(div);
I'm still getting the same error: This operation requires a TameBackedNode
when I try to append the node in the guest code.
1. Is it because we are getting a TameForeignNode and not a
TameBackedNode, right?

No, a foreign node is a kind of backed node. That should work. In the guest
code, can you check what sort of object you're getting (toString and so on)?

Post by Melisa Bok
2. And what you mentioned before: "the guest is not allowed to look at or
modify that node or its children": can't I append an opaque node to a
current guest node?

(By the way, I misused the vocabulary earlier: an opaque thing is a similar
but not the same thing to a foreign node.)

Actually, you're right to check and I was wrong: it's not permitted to
appendChild(someForeignNode). However, if you were actually hitting that
restriction, the error you would see is "Node not editable.", not "requires
a TameBackedNode".

Using the possibilities available in the current API, the host code *must*
put the new node into a containing node passed to the host by the guest,
and the guest will then be unable to remove it.

3. And about to pass the DOM node from the guest to the host doesn't work

Post by Melisa Bok
anymore?

Once the node is properly marked, it should always survive passing the
guest/host membrane in either direction (though on the guest side it will
be the Caja wrapper and not the browser DOM node, of course). If you're not
seeing that, something else went wrong.