Sanitize css before sending to Anki (#1722)

* Sanitize css before sending to anki

* Catch sanitizer fails only when `new CSSStyleSheet()` is not available

* Lint

ext/js/core/utilities.js

@@ -16,6 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {log} from './log.js';
+
+
 /**
  * Converts any string into a form that can be passed into the RegExp constructor.
  * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
@@ -262,3 +265,21 @@ export function deferPromise() {
 export function promiseTimeout(delay) {
     return delay <= 0 ? Promise.resolve() : new Promise((resolve) => { setTimeout(resolve, delay); });
 }
+
+/**
+ * @param {string} css
+ * @returns {string}
+ */
+export function sanitizeCSS(css) {
+    let sanitizer;
+    // As of 2023/03/xx, all latest browser versions support this but some forks may lag behind
+    try {
+        sanitizer = new CSSStyleSheet();
+    } catch (e) {
+        log.log('Failed to sanitize dictionary styles');
+        log.warn(e);
+        return css;
+    }
+    sanitizer.replaceSync(css);
+    return [...sanitizer.cssRules].map((rule) => rule.cssText || '').join('\n');
+}

ext/js/data/anki-note-builder.js

@@ -17,7 +17,7 @@
  */
 
 import {ExtensionError} from '../core/extension-error.js';
-import {deferPromise} from '../core/utilities.js';
+import {deferPromise, sanitizeCSS} from '../core/utilities.js';
 import {convertHiraganaToKatakana, convertKatakanaToHiragana} from '../language/ja/japanese.js';
 import {cloneFieldMarkerPattern, getRootDeckName} from './anki-util.js';
 
@@ -192,7 +192,7 @@ export class AnkiNoteBuilder {
         for (const dictionary of dictionaries) {
             const {name, styles} = dictionary;
             if (typeof styles === 'string') {
-                styleMap.set(name, styles);
+                styleMap.set(name, sanitizeCSS(styles));
             }
         }
         return styleMap;