[英]Partial HTML string escaping in Angular.js
我已經閱讀了有關angular的默認情況下轉義所有內容的方法和$sce
,所以我使用$sce.trustAsHtml()
通過過濾器列出數據(因為$sce
不在服務中),如下所示:
<sup class="ng-binding" ng-bind-html="row|logEntry"></sup>
但問題是,我不相信HTML的某些部分。
深入研究細節 - 我的翻譯中包含HTML,但它們中包含可替換的標記/變量。 所以翻譯支持HTML ,但我不希望提供的令牌包含HTML。
我的過濾器logEntry
內部如下所示:
var translated = $translate('Log.' + msg.context.entity_type) + '.' + msg.context.action, {
'object_name': msg.context.object_name,
'user': msg.context.user_name
});
return $sce.trustAsHtml(translated);
例如,我可以翻譯有關userX更改文章,但如果用戶名包含<script>alert('evilname')</script>
,我不希望結果文本觸發alert()
$translate
本身是不相關的,它可以是任何HTML字符串,我希望某些部分被常規JS .replace()
替換,內容保持“作為文本”。
所以我的問題是 - 如何逃避HTML的部分內容 ? 我是否必須在視圖內部分切片? 或者我是否必須采用自定義轉義( 最快的方法將HTML標記轉義為HTML實體? )? 這種事情是否有首選做法?
讓我們首先重構你的logEntry
以分離出interpolateParams
var translationId = 'Log.' + msg.context.entity_type) + '.' + msg.context.action;
var interpolateParams = {
'object_name': msg.context.object_name,
'user': msg.context.user_name
};
var translated = $translate(translationId, interpolateParams);
return $sce.trustAsHtml(translated);
您想要從interpolateParams
轉義所有HTML,但在轉換模板中保留任何HTML。 使用此代碼復制對象,迭代其值並替換為轉義的HTML。
var safeParams = angular.copy(interpolateParams);
angular.forEach(safeParams, function(value, key, obj) {
obj[key] = encodeEntities(value)
// if you want safe/sanitized HTML, use this instead
// obj[key] = $sanitize(value);
});
var translated = $translate(translationId, safeParams);
最后, encodeEntities
功能沒有暴露,因此我們不得不從angular-sanitize.js借用源代碼。
var SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
// Match everything outside of normal chars and " (quote character)
NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;
function encodeEntities(value) {
return value.
replace(/&/g, '&').
replace(SURROGATE_PAIR_REGEXP, function(value) {
var hi = value.charCodeAt(0);
var low = value.charCodeAt(1);
return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
}).
replace(NON_ALPHANUMERIC_REGEXP, function(value) {
return '&#' + value.charCodeAt(0) + ';';
}).
replace(/</g, '<').
replace(/>/g, '>');
}
更新:更新為angular-translate 2.7.0后出現此消息:
pascalprecht.translate。$ translateSanitization:未配置清理策略。 這可能會產生嚴重的安全隱患。 有關詳細信息,請參見http://angular-translate.github.io/docs/#/guide/19_security 。
Sp而不是上面的trustlate
答案,angular-translate可以完成相同的結果:
$translateProvider.useSanitizeValueStrategy('escapeParameters');
有關更多Sanitize Value Strategies的信息,請參閱文檔
在您的應用中添加
$translateProvider.useSanitizeValueStrategy('escapeParameters');
所以,你的代碼看起來像這樣:
myApp.config(function ($translateProvider) {
//...whatever
$translateProvider.useSanitizeValueStrategy('escapeParameters');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.