I have a angular-translate directive that takes arguments, which are mixed. Some are user-generated, others are HTML that must be compiled (with translate-compile).
See this plunker for a working, greatly simplified example.
When the translate-sanitize-strategy is set to "null", nothing is sanitized:
<p translate
translate-value-amount="<currency data-amount='balance'></currency>"
translate-value-beneficiary="{{ beneficiary }}"
translate-sanitize-strategy="null"
translate-compile="true">PAY_TO</p>
This renders You must pay € 13.37 to john-doe.
But when a user sets a nickname to john-<span onmouseover="this.textContent=\'h@ck3d\'">doe</span>, it will run that and it renders, after mouseover, You must pay € 13.37 to john-h@ck3d. Clearly an example of XSS.
When I set the strategy to sanitizeParameters, which is also our global setting, the beneficiary is properly sanitized. But so is the amount, which I trust (at this point) and which needs to be compiled!
<p translate
translate-value-amount="<currency data-amount='balance'></currency>"
translate-value-beneficiary="{{ beneficiary }}"
translate-sanitize-strategy="'sanitizeParameters'"
translate-compile="true">PAY_TO</p>
This renders You must pay to john-doe. So the beneficiary value is properly sanitized, but so is the value-amount, which I need to remain unsanitized in order for angular to compile it.
I've searched for a solution where I manually sanitize the beneficiary value, with a filter:
{{ beneficiary | sanitize }}
But this seems to require me to write a filter that uses the ngSanitize Service; not that hard, but still some work, tests, code for something that I expect to be natively available. Somewhere.
I've read through the angular-translate code to find if there is a (hidden) flag or naming convention or so, that allows per-value setting of sanitization, but could not find that. Something like translate-sanitize-attributes="['foo', 'bar']" or even atranslate-value-amount-astrusted=` or somesuch. But could find nothing that hints at being able to set sanitization-strategies or omission thereof, per-value.
How is this usually achieved in angularjs and angular-translate?
How about:
<p translate
translate-value-amount="<currency data-amount='balance'></currency>"
translate-value-beneficiary="<span ng-bind='beneficiary'></span>"
translate-sanitize-strategy="null"
translate-compile="true">PAY_TO</p>