✨ Web Frame: Add Web Frame shape with iframe embed support

[Jalmaries]

Adds a new Web Frame shape that can embed external content via <iframe>.

Key points

• New WebFrame.vue shape implementation using foreignObject + iframe
• Added to shape registry (Shape.js)
• Includes a new icon asset (assets/images/items/web-frame.svg)
• Supports: url, autoload, optional border, optional scrolling, and corner radius
• package-lock.json updated accordingly

Notes

• In edit mode, interactions are blocked to prevent accidental iframe interactions while editing.

[ishubin]

@Jalmaries Thank you very much for your PR! It looks quite decent! I wanted to make something like this for a while but was reluctant due to the security concerns.

I would like to first research the security aspect of adding this shape. I am afraid that it might potentially be used in hacking attempts against the users of https://schem.io.

Alternatively I could accept it and just restrict its usage in the public Schemio deployment.
So please give me some time while I figure it all out.

[Jalmaries]

@ishubin Thanks for the feedback. I fully understand the safety concerns here, especially for public https://schem.io/. I’ve been looking into secure options like sandboxing, stricter iframe permissions, HTTPS-only validation, and trusted-domain controls, but there is a real tradeoff: the stricter it gets, the more maintenance it adds and the more flexibility users lose.

A strict trusted-domain model seems to be the safest practical path for public deployment, but it reduces “embed anything” behavior and requires ongoing domain-list maintenance. I’m still trying to find ways to keep this as flexible as possible without compromising safety.

Small side note: I’m here to learn and support a project I like, and your good management and clean code helped me build this shape easily.

Please keep me in the loop on your decision. I’d be happy to help further with this feature as much as possible.

[ishubin]

@Jalmaries , yeah, I also researched various methods for harnessing the security of iframes and, indeed, it might be problematic. I do believe that in self-hosted version of Schemio it is completely fine to allow any source in the iframe. But for the public deployment I will go with a more restricted setup. But to allow it to be tuned like that I would need to make some refactoring first. I am planning to rewrite the way the Shape Registry is implemented in Shape.js. I want to allow it to be configured at the main entry js script, so that it could specify different behavior depending on the version. For the public deployment I would go with a list of trusted domains (primarily media related, e.g. youtube). For self-hosted deployment we can allow everything.

Small side note: I’m here to learn and support a project I like, and your good management and clean code helped me build this shape easily.

Thanks for such a nice feedback! Glad that it wasn't that challenging to introduce a new feature. Although I blame myself for a lot of lazy architectural decisions (e.g. the Shape registry). If you have any questions regarding the code structure - let me know, will be glad to assist.