리소스 URL 컨텍스트에 사용된 안전하지 않은 값리소스 URL 컨텍스트에 사용된 안전하지 않은 값

리소스 URL 컨텍스트에 사용된 안전하지 않은 값

최신 Angular 2 출시 후보로 업그레이드한 이후로, 나의img태그:

<img class='photo-img' [hidden]="!showPhoto1" src='{{theMediaItem.photoURL1}}'>

브라우저 오류 발생:

원래 예외:오류: 리소스 URL 컨텍스트에 사용된 안전하지 않은 값

URL 값은 다음과 같습니다.

http://veeu-images.s3.amazonaws.com/media/userphotos/116_1464645173408_cdv_photo_007.jpg

편집:

이 질문이 중복되어야 하는 다른 솔루션의 제안을 시도해 보았지만 동일한 오류가 발생하고 있습니다.

컨트롤러에 다음 코드를 추가했습니다.

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

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [[NavController], [App], [MenuController], [DomSanitizationService]];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;

    this.theMediaItem.photoURL1 = this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }

저는 여전히 같은 오류 메시지를 받고 있습니다.

EDIT2:

html도 다음으로 변경했습니다.

<img class='photo-img' [hidden]="!showPhoto1" [src]='theMediaItem.photoURL1'>

여전히 동일한 오류 메시지가 표시됨

파이프

    // Angular
    import { Pipe, PipeTransform } from '@angular/core';
    import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
    
    /**
     * Sanitize HTML
     */
    @Pipe({
      name: 'safe'
    })
    export class SafePipe implements PipeTransform {
      /**
       * Pipe Constructor
       *
       * @param _sanitizer: DomSanitezer
       */
      // tslint:disable-next-line
      constructor(protected _sanitizer: DomSanitizer) {
      }
    
      /**
       * Transform
       *
       * @param value: string
       * @param type: string
       */
      transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
        switch (type) {
          case 'html':
            return this._sanitizer.bypassSecurityTrustHtml(value);
          case 'style':
            return this._sanitizer.bypassSecurityTrustStyle(value);
          case 'script':
            return this._sanitizer.bypassSecurityTrustScript(value);
          case 'url':
            return this._sanitizer.bypassSecurityTrustUrl(value);
          case 'resourceUrl':
            return this._sanitizer.bypassSecurityTrustResourceUrl(value);
          default:
            return this._sanitizer.bypassSecurityTrustHtml(value);
        }
      }
    }

템플릿

{{ data.url | safe:'url' }}

바로 그거야!

참고: 필요하지 않지만 파이프의 구성 요소는 다음과 같습니다.

      // Public properties
      itsSafe: SafeHtml;

      // Private properties
      private safePipe: SafePipe = new SafePipe(this.domSanitizer);
    
      /**
       * Component constructor
       *
       * @param safePipe: SafeHtml
       * @param domSanitizer: DomSanitizer
       */
      constructor(private safePipe: SafePipe, private domSanitizer: DomSanitizer) {
      }
    
      /**
       * On init
       */
      ngOnInit(): void {
        this.itsSafe = this.safePipe.transform('<h1>Hi</h1>', 'html');
      }

rc.4를 사용하고 있으며 이 방법은 ES2015(ES6)에 적용됩니다.

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

@Component({
  templateUrl: 'build/pages/veeu/veeu.html'
})
export class VeeUPage {
  static get parameters() {
    return [NavController, App, MenuController, DomSanitizationService];
  }

  constructor(nav, app, menu, sanitizer) {

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;    
  }

  photoURL() {
    return this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  }
}

HTML에서:

<iframe [src]='photoURL()' width="640" height="360" frameborder="0"
    webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

함수를 사용하면 삭제한 후 값이 변경되지 않습니다.또한 사용하는 검사 기능은 상황에 따라 다릅니다.

이미지의 경우 가 작동하지만 다른 용도의 경우 설명서를 참조해야 합니다.

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

이것을 고치는 가장 우아한 방법은 파이프를 사용하는 것입니다.(내 블로그) 예를 들어보겠습니다.그러면 간단히 사용할 수 있습니다.url | safe보안 장치를 우회하는 파이프입니다.

<iframe [src]="url | safe"></iframe>

자세한 내용은 npm 설명서를 참조하십시오. https://www.npmjs.com/package/safe-pipe

안전 파이프를 사용하여 고정합니다.

• 안전한 파이프가 없는 경우 안전한 파이프를 만듭니다.

  ng g pipe safe

• app.module.ts에 안전 파이프 추가

  declarations: [SafePipe]

• 당신의 바지에 안전 파이프를 신고하세요.

url에 안전하게 액세스하려면 Dom Sanitizer 및 Safe Pipe 가져오기

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

@Pipe({ name: 'safe' })

export class SafePipe implements PipeTransform {

constructor(private sanitizer: DomSanitizer) { }
transform(url) {
 return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

• srcurl로 안전 추가

  <img width="900" height="500" [src]="link | safe"/>

보기에 sanitizer를 노출하거나 보안을 무시하기 위해 호출을 전달하는 메서드를 노출할 수 있습니다.신뢰 URL

<img class='photo-img' [hidden]="!showPhoto1" 
    [src]='sanitizer.bypassSecurityTrustUrl(theMediaItem.photoURL1)'>

각도는 기본적으로 모든 값을 신뢰할 수 없는 값으로 처리합니다.템플릿에서 속성, 특성, 스타일, 클래스 바인딩 또는 보간을 통해 값이 DOM에 삽입되면 Angular는 신뢰할 수 없는 값을 검사하고 이스케이프합니다.

따라서 DOM을 직접 조작하고 내용을 삽입하는 경우에는 삭제해야 합니다. 그렇지 않으면 Angular에서 오류가 발생합니다.

파이프 Sanitize를 만들었습니다.이에 대한 UrlPipe

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

@Pipe({
    name: "sanitizeUrl"
})
export class SanitizeUrlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) { }

    transform(v: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustResourceUrl(v);
    }
}

그리고 이것이 당신이 사용할 수 있는 방법입니다.

<iframe [src]="url | sanitizeUrl" width="100%" height="500px"></iframe>

HTML을 추가하려면 삭제HtmlPipe는 도움이 됩니다.

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

@Pipe({
    name: "sanitizeHtml"
})
export class SanitizeHtmlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) { }

    transform(v: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustHtml(v);
    }
}

각도 보안에 대한 자세한 내용은 여기를 참조하십시오.

나는 보통 별도로 추가합니다.safe pipe 가능한 구성 과 같습니다.

# Add Safe Pipe

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

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

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

# then create shared pipe module as following 

import { NgModule } from '@angular/core'; 
import { SafePipe } from './safe.pipe';
@NgModule({
    declarations: [
        SafePipe
    ],
    exports: [
        SafePipe
    ]
})
export class SharedPipesModule {
}

# import shared pipe module in your native module

@NgModule({
    declarations: [],
    imports: [
        SharedPipesModule,
    ],
})
export class SupportModule {
}

<!-------------------
call your url (`trustedUrl` for me) and add `mySafe` as defined in Safe Pipe
---------------->
<div class="container-fluid" *ngIf="trustedUrl">
    <iframe [src]="trustedUrl | mySafe" align="middle" width="100%" height="800" frameborder="0"></iframe>
</div>

다음은 테스트를 거친 더 나은 안전 파이프입니다.

import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import {
  DomSanitizer,
  SafeHtml,
  SafeResourceUrl,
  SafeScript,
  SafeStyle,
  SafeUrl,
  SafeValue,
} from '@angular/platform-browser';

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

  transform(
    value: string | undefined,
    type: string,
    bypass: boolean
  ):
    | SafeHtml
    | SafeStyle
    | SafeScript
    | SafeUrl
    | SafeResourceUrl
    | SafeValue
    | null {
    if (!value) {
      return null;
    }
    switch (type) {
      case 'style':
        return bypass
          ? this.domSanitizer.bypassSecurityTrustStyle(value)
          : this.domSanitizer.sanitize(SecurityContext.STYLE, value);
      case 'script':
        return bypass
          ? this.domSanitizer.bypassSecurityTrustScript(value)
          : this.domSanitizer.sanitize(SecurityContext.SCRIPT, value);
      case 'url':
        return bypass
          ? this.domSanitizer.bypassSecurityTrustUrl(value)
          : this.domSanitizer.sanitize(SecurityContext.URL, value);
      case 'resourceUrl':
        return bypass
          ? this.domSanitizer.bypassSecurityTrustResourceUrl(value)
          : this.domSanitizer.sanitize(SecurityContext.RESOURCE_URL, value);
      default:
        return bypass
          ? this.domSanitizer.bypassSecurityTrustHtml(value)
          : this.domSanitizer.sanitize(SecurityContext.HTML, value);
    }
  }
}



import { DomSanitizer } from '@angular/platform-browser';
import { SafePipe } from './safe.pipe';

const mockDomSanitizer = ({
  sanitize: jest.fn(),
  bypassSecurityTrustHtml: jest.fn(),
  bypassSecurityTrustStyle: jest.fn(),
  bypassSecurityTrustUrl: jest.fn(),
  bypassSecurityTrustResourceUrl: jest.fn(),
  bypassSecurityTrustScript: jest.fn(),
} as unknown) as DomSanitizer;

describe('SafePipe', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });
  it('should return null value when value received is undefined', () => {
    const pipe = new SafePipe(mockDomSanitizer);
    expect(pipe.transform(undefined, 'style', true)).toBeNull();
  });
  test.each([
    { a: 'style', b: true, expected: 'bypassSecurityTrustStyle' },
    { a: 'script', b: true, expected: 'bypassSecurityTrustScript' },
    { a: 'url', b: true, expected: 'bypassSecurityTrustUrl' },
    { a: 'resourceUrl', b: true, expected: 'bypassSecurityTrustResourceUrl' },
    { a: 'html', b: true, expected: 'bypassSecurityTrustHtml' },
  ])('should call the correspondent method', ({ a, b, expected }) => {
    const pipe = new SafePipe(mockDomSanitizer);
    pipe.transform('value', a, b);
    const domSanitizer = mockDomSanitizer as never;
    expect(domSanitizer[expected]).toHaveBeenCalled();
  });

  test.each([
    { a: 'style', b: false, expected: 'sanitize' },
    { a: 'script', b: false, expected: 'sanitize' },
    { a: 'url', b: false, expected: 'sanitize' },
    { a: 'resourceUrl', b: false, expected: 'sanitize' },
    { a: 'html', b: false, expected: 'sanitize' },
  ])('should call the correspondent method', ({ a, b, expected }) => {
    const pipe = new SafePipe(mockDomSanitizer);
    pipe.transform('value', a, b);
    const domSanitizer = mockDomSanitizer as never;
    expect(domSanitizer[expected]).toHaveBeenCalled();
  });
});

import {DomSanitizationService} from '@angular/platform-browser';
@Component({
 templateUrl: 'build/pages/veeu/veeu.html'
 })
  export class VeeUPage {
     trustedURL:any;
      static get parameters() {
               return [NavController, App, MenuController, 
              DomSanitizationService];
        }
      constructor(nav, app, menu, sanitizer) {
        this.app = app;
        this.nav = nav;
        this.menu = menu;
        this.sanitizer = sanitizer;  
        this.trustedURL  = sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
        } 
 }



 <iframe [src]='trustedURL' width="640" height="360" frameborder="0"
   webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>


User property binding instead of function.

방지하기 위해 이미지를 배경 이미지로 설정할 수 있습니다.unsafe url 오류: 오류:

<div [style.backgroundImage]="'url(' + imageUrl + ')'" class="show-image"></div>

CSS:

.show-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-size: cover;        
}

<img class='photo-img' [hidden]="!showPhoto1" src="data:image/jpeg;base64,{{theMediaItem.photoURL1}}">

언급URL : https://stackoverflow.com/questions/37927657/img-unsafe-value-used-in-a-resource-url-context