Question

尝试使用$sce.getTrustedCss，但总是因不安全的输入而出错。

这样的例子应该是安全的，还是我遗漏了什么。

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

或者，是否有其他 JS清洁剂可用于CSS输入？
google-caja 仅适用于内联样式，它会完全删除STYLE标记。

Answer 1

从Angular 2开始，使用DomSanitizer：

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

constructor(
  private domSanitizer: DomSanitizer
) {}

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

Answer 2

据我所知，Angular中没有内置的CSS清理。

我认为$sce.getTrustedCss(s)将始终告诉您输入不安全，除非您先执行：s = $sce.trustAsCss(something)。因此，如果您将css通过消毒剂，或者知道它来自可信赖的来源，您可以将其标记为可以安全使用。

另请注意，Angular文档说Angular并没有实际使用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 };
  }];

请注意，urls和html有一些额外的检查，但其他类型（css，js）仅在被适当的trustAs...函数包装时才受信任。此外trustAsCss()似乎没有记录，但由于速记方法是自动生成的，因此它应该存在（或者您可以直接使用trustAs($sce.CSS, ...)。）

使用Angular $ sce.getTrustedCss清理不受信任的CSS

2 个答案: