Angular2 -预期的安全评估必须使用[属性]=绑定

Question

我正在为编写一个SafePipe测试。该方法使用bypassSecurityTrustResourceUrl()。我搜索了可用的解决方案，并尝试了它们，但不幸的是，它并没有帮助我。错误是

预期的SafeValue必须使用property=binding: Cross (参见http://g.co/ng/security#xss)来表示“跨站点请求”。

我在这里做什么？

import {Pipe, PipeTransform} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";

@Pipe({name: 'safe'})
 export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
 }

 public transform(url: string): any {
   return this.sanitizer.bypassSecurityTrustResourceUrl(url);
 }
}

试验是：

import {SafePipe} from './safe.pipe';
import {DomSanitizer} from "@angular/platform-browser";
import {DomSanitizerImpl} from "@angular/platform-browse/src/security/dom_sanitization_service";

fdescribe('SafePipe', () => {
  let pipe: SafePipe;
  let sanitizer: DomSanitizer = new DomSanitizerImpl();
  beforeEach(() => {
    pipe = new SafePipe(sanitizer);
  });

  it('should transform', () => {
    expect(pipe.transform("Cross <script>alert('Hello')</script>")).toBe("Cross alert('Hello')");
  });
});

Answer 1

sanitizer.bypassSecurityTrustResourceUrl方法返回SafeResourceUrlImpl类，您不能将它转换为string (jasmine试图在内部转换它)。

abstract class SafeValueImpl implements SafeValue {
  constructor(public changingThisBreaksApplicationSecurity: string) {
    // empty
  }

  abstract getTypeName(): string;

  toString() {
    return `SafeValue must use [property]=binding: ${this.changingThisBreaksApplicationSecurity}` +
        ` (see http://g.co/ng/security#xss)`;
  }
}

您应该使用DomSanitizer.sanitize方法(当应用属性(如[url]="value | safe")时，角使用它)

it('should transform', () => {
  const safeResourceUrl = pipe.transform("Cross <script>alert('Hello')</script>");
  const sanitizedValue = sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeResourceUrl);

  expect(sanitizedValue).toBe("Cross <script>alert('Hello')</script>");
});

PS。在这里，我假设您在toBe语句中输入了错误，并且您期望string将保存script标记。

在柱塞中可以找到完整的示例

Answer 2

在接受的答案上有一个细微的变化:将管道的SafeValue输出与经过消毒的期望值进行比较：

import { RichtextPipe } from './richtext.pipe';
import {BrowserModule, DomSanitizer} from "@angular/platform-browser";
import {TestBed} from "@angular/core/testing";

describe('RichtextPipe', () => {
  let domSanitizer: DomSanitizer;
  let pipe: RichtextPipe;

  beforeEach(() => {
    TestBed
      .configureTestingModule({
        imports: [
          BrowserModule
        ]
      });
    domSanitizer = TestBed.get(DomSanitizer);
    pipe = new RichtextPipe(domSanitizer);
  });

  it('should convert EventPage page link', () => {
    // Setup
    const html = '<a id="1" linktype="page" pagetype="EventPage">foo</a>';

    // Test
    const result = pipe.transform(html); 

    // Assert
    const expected = domSanitizer.bypassSecurityTrustHtml('<a routerLink="/events/1">foo</a>');
    expect(result).toEqual(expected);
  });


});

在本例中，RichtextPipe使用bypassSecurityTrustHtml来转换输出。如果您的管道使用不同的旁路方法，那么您可能应该在期望值上使用相同的方法。