diff --git a/packages/subapp-web/lib/load.js b/packages/subapp-web/lib/load.js
index 21c217a30..50bf5d16f 100644
--- a/packages/subapp-web/lib/load.js
+++ b/packages/subapp-web/lib/load.js
@@ -18,6 +18,7 @@ const _ = require("lodash");
 const retrieveUrl = require("request");
 const util = require("./util");
 const xaa = require("xaa");
+const jsesc = require("jsesc");
 const { loadSubAppByName, loadSubAppServerByName } = require("subapp-util");
 
 // global name to store client subapp runtime, ie: window.xarcV1
@@ -225,7 +226,11 @@ module.exports = function setup(setupContext, { props: setupProps }) {
           // embed large initial state as text and parse with JSON.parse instead.
           const dataId = `${name}-initial-state-${Date.now()}-${++INITIAL_STATE_TAG_ID}`;
           dynInitialState = `<script type="application/json" id="${dataId}">
-${initialStateStr}
+${jsesc(JSON.parse(initialStateStr), {
+  json: true,
+  isScriptContext: true,
+  wrap: true
+})}
 </script>
 `;
           initialStateScript = `JSON.parse(document.getElementById("${dataId}").innerHTML)`;
diff --git a/packages/subapp-web/package.json b/packages/subapp-web/package.json
index 9eb5e769b..3adcad7e3 100644
--- a/packages/subapp-web/package.json
+++ b/packages/subapp-web/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.3",
     "history": "^4.9.0",
+    "jsesc": "^2.5.2",
     "little-loader": "^0.2.0",
     "lodash": "^4.17.15",
     "optional-require": "^1.0.0",