Decode template contents using DOMParser to ensure that HTML elements are properly decoded from Django's marksafe method.

Author: rtibbles

packages/kolibri-plugin-data/src/index.js

@@ -1,5 +1,17 @@
+const domParser = new DOMParser();
+
+/*
+ * JSON data that we read from Django have been passed through
+ * Django's marksafe function that escapes any HTML characters.
+ * Use the DOMParser to decode these before we read parse the JSON.
+ */
+function decodeMarkedSafeText(text) {
+  const dom = domParser.parseFromString(text, 'text/html');
+  return dom.documentElement.textContent;
+}
+
 const template = document.querySelector(`template[data-plugin="${__kolibriModuleName}"]`);
 
-const data = template ? JSON.parse(template.innerHTML.trim()) : {};
+const data = template ? JSON.parse(decodeMarkedSafeText(template.innerHTML.trim())) : {};
 
 export default data;

packages/kolibri/internal/__tests__/pluginMediator.spec.js

@@ -415,6 +415,7 @@ describe('Mediator', function () {
     const moduleName = 'test';
     const messageMap = {
       test: 'test message',
+      ampersandMessage: 'test & message',
     };
     let spy;
     beforeEach(function () {
@@ -432,7 +433,10 @@ describe('Mediator', function () {
     });
     it('should call Vue.registerMessages with arguments currentLanguage and messageMap', function () {
       mediator.registerLanguageAssets(moduleName);
-      expect(spy).toHaveBeenCalledWith(currentLanguage, messageMap);
+      expect(spy).toHaveBeenCalledWith(currentLanguage, {
+        test: 'test message',
+        ampersandMessage: 'test & message',
+      });
     });
   });
 });

packages/kolibri/internal/pluginMediator.js

@@ -35,6 +35,18 @@ function mergeMixin(component) {
   return component;
 }
 
+const domParser = new DOMParser();
+
+/*
+ * JSON data that we read from Django have been passed through
+ * Django's marksafe function that escapes any HTML characters.
+ * Use the DOMParser to decode these before we read parse the JSON.
+ */
+function decodeMarkedSafeText(text) {
+  const dom = domParser.parseFromString(text, 'text/html');
+  return dom.documentElement.textContent;
+}
+
 export default function pluginMediatorFactory(facade) {
   /**
    * The Mediator object - registers and loads kolibri_modules and acts as
@@ -273,7 +285,7 @@ export default function pluginMediatorFactory(facade) {
       }
       let messageMap;
       try {
-        messageMap = JSON.parse(messageElement.innerHTML.trim());
+        messageMap = JSON.parse(decodeMarkedSafeText(messageElement.innerHTML.trim()));
       } catch (e) {
         logger.error(`Error parsing language assets for ${moduleName}`);
       }
@@ -344,7 +356,7 @@ export default function pluginMediatorFactory(facade) {
       for (const element of contentRendererElements) {
         const moduleName = element.getAttribute('data-viewer');
         try {
-          const data = JSON.parse(element.innerHTML.trim());
+          const data = JSON.parse(decodeMarkedSafeText(element.innerHTML.trim()));
           const presets = data.presets;
           const urls = data.urls;
           this.registerContentRenderer(moduleName, urls, presets);