I have a simple web application built with Angular which fetches some state from a web server and shows it to the user. Additionally I want to implement a feature where users are able to customize the view of this application by dynamically appending new code on the rendered page in a way that the changes would reflect on the other clients. In principle this could be implemented with a templating engine on the server side, but of course this opens a huge security problem where any user is able to add arbitrary functionality to the app. What could be the appropriate solution for this problem? My first though would be to implement a server where angular sends the models and lets those parts of the view be rendered remotely, but of course this defeats the purpose of using Angular in the first place.
dynamically appending new code on the rendered page in a way that the changes would reflect on the other clients
And this makes it possible to do XSS, mislead the users into providing confidential data such as passwords, and do lots of other cool stuff.
You can't just let the users change the source code and run it, unverified, in other people's browsers. It's not safe if it's on server side. It's not safe if it's on client-side too.
Snippets don't run automatically: the user has to launch them.
It won't be easy to trick a community of programmers to launch a malicious snippet (with source code available for checking before launching), while keeping a positive question/answer score and no close votes/flags.
XSS is impossible.
Snippets run in HTML5 sandboxed iframes, which means they can't log you out from your StackOverflow account and trick you into providing your credentials to a hacker.