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

Question

有没有办法在不过滤 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;
 }

Answer 1

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

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

inject Image without removing src attribute

dart

dart-html