fix #171: use FileReader data: URL for image preview (CSP blocks blob:)

internal/web/static/new.js

@@ -254,16 +254,25 @@ function extOf(name) {
 const IMAGE_RE = /^image\//;
 let previewURL = null;
 
+// #171: CSP img-src only allows 'self' and data:, so blob: URLs are
+// blocked — read the file as a data: URL via FileReader instead.
+function readFileDataURL(file, cb) {
+  const r = new FileReader();
+  r.onload = () => cb(r.result);
+  r.readAsDataURL(file);
+}
+
 async function showFileInEditor(file) {
   const wrap = document.querySelector('.editor-wrap');
   const img = $('file-preview');
   if (IMAGE_RE.test(file.type)) {
-    if (previewURL) URL.revokeObjectURL(previewURL);
-    previewURL = URL.createObjectURL(file);
-    img.src = previewURL;
-    img.alt = file.name;
-    wrap.classList.add('previewing');
-    img.classList.remove('hidden');
+    readFileDataURL(file, (dataURL) => {
+      previewURL = dataURL;
+      img.src = dataURL;
+      img.alt = file.name;
+      wrap.classList.add('previewing');
+      img.classList.remove('hidden');
+    });
     return;
   }
   wrap.classList.remove('previewing');