update node packages

- update aspnet-prerendering package from 1.0.x to latest 3.0.1
- fixed code that breaks after using aspnet-prerendering 3.0.1
- added a section about XSS
- updated renderOnServer.js with XSS prevention code

Author: ferrywlto

ClientApp/renderOnServer.js

@@ -6,24 +6,22 @@ const path = require('path')
 const filePath = path.join(__dirname, '../wwwroot/dist/main-server.js')
 const code = fs.readFileSync(filePath, 'utf8')
 
-const bundleRenderer = require('vue-server-renderer').createBundleRenderer(code)
+var prerendering = require('aspnet-prerendering')
 
-module.exports = function (params) {
-  return new Promise(function (resolve, reject) {
-    const context = {
-      url: params.url
-    }
+//prevent XSS attack when initialize state
+var serialize = require('serialize-javascript')
 
-    bundleRenderer.renderToString(context, (err, resultHtml) => {
-      if (err) {
-        reject(err.message)
+module.exports = prerendering.createServerRenderer(function (params) {
+  return new Promise(
+    function (resolve, reject) {
+      const context = {
+        url: params.url,
+        xss: serialize("</script><script>alert('Possible XSS vulnerability from user input!')</script>")
       }
       resolve({
-        html: resultHtml,
         globals: {
-          __INITIAL_STATE__: context.state
+          __INITIAL_STATE__: context
         }
       })
-    })
   })
-}
+});

README.md

@@ -99,7 +99,7 @@ To simulate timely API call form remote server, we add the following line in Hom
         - webpack-merge
     - dependencies:
         - vue-server-renderer
-        - aspnet-prerenderer *(Note that only version ^1.0.0 is supported, using latest ^3.0.0+ will break the code.)*
+        - aspnet-prerenderer
 
 2. Split the code into two part:
 
@@ -130,4 +130,52 @@ Using Bootstrap in VueJS application is easy with BootstrapVue:
 - Import the css files: (tricky here, for this repo I need to add the imports at client.js instead of app.js)  
     import 'bootstrap/dist/css/bootstrap.css'
     import 'boostrap-vue/dist/bootstrap-vue.css'
-- Add the Bootstrap components (e.g. I added a badge at Dashboard.vue template.)
+- Add the Bootstrap components (e.g. I added a badge at Dashboard.vue template.)
+
+### Prevent XSS Attack:
+During the jounary in solveing the asp-prerendering v3.0.0+ dependency issue, I found an article talking about Cross-site scripting attack in JavaScript applications: *[The Most Common XSS Vulnerability in React.js Applications](https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0)* And turns out rednerOnServer.js also has such vulnerability.
+
+    module.exports = prerendering.createServerRenderer(function (params) {
+    return new Promise(
+        function (resolve, reject) {
+        const context = {
+            url: params.url,
+            xss:"</script><script>alert('Possible XSS vulnerability from user input!')</script>"
+        }
+        resolve({
+            globals: {
+            __INITIAL_STATE__: context
+            }
+        })
+    })
+    });
+
+If we modify the renderOnServer.js as above, an alert will be shown when we load the page from browser. This will potentially enable attacker to execute arbitary code. To fix this vulnerability, we can make use of `serialize-javascript` package from Yahoo engineers and cleanse all initial state assignment from user input:
+
+    npm install --save serialize-javascript
+
+and serialize the initial state like this:
+
+    //prevent XSS attack when initialize state
+    var serialize = require('serialize-javascript')
+
+    module.exports = prerendering.createServerRenderer(function (params) {
+        return new Promise(
+            function (resolve, reject) {
+                const context = {
+                url: params.url,
+                xss: serialize("</script><script>alert('Possible XSS vulnerability from user input!')</script>")
+            }
+            resolve({
+                globals: {
+                __INITIAL_STATE__: context
+                }
+            })
+        })
+    });
+
+and when you inspect the HTML from browser you will see the tags are escaped:
+
+    window.__INITIAL_STATE__ = {"url":"/","xss":"\"\\u003C\\u002Fscript\\u003E\\u003Cscript\\u003Ealert('Possible XSS vulnerability from user input!')\\u003C\\u002Fscript\\u003E\""};
+
+Cheers. :smirk:

Startup.cs

@@ -23,12 +23,13 @@ public Startup(IConfiguration configuration)
         public void ConfigureServices(IServiceCollection services)
         {
             services.AddMvc();
+            // services.AddNodeServices();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
         public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory factory)
         {
-            factory.AddConsole();
+            // factory.AddConsole();
 
             if (env.IsDevelopment())
             {   

package.json

@@ -10,28 +10,28 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "aspnet-prerendering": "^1.0.1",
-    "axios": "^0.17.1",
-    "bootstrap": "^4.0.0-beta.2",
-    "bootstrap-vue": "^1.3.0",
+    "aspnet-prerendering": "3.0.1",
+    "axios": "^0.18.0",
+    "bootstrap-vue": "^2.0.0-rc.2",
     "lodash": "^4.17.4",
     "nprogress": "^0.2.0",
-    "vue": "^2.5.9",
+    "serialize-javascript": "^1.4.0",
+    "vue": "^2.5.13",
     "vue-router": "^3.0.1",
-    "vue-server-renderer": "^2.5.9",
+    "vue-server-renderer": "^2.5.13",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "aspnet-webpack": "^2.0.1",
+    "aspnet-webpack": "^2.0.3",
     "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.4",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
-    "vue-loader": "^13.5.0",
-    "vue-template-compiler": "^2.5.9",
-    "css-loader": "^0.28.7",
+    "vue-loader": "^14.2.1",
+    "vue-template-compiler": "^2.5.13",
+    "css-loader": "^0.28.10",
     "json-loader": "^0.5.7",
-    "style-loader": "^0.19.0",
+    "style-loader": "^0.20.2",
     "webpack": "^3.8.1",
     "webpack-hot-middleware": "^2.21.0",
     "webpack-merge": "^4.1.1"