Angular—allow users to input CSS for dynamic template generation

Question

For security reasons, Angular documentation clearly states to ...not use user input to generate templates dynamically. However, I want to do just that. I would like to allow users to use input fields to generate CSS freely and use it to create their own templates, which they could then download. I know $sanitize works to clean HTML, but I am not aware if there is anything that allows you to do this with CSS, that will protect the site from security vulnerabilities.

Is it possible?

Thanks in advance.

Sri · Accepted Answer · 2015-04-19 22:45:04Z

1

You can preview user inputted templates with style tags. I've used $templateCache to load user html.

 $scope.loadTemplate=function(){
       var randomStringName=makeid();
       $scope.templVar=randomStringName;
       $templateCache.put(randomStringName,$scope.templ);
 }

HTML

  <div ng-include="templVar"></div>

enter image description here http://plnkr.co/edit/8HP7HWwMvlXYiusE9TGH?p=preview

answered Apr 19, 2015 at 22:45

Sri

5764 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nikk wong Over a year ago

This is great! Thanks for the help. What aspect of it stops XSS or other potential hacks?

Sri Over a year ago

This is vulnerable to XSS, you can inject javascript if jquery is included.

nikk wong Over a year ago

How to deal with the negative security implications of this ? I am using jqLite.

Sri Over a year ago

Since you are using jqLite, i believe you should be ok. Take a look at this.. stackoverflow.com/questions/13876961/… .. To be safe scrub css as mentioned in the second answer.

Collectives™ on Stack Overflow

Angular—allow users to input CSS for dynamic template generation

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related