注入图像没有删除src属性

Question

是否有一种方式注入HTML而不过滤DART的src属性（上下文无需安全性），我试过setInnerHtml，但它不让src通过它...

这里是我在添加HTML的DIV：

<div id="output"> 
    <!--here goes messages--> 

</div> 

这里是我的镖代码：

import 'dart:html'; 
import 'dart:async'; 

InputElement input = querySelector("#textInput"); 
var output = querySelector("#output"); 
var buttonSend = querySelector("#send"); 
var buttonImg = querySelector("#url"); 
var buttonVideo = querySelector("#video"); 

Future<Null> main() async { 

    //send custom message 
    buttonSend.onClick.listen((MouseEvent event) async{ 
    addContent(input.value); 
    }); 

    //send img 
    buttonImg.onClick.listen((MouseEvent event) async{ 
    addContent(getPrefabImg(input.value)); 
    }); 

    //send video 
    buttonVideo.onClick.listen((MouseEvent event) async{ 
    addContent(getPrefabVideo(input.value)); 
    }); 
} 

//if user use a prefab img 
String getPrefabImg(url) { 
    return "<img class='prefabImg' src='" + url + "'>"; 
} 


//if user use a prefab video 
String getPrefabVideo(url) { 
    return "<iframe class='prefabVideo'' src='" + url + "' frameborder='0' allowfullscreen></iframe>"; 
} 


//reset input and add content 
void addContent(value){ 
    output.setInnerHtml(value + output.innerHtml); 
    input.value = null; 
} 

Answer 1

要创建和注入HTML到DOM没有NodeTreeSanitizer，则需要SWIT从使用HTML String s到使用Dart的Node对象。以您的代码中的几个函数为例，您可以将它们更改为类似;

ImageElement getPrefabImg(String url) { 
    return new ImageElement(src: url)..classes.add('prefabImage'); 
} 

void addContent(Node node) { 
    output.nodes.insert(0, node); 
    input.value = null; 
} 

但与您目前的代码，你可以很容易地像这样添加NodeTreeSanitizer;

void addContent(String value) { 
    output.insertAdjacentHtml(
     'afterBegin', value, treeSanitizer: NodeTreeSanitizer.trusted); 
    input.value = null; 
}