base64 img src in WebUI leads to an error - dart

Question

Here is the problematic part of the template:
<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 is a list of 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);
}
}
}
The template gets displayed. It shows the filename, it shows the source but the imagetag looks like
<img alt="screenshot-1179.png" src="#">
The hash is underlined (in Chromium source view) and if I click on it it says "File not found: /web/out/"
Converted to JS is says in Chrome:
"Resource interpreted as Image but transferred with MIME type text/html"
Sample source is on GitHub
Any hints?

Answer 1

Note that if you know that you are handling a safe URI that is not vulnerable to XSS, you can work around this problem by using a SafeUri wrapper (imported from web_ui/web_ui.dart). For instance, change your template from:
<img src="{{file.src}}" alt="{{file.filename}}">
to:
<img src="{{new SafeUri.unsafe(file.src)}}" alt="{{file.filename}}">
Or change file.src internally to store a SafeUri.

Answer 2

I found the problem.
It's because the URI gets sanitized for security reasons. The sanitizer turns invalid URIs into a hash #.
From 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();
}
So the sanitizer turns your data: scheme URI into a #. Data URIs can be used for XSS, but as far as I know the check could be improved by allowing data URIs when the data URI content type is image/*.
Perhaps file a bug report?