Санизировать ненадежный CSS с помощью Angular $ sce.getTrustedCss

Question

Пытается использовать $sce.getTrustedCss, но всегда am получает ошибку для небезопасного ввода.

Должен ли такой пример быть в безопасности или я чего-то не хватает.

$sce.getTrustedCss('.red {color: red;}'); 

Кроме того, есть другие JS дезинфицирующие, который может работать на входе CSS?
google-caja работает только для встроенного стиля, он полностью удаляет метки STYLE.

Answer 1

Насколько я могу судить, в Угловом нет встроенной сантинизации CSS.

Я думаю, что $sce.getTrustedCss(s) всегда будет сообщать вам, что вход небезопасен, если вы впервые не сделали: s = $sce.trustAsCss(something). Поэтому, если вы передаете свой css через санитор, или знаете, что он пришел из надежного источника, вы можете отметить его как безопасный для использования.

Обратите также внимание на то, что в Угловой документации указано, что Угловая на самом деле не использует getTrustedCss(), но вы можете использовать ее в своих собственных директивах. Я думаю, что это означает, что если вы его используете, вы несете ответственность за обеспечение того, чтобы безопасные входы были сначала пройдены через trustAsCss().

Вот реализация getTrusted():

function getTrusted(type, maybeTrusted) { 
     if (maybeTrusted === null || isUndefined(maybeTrusted) || maybeTrusted === '') { 
     return maybeTrusted; 
     } 
     var constructor = (byType.hasOwnProperty(type) ? byType[type] : null); 
     if (constructor && maybeTrusted instanceof constructor) { 
     return maybeTrusted.$$unwrapTrustedValue(); 
     } 
     // If we get here, then we may only take one of two actions. 
     // 1. sanitize the value for the requested type, or 
     // 2. throw an exception. 
     if (type === SCE_CONTEXTS.RESOURCE_URL) { 
     if (isResourceUrlAllowedByPolicy(maybeTrusted)) { 
      return maybeTrusted; 
     } else { 
      throw $sceMinErr('insecurl', 
       'Blocked loading resource from url not allowed by $sceDelegate policy. URL: {0}', 
       maybeTrusted.toString()); 
     } 
     } else if (type === SCE_CONTEXTS.HTML) { 
     return htmlSanitizer(maybeTrusted); 
     } 
     throw $sceMinErr('unsafe', 'Attempting to use an unsafe value in a safe context.'); 
    } 

    return { trustAs: trustAs, 
      getTrusted: getTrusted, 
      valueOf: valueOf }; 
    }]; 

Обратите внимание, что ссылки и HTML есть некоторые дополнительные проверки, но и другие типы (CSS, JS) доверяют только тогда, когда были завернуты соответствующим trustAs... функции. Также trustAsCss() не задокументирован, но по мере того, как методы сокращения автоматически генерируются, он должен существовать (или вы можете напрямую использовать trustAs($sce.CSS, ...)).

Answer 2

С угловой 2 используйте DomSanitizer:

import { DomSanitizer } from '@angular/platform-browser'; 

constructor(
    private domSanitizer: DomSanitizer 
) {} 

// let legal = this.domSanitizer.bypassSecurityTrustStyle(styleAtrStr);