在不删除 src 属性的情况下注入图像答案

【问题标题】：inject Image without removing src attribute在不删除 src 属性的情况下注入图像
【发布时间】：2017-04-02 03:45:58
【问题描述】：

有没有办法在不过滤 Dart 中的 src 属性的情况下注入 HTML（上下文中不需要安全性），我试过 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;
 }

【问题讨论】：

标签： dart dart-html

【解决方案1】：

要在没有 NodeTreeSanitizer 的情况下创建 HTML 并将其注入 DOM，您需要从使用 HTML Strings 切换到使用 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;
}

【讨论】：