Angular translate directive vs filter: is XSS possible?

Question

I have a translation key which is actually a HTML code, both encoded as well as unencoded.

   $scope.translations = {
    "html_code" : "<script>alert('Alert!');</script>",
    "html_code_full" : "<script>alert('Alert!');</script>",
    "greeting" : "Welcome!" 
  }

When I use these values to display the translated text in view, I use two methods:

1. As directive <span translate>{{translations.html_code}}</span>
2. As filter {{translations.html_code|translate}}

I try the same for translations.html_code_full. Here's the code for view:

translations.html_code = {{translations.html_code|translate}}
translations.html_code = <span translate>{{translations.html_code}}</span>

translations.html_code_full = {{translations.html_code_full|translate}}
translations.html_code_full = <span translate>{{translations.html_code_full}}</span>

This is the output I get:

translations.html_code = <script>alert('Alert!');</script> 
translations.html_code = <script>alert('Alert!');</script> 


translations.html_code_full = <script>alert('Alert!');</script> 
translations.html_code_full =

As it's clear that directive implementation is encoding the translation key to HTML, but filter is not. Why is this difference in output between directive vs filter implementation? And why am I not getting an alert if it's rendering the HTML?

Here is the plunk I created for demo.

Answer 1

The AngularJS frame work is protecting your application from XSS attacks.

Cross-site scripting carried out on websites accounted for roughly 84% of all security vulnerabilities documented by Symantec as of 2007.

-- Wikipedia - Cross-site scripting

So what are you really trying to do? Maybe we can show you how to do it in a safe manner.