Live Demo / Website

[jogibear9988]

Hey, I've done a similar project https://node-projects.github.io/web-component-designer-demo/index.html, also using and supporting webcomponents.

Is there a live demo of this anywhere? I'd like to see how it looks like.

[loganvolkers]

Not yet! There's some project hygiene underway, and that will be followed by some publishing of storybooks, website and docs.

[jogibear9988]

If it is interesting for you, I've now added iframe support:

iframe is sandboxed like this:

there are still some features not corretly working, cause I need to calculate the offsets and mouse positions relative to the frame...
but this a WIP

[jogibear9988]

And also on many places where I called APIs of the window, I need to use the API of the iframe window...
I've not yet fixed all

[loganvolkers]

Try putting a XSS attack into your iframe, and see if it works, for example:

<script>
window.parent.innerHTML = ""
</script>

You can see that JsFiddle works the right way. The iframe is isolated from overriding the secure parent context: https://jsfiddle.net/nrs3ju2z/

It throws the appropriate error in the browsers.

Since you are using allow-same-origin, this breaks the sandbox. Now any script in the frame can access and make any changes to the parent frame.

[jogibear9988]

No, this will not work in mine, cause I did not set "allow-scripts"

But if I'd like to allow them, I need to do a communication to the iframe as you said. But this then also means, I need to inject a script into the iframe.
Maybe I look to support this also, will try how much work it is.

[jogibear9988]

I also tried if I could prevent access via this script:

 delete window.parent;
 delete window.frameElement;
 delete window.top;

but window.top seems not to be overridable