Question

有没有一种方法可以在不过滤Dart中的src属性的情况下注入HTML（上下文中不需要安全性），我已经尝试了setInnerHtml，但是它不允许src传递它...

这是div我正在添加html：

<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属性的情况下注入Image

1 个答案: