注入<输入>在innerHTML角2 [英] Inject <input> in innerHTML angular 2

问题描述

$ b

 < div [innerHTML ] = inputpdf >< / DIV> 
  

.ts：

  export class FaxSendComponent {
 inputpdf ='< input type =textname =fname>'; 
 
 $ / code> 

这是来自控制台的日志：




警告：清理HTML会剥离一些内容（请参阅
http：/

我尝试使用其他html标记，如<$ c $

解决方案

您应该相信<$ c>

$ c> HTML 首先注入它。您必须使用 DomSanitizer 这样的事情。 < h3> 元素被认为是安全的。 < input> 元素不是。

更改 FaxSendComponent


  export class FaxSendComponent {
 
 private _inputpdf：string =' < input type =textname =fname>'; 
 
 public get inputpdf（）：SafeHtml {
 return this._sanitizer.bypassSecurityTrustHtml（this._inputpdf）; 
 
 
构造函数（private _sanitizer：DomSanitizer）{} 
} 
  


$



 < div [innerHTML] =inputpdfb $ b 
并且让您的模板与此保持一致： >< / DIV> 
  

尽管有点小题：



警告：使用不受信任的用户数据调用此方法会将您的应用程序暴露给XSS安全风险！

如果你计划使用这种技术更多，你可以尝试写一个 Pipe 来完成这项工作。



  @Pipe {
 name：'sanitizeHtml'
}）
 export class SanitizeHtml implements PipeTransform {
 
构造函数（private _sanitizer：DomSanitizer）{} 
 
变换（v：string）：SafeHtml {
返回this._sanitizer.bypassSecurityTrustHtml（v）; 
 
 
 
 
 
 
 
如果你有这样的管道，你的 FaxSendComponent 将改变为： 
 
 
  @Component（{
 selector ：'传真发送'，
模板：`< div [innerHTML] =inputpdf | sanitizeHtml>< / div>`
}）
导出类FaxSendComponent {
 
 public inputpdf：string ='< input type =textname =fname>'; 
 
} 
  
 
I am trying to inject a input HTML tag with Angular 2, here is my project :
    <div [innerHTML]="inputpdf"></div>
The .ts :
export class FaxSendComponent  {
     inputpdf = '<input type="text" name="fname">';
     }
Here is the log from the console : 

  
WARNING: sanitizing HTML stripped some content (see
  http://g.co/ng/security#xss).
I try with other html tag like <h3> and it works perfectly.
解决方案
You should trust the HTML first before injecting it. You have to use the DomSanitizer for such a thing. An <h3> element is considered safe. An <input> element is not.


Change your FaxSendComponent to something like this:
export class FaxSendComponent  {

    private _inputpdf: string = '<input type="text" name="fname">';

    public get inputpdf() : SafeHtml {
       return this._sanitizer.bypassSecurityTrustHtml(this._inputpdf);
    }

    constructor(private _sanitizer: DomSanitizer){}
}
And have your template stay the same as this:
<div [innerHTML]="inputpdf"></div>
A little heads-up though:

  
WARNING: calling this method with untrusted user data exposes your application to XSS security risks!
If you plan on using this technique more, you can try to write a Pipe to fulfil this task.
@Pipe({
    name: 'sanitizeHtml'
})
export class SanitizeHtml implements PipeTransform  {

   constructor(private _sanitizer: DomSanitizer){}  

   transform(v: string) : SafeHtml {
      return this._sanitizer.bypassSecurityTrustHtml(v); 
   } 
} 
If you have a pipe like this, your FaxSendComponent will change to this:
@Component({
   selector: 'fax-send',
   template: `<div [innerHTML]="inputpdf | sanitizeHtml"></div>`
})
export class FaxSendComponent  {

    public inputpdf: string = '<input type="text" name="fname">';

}


                        
这篇关于注入&lt;输入&gt;在innerHTML角2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！