注入圖像沒有刪除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; 
}