Merge pull request #262 from webpack-contrib/proper-js-escape

th0r · web-flow · commit 3ce1b8c3533f · 2019-04-11T13:55:29.000+03:00
Properly escape embedded JS/JSON
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,9 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 <!-- Add changelog entries for new changes under this section -->
 
+ * **Improvements**
+   * Properly escape embedded JS/JSON ([#262](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/262))
+
  * **Bug Fix**
    * Fix showing help message on `-h` flag ([#260](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/260), fixes [#239](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/239))
 
diff --git a/src/viewer.js b/src/viewer.js
@@ -53,7 +53,9 @@ async function startServer(bundleStats, opts) {
       mode: 'server',
       get chartData() { return JSON.stringify(chartData) },
       defaultSizes: JSON.stringify(defaultSizes),
-      enableWebSocket: true
+      enableWebSocket: true,
+      // Helpers
+      escapeScript
     });
   });
 
@@ -131,9 +133,11 @@ async function generateReport(bundleStats, opts) {
       {
         mode: 'static',
         chartData: JSON.stringify(chartData),
-        assetContent: getAssetContent,
         defaultSizes: JSON.stringify(defaultSizes),
-        enableWebSocket: false
+        enableWebSocket: false,
+        // Helpers
+        assetContent: getAssetContent,
+        escapeScript
       },
       (err, reportHtml) => {
         try {
@@ -168,6 +172,13 @@ function getAssetContent(filename) {
   return fs.readFileSync(`${projectRoot}/public/${filename}`, 'utf8');
 }
 
+/**
+ * Escapes `<` characters in the string to safely use it in `<script>` tag.
+ */
+function escapeScript(value) {
+  return String(value).replace(/</gu, '\\u003c');
+}
+
 function getChartData(analyzerOpts, ...args) {
   let chartData;
   const {logger} = analyzerOpts;
diff --git a/views/script.ejs b/views/script.ejs
@@ -1,7 +1,7 @@
 <% if (mode === 'static') { %>
   <!-- <%= filename %> -->
   <script>
-    <%- assetContent(filename) %>
+    <%- escapeScript(assetContent(filename)) %>
   </script>
 <% } else { %>
   <script src="/<%= filename %>"></script>
diff --git a/views/viewer.ejs b/views/viewer.ejs
@@ -11,9 +11,9 @@
   <body>
     <div id="app"></div>
     <script>
-      window.chartData = <%- chartData %>;
-      window.defaultSizes = <%- defaultSizes %>;
-      window.enableWebSocket = <%- enableWebSocket %>;
+      window.chartData = <%- escapeScript(chartData) %>;
+      window.defaultSizes = <%- escapeScript(defaultSizes) %>;
+      window.enableWebSocket = <%- escapeScript(enableWebSocket) %>;
     </script>
   </body>
 </html>
