src属性を削除せずに画像を挿入

Question

Dartのsrc属性をフィルタリングせずにHTMLを挿入する方法はありますか（コンテキストでセキュリティーは必要ありません）、setInnerHtmlを試しましたが、srcに渡しません。

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

</div> 

ここに私のダーツコードだ：ここ

は私がHTMLを追加している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

作成し、NodeTreeSanitizerせずにDOMにHTMLを挿入するには、あなたがSWITする必要があります。 HTML Stringを使用して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; 
}