Question

以下是模板中有问题的部分：

<ul id="list">
  <template iterate='file in convertedfiles.files'>
    <li>{{file.filename}}
    <template if='file.isImage'>
      <img src="{{file.src}}" alt="{{file.filename}}"><br/>
      Source: {{file.src}}
     </template>
    </li>
  </template>
</ul>

convertedfiles是AndroidFile的列表：

class AndroidFile {
File _file;  

String filename;
String src;
bool isImage;

AndroidFile(this._file) : isImage = false {
    filename = htmlEscape(_file.name);

    // If the file is an image, read and display its thumbnail.
    if (_file.type.startsWith('image')) {
    FileReader reader = new FileReader();
    reader.on.load.add((e) {
        src = reader.result.toString().trim();

        // prints the correct URL (data:image/png;base64,...)
        print(src);
        isImage = true;  
        watcher.dispatch();
      });

    reader.readAsDataUrl(_file);  
    }
  }
}

显示模板。它显示文件名，它显示源，但imagetag看起来像

 <img alt="screenshot-1179.png" src="#">

哈希加下划线（在Chromium源代码视图中），如果我点击它就会显示“找不到文件：/ web / out /”

转换为JS在Chrome中说： “资源解释为图像，但使用MIME类型text / html传输”

示例来源在GitHub上任何提示？

Answer 1

请注意，如果您知道自己正在处理不易受XSS攻击的安全URI，则可以使用SafeUri包装器（从web_ui/web_ui.dart导入）解决此问题。例如，从以下位置更改模板：

<img src="{{file.src}}" alt="{{file.filename}}">

为：

<img src="{{new SafeUri.unsafe(file.src)}}" alt="{{file.filename}}">

或在内部更改file.src以存储SafeUri。

Answer 2

我发现了问题。

这是因为出于安全原因，URI会被清理。清理程序将无效的URI转换为哈希#。

来自web_ui/templating.dart：

/**
 * Ensure that [usiString] is a safe URI. Otherwise, return a '#' URL.
 *
 * The logic in this method was based on the GWT implementation located at:
 * http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/safehtml/shared/UriUtils.java
 */
String sanitizeUri(uri) {
  if (uri is SafeUri) return uri.toString();
  uri = uri.toString();
  return _isSafeUri(uri) ? uri : '#';
}

const _SAFE_SCHEMES = const ["http", "https", "ftp", "mailto"];

bool _isSafeUri(String uri) {
  var scheme = new Uri(uri).scheme;
  if (scheme == '') return true;

  // There are two checks for mailto to correctly handle the Turkish locale.
  //   i -> to upper in Turkish locale -> İ
  //   I -> to lower in Turkish locale -> ı
  // For details, see: http://www.i18nguy.com/unicode/turkish-i18n.html
  return _SAFE_SCHEMES.contains(scheme.toLowerCase()) ||
      "MAILTO" == scheme.toUpperCase();
}

因此，清理程序会将您的data:方案URI转换为#。数据URI可以用于XSS，但据我所知，当数据URI内容类型为image/*时允许数据URI可以改进检查。

也许提交错误报告？

WebUI中的base64 img src导致错误

2 个答案: