Fix dictionary image support (#1526)

* Fix content security policy for images

* Add createBlobFromBase64Content to MediaUtil

* Update MediaLoader to use MediaUtil

* Use blob URLs when importing dictionaries

* Update VM's URL to support createObjectURL and revokeObjectURL

* Fix test

6 files changed, 27 insertions, 14 deletions

diff --git a/ext/js/language/dictionary-importer.js b/ext/js/language/dictionary-importer.js
index b4429315..888d19b0 100644
--- a/ext/js/language/dictionary-importer.js
+++ b/ext/js/language/dictionary-importer.js
@@ -400,7 +400,9 @@ class DictionaryImporter {
                 eventListeners.removeAllEventListeners();
                 reject(new Error('Image failed to load'));
             }, false);
-            image.src = `data:${mediaType};base64,${content}`;
+            const blob = MediaUtil.createBlobFromBase64Content(content, mediaType);
+            const url = URL.createObjectURL(blob);
+            image.src = url;
         });
     }
 }
diff --git a/ext/js/media/media-loader.js b/ext/js/media/media-loader.js
index d9d40a36..4ac733c5 100644
--- a/ext/js/media/media-loader.js
+++ b/ext/js/media/media-loader.js
@@ -15,6 +15,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+/* global
+ * MediaUtil
+ */
+
 class MediaLoader {
     constructor() {
         this._token = {};
@@ -82,22 +86,11 @@ class MediaLoader {
         const token = this._token;
         const data = (await yomichan.api.getMedia([{path, dictionaryName}]))[0];
         if (token === this._token && data !== null) {
-            const contentArrayBuffer = this._base64ToArrayBuffer(data.content);
-            const blob = new Blob([contentArrayBuffer], {type: data.mediaType});
+            const blob = MediaUtil.createBlobFromBase64Content(data.content, data.mediaType);
             const url = URL.createObjectURL(blob);
             cachedData.data = data;
             cachedData.url = url;
         }
         return cachedData;
     }
-
-    _base64ToArrayBuffer(content) {
-        const binaryContent = window.atob(content);
-        const length = binaryContent.length;
-        const array = new Uint8Array(length);
-        for (let i = 0; i < length; ++i) {
-            array[i] = binaryContent.charCodeAt(i);
-        }
-        return array.buffer;
-    }
 }
diff --git a/ext/js/media/media-util.js b/ext/js/media/media-util.js
index 11172c5c..f783038a 100644
--- a/ext/js/media/media-util.js
+++ b/ext/js/media/media-util.js
@@ -129,4 +129,20 @@ class MediaUtil {
                 return null;
         }
     }
+
+    /**
+     * Creates a new `Blob` object from a base64 string of content.
+     * @param content The binary content string encoded in base64.
+     * @param mediaType The type of the media.
+     * @returns A new `Blob` object corresponding to the specified content.
+     */
+    static createBlobFromBase64Content(content, mediaType) {
+        const binaryContent = atob(content);
+        const length = binaryContent.length;
+        const array = new Uint8Array(length);
+        for (let i = 0; i < length; ++i) {
+            array[i] = binaryContent.charCodeAt(i);
+        }
+        return new Blob([array.buffer], {type: mediaType});
+    }
 }
diff --git a/ext/manifest.json b/ext/manifest.json
index 7868924f..ee383e84 100644
--- a/ext/manifest.json
+++ b/ext/manifest.json
@@ -113,5 +113,5 @@
         "popup.html",
         "template-renderer.html"
     ],
-    "content_security_policy": "default-src 'self'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *"
+    "content_security_policy": "default-src 'self'; img-src blob: 'self'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *"
 }
diff --git a/ext/popup.html b/ext/popup.html
index dfe547b2..78e89997 100644
--- a/ext/popup.html
+++ b/ext/popup.html
@@ -123,6 +123,7 @@
 <script src="/js/language/text-scanner.js"></script>
 <script src="/js/media/audio-system.js"></script>
 <script src="/js/media/media-loader.js"></script>
+<script src="/js/media/media-util.js"></script>
 <script src="/js/media/text-to-speech-audio.js"></script>
 <script src="/js/script/dynamic-loader.js"></script>
 <script src="/js/templates/template-renderer-proxy.js"></script>
diff --git a/ext/search.html b/ext/search.html
index 9e4c8f2e..48abb8b7 100644
--- a/ext/search.html
+++ b/ext/search.html
@@ -107,6 +107,7 @@
 <script src="/js/language/text-scanner.js"></script>
 <script src="/js/media/audio-system.js"></script>
 <script src="/js/media/media-loader.js"></script>
+<script src="/js/media/media-util.js"></script>
 <script src="/js/media/text-to-speech-audio.js"></script>
 <script src="/js/script/dynamic-loader.js"></script>
 <script src="/js/templates/template-renderer-proxy.js"></script>