diff --git a/packages/ui-default/backendlib/template.js b/packages/ui-default/backendlib/template.js
index 22f38f56c..29c024cfb 100644
--- a/packages/ui-default/backendlib/template.js
+++ b/packages/ui-default/backendlib/template.js
@@ -4,6 +4,7 @@ const yaml = require('js-yaml');
 const serialize = require('serialize-javascript');
 const nunjucks = require('nunjucks');
 const { filter } = require('lodash');
+const jsesc = require('jsesc');
 const argv = require('cac')().parse();
 const { findFileSync } = require('@hydrooj/utils/lib/utils');
 const status = require('@hydrooj/utils/lib/status');
@@ -66,6 +67,7 @@ class Nunjucks extends nunjucks.Environment {
     this.addFilter('ansi', (self) => misc.ansiToHtml(self));
     this.addFilter('base64_encode', (s) => Buffer.from(s).toString('base64'));
     this.addFilter('base64_decode', (s) => Buffer.from(s, 'base64').toString());
+    this.addFilter('jsesc', (self) => jsesc(self, { isScriptContext: true }));
     this.addFilter('bitand', (self, val) => self & val);
     this.addFilter('replaceBr', (self) => self.toString().replace(/\n/g, '<br>'));
     this.addFilter('toString', (self) => (typeof self === 'string' ? self : JSON.stringify(self, replacer)));
diff --git a/packages/ui-default/hydro.js b/packages/ui-default/hydro.js
index 1dc74aa4e..0d9c79d93 100644
--- a/packages/ui-default/hydro.js
+++ b/packages/ui-default/hydro.js
@@ -4,11 +4,10 @@ import _ from 'lodash';
 import Notification from 'vj/components/notification';
 import PageLoader from 'vj/misc/PageLoader';
 import delay from 'vj/utils/delay';
-import base64 from 'vj/utils/base64';
 
 const start = new Date();
-window.UiContext = JSON.parse(base64.decode(window.UiContext));
-window.UserContext = JSON.parse(base64.decode(window.UserContext));
+window.UiContext = JSON.parse(window.UiContext);
+window.UserContext = JSON.parse(window.UserContext);
 
 // eslint-disable-next-line
 try { __webpack_public_path__ = UiContext.cdn_prefix } catch (e) { }
@@ -16,7 +15,7 @@ try { __webpack_public_path__ = UiContext.cdn_prefix } catch (e) { }
 function buildSequence(pages, type) {
   if (process.env.NODE_ENV !== 'production') {
     if (['before', 'after'].indexOf(type) === -1) {
-      throw new Error(`'type' should be one of 'before' or 'after'`); // eslint-disable-line quotes
+      throw new Error("'type' should be one of 'before' or 'after'");
     }
   }
   return pages
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index bb0b75140..090c2b6bd 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.12.28",
+  "version": "4.13.0",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -114,6 +114,7 @@
   },
   "dependencies": {
     "js-yaml": "^4.1.0",
+    "jsesc": "^3.0.2",
     "katex": "^0.13.11",
     "lodash": "^4.17.21",
     "markdown-it": "^12.1.0",
diff --git a/packages/ui-default/templates/layout/html5.html b/packages/ui-default/templates/layout/html5.html
index 8e682ce18..c709a0fee 100644
--- a/packages/ui-default/templates/layout/html5.html
+++ b/packages/ui-default/templates/layout/html5.html
@@ -41,8 +41,8 @@
   {% block body %}{% endblock %}
   {% if not isIE(handler.request.headers['user-agent']) %}
   <script>
-    var UiContext = "{{ UiContext|json|base64_encode }}";
-    var UserContext = "{{ UserContext|json|base64_encode }}";
+    var UiContext = '{{ UiContext|json|jsesc|safe }}';
+    var UserContext = '{{ UserContext|json|jsesc|safe }}';
   </script>
   <script type="text/javascript" src="{{ ('/locale/{0}.js'.format(handler.translate('__id'))) }}"></script>
   <script type="text/javascript" src="/ui-constants.js"></script>