angular-translate sanitisation fails with UTF characters

10.1k views Asked by At

On Angular 1.3.x with latest version of angular-translate. Using $sanitize it seems there are problems when using filter or service directly, but it works when using the directive.

Suggestions?

Here is an example:

var myApp = angular.module('myApp', [ 'pascalprecht.translate', 'ngSanitize' ]);

myApp.config(function($translateProvider) {
    $translateProvider.useSanitizeValueStrategy("sanitize");
    $translateProvider.preferredLanguage('en');
    $translateProvider.translations('en', {
        UTF: 'öéü',
    });
});

myApp.controller("myCtrl", function($scope, $translate) {
    $translate("UTF").then(function(trans) {
        $scope.UTFCTRL = trans;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-sanitize.min.js"></script>
<script src="http://rawgit.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <div>
        Wrong: <h1>{{ 'UTF' | translate }}</h1>
    </div>
    
    <div>
        Ok: <h1 translate="UTF"></h1>
    </div>
    
    <div>
        Wrong: <h1>{{ UTFCTRL }}</h1>
    </div>
</div>

On jsfiddle: http://jsfiddle.net/gnvpo6aa/

2

There are 2 answers

6
knalli On BEST ANSWER

At the moment, you have two options:

  1. Use the strategy sanitizeParameters which will only sanitize the dynamic parameters, but not the actual translation (template). If you have the translation under control (but not the dynamic values), this will work.
  2. Use the strategy escape (or escapeParameters) which does not use sanitization but escaping.

Disclaimer: I'm co-maintaining angular-translate.

Edit (12.01.2016): I'd created this matrix overview of all variants.

0
saad On

As said in gitHub issue

Using sce solved the issue

$translateProvider.useSanitizeValueStrategy("sce");