En RC.1 certains styles ne peuvent pas être ajoutés à l'aide de la syntaxe de liaison

Styles comme

<div [style.background-image]="\'url(\' + image + \')\'">Background</div>
<div [style.transform]="rotate(7deg)"

ne sont pas ajoutés plus

InformationsquelleAutor Günter Zöchbauer | 2016-05-06

angular css

110

mise à jour (2.0.0 final)
```
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

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

  transform(html) {
    return this.sanitizer.bypassSecurityTrustStyle(html);
    //return this.sanitizer.bypassSecurityTrustHtml(html);
    //return this.sanitizer.bypassSecurityTrustScript(html);
    //return this.sanitizer.bypassSecurityTrustUrl(html);
    //return this.sanitizer.bypassSecurityTrustResourceUrl(html);
  }
}
```
Voir aussi https://angular.io/api/platform-browser/DomSanitizer
```
<div [innerHTML]="someHtml | safeHtml"
```
mise à jour

DomSanitizationService va être renommé DomSanitizer en RC.6

original

Ce doit être fixé dans la RC.2

Voir aussi Angular2 Guide Du Développeur - Sécurité

Angular2 intruduced stérilisation de la CSS des valeurs et des biens de liaison comme [innerHTML]=... et [src]="..." en RC.1

Voir aussi https://github.com/angular/angular/issues/8491#issuecomment-217467582

Les valeurs peuvent être marqués comme digne de confiance en utilisant DomSanitizer.bypassSecurityTrustStyle(...)
```
import {DomSanitizer} from '@angular/platform-browser';
...
constructor(sanitizer: DomSanitizationService) {
  this.backgroundImageStyle = sanitizer.bypassSecurityTrustStyle('url(' + this.image + ')');
  //for HTML
  //this.backgroundImageStyle = sanitizer.bypassSecurityTrustHtml(...);

}
```
et la liaison à cette valeur à la place de la non fiables chaîne simple.

Cela peut aussi être enveloppé dans une pipe comme
```
@Pipe({name: 'safeStyle'})
export class Safe {
  constructor(private sanitizer:Sanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
    //return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustScript(value);
    //return this.sanitizer.bypassSecurityTrustUrl(value);
    //return this.sanitizer.bypassSecurityTrustResourceUrl(value);
  }
}
```
```
<div [ngStyle]="someStyle | safeStyle"></div>
```
avec
```
someHtml = `<a href="#" onClick="alert(document.cookie);">click to see the awesome</a>`;
```
est encore à travailler, cependant,: - [ (travail en cours)

Plunker exemple (Angulaire 2.0.0-rc-1)

Voir aussi Angulaire 2 Le Suivi De La Sécurité Problème

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

Indice sur {{...}}

Aseptisé contenu ne peut pas être lié à l'aide de prop="{{sanitizedContent}}" parce que {{}} stringyfies la valeur avant il est affecté à laquelle les pauses d'assainissement.
- Voir aussi stackoverflow.com/questions/37238757/...
- La pipe est une excellente idée. Merci!!!!
- Pour quelque raison, quand j'essaie d'utiliser ce service, l'injection de dépendance ne fonctionne pas. Au lieu d'obtenir le service de la mise en œuvre, - je obtenir abstract service (qui est un objet vide). Avez-vous une idée de pourquoi cela se produit? Ai-je raté quelque chose?
- pouvez-vous s'il vous plaît créer une nouvelle question et ajouter un peu de code qui illustre ce que vous faites réellement. Si possible un Plunker qui permet de reproduire.
- le problème est que je ne peux pas le reproduire. Dans Plunker il fonctionne très bien. Seulement, quand je lance mon application, localement, il échoue. J'ai pensé que peut-être c'est quelque chose que vous avez rencontré. Mais vous avez raison, je devrais ouvrir une nouvelle question pour cela.
- Essayez de purge npm_modules et de le réinstaller. J'ai vu que mentionné à plusieurs reprises récemment qu'il résout des problèmes bizarres.
- il n'est pas fixé sur rc.2
- Certains styles ne sont pas censés être ajouté sans explicitement bypassSecurityXxx
- Juste une question, ne faut-il pas votre SafeHtml mettre en œuvre PipeTransform?
- vous êtes de droite. À l'époque, il a bien fonctionné sans ainsi
- Jamais pensé que je pourrais le faire avec de la Pipe. thnx
InformationsquelleAutor Günter Zöchbauer
2

En contournant désinfectant faire confiance à tout le contenu peut être un problème de sécurité. Depuis Angulaire n'est pas un dédié désinfection de la bibliothèque, il est trop zélés vers un contenu suspect pour ne pas prendre de risques. Il supprime presque tous les attributs, par exemple. Vous pouvez déléguer la désinfection à la bibliothèque — DOMPurify. Voici un wrapper de la bibliothèque que j'ai fait pour utiliser facilement DOMPurify Angulaire.

https://github.com/TinkoffCreditSystems/ng-dompurify

Il dispose également d'un tuyau, de manière déclarative nettoyer le code HTML:
```
<div [innerHtml]="value | dompurify"></div>
```
Une chose à garder à l'esprit est DOMPurify est idéal pour la désinfection HTML/SVG, mais pas CSS. De sorte que vous pouvez fournisseur Angulaire du CSS désinfectant pour gérer les CSS:
```
import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    //...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
        },
    ],
    //...
})
export class AppModule {}
```
Interne — hense ɵ préfixe, mais c'est de cette façon Angulaire de l'équipe de l'utiliser à travers leurs propres forfaits ainsi de toute façon.

InformationsquelleAutor waterplea

Vous devez vous connecter pour publier un commentaire.