fix:修复xss 模板注入漏洞

Author: dazjean

packages/core-common/src/index.js

@@ -1,7 +1,7 @@
 export { Logger } from './log';
 export { isDev, getOptions, setOptions } from './common';
 export * from './loadConfig';
-
+export * from './util';
 import { isDev, getOptions, setOptions } from './common';
 
 export default {

packages/core-common/src/loadConfig.js

@@ -2,16 +2,16 @@ import fs from 'fs';
 import path, { join } from 'path';
 import { parse as parseUrl } from 'url';
 
-export const tempDir = join(process.cwd() + '/.ssr');
-export const cacheDir = join(process.cwd() + '/.ssr/cache');
-export const outPutDir = join(process.cwd() + '/.ssr/output');
-export const serverDir = join(process.cwd() + '/dist/server');
-export const clientDir = join(process.cwd() + '/dist/client');
-export const webpackConfigPath = join(process.cwd() + './webpack.config.js');
 export const cwd = process.cwd();
+export const tempDir = join(cwd + '/.ssr');
+export const cacheDir = join(cwd + '/.ssr/cache');
+export const outPutDir = join(cwd + '/.ssr/output');
+export const serverDir = join(cwd + '/dist/server');
+export const clientDir = join(cwd + '/dist/client');
+export const webpackConfigPath = join(cwd + './webpack.config.js');
 export const SSRKEY = Symbol('SSR');
 
-const newOptionsPath = path.resolve(process.cwd(), './config/ssr.config.js');
+const newOptionsPath = path.resolve(cwd, './config/ssr.config.js');
 const defaultOptions = {
     ssr: true, // 全局开启服务端渲染
     cache: false, //  全局使用服务端渲染缓存
@@ -23,8 +23,8 @@ const defaultOptions = {
 };
 let coreOptions = null;
 
-/**umajs-react-ssr方案时，生成前部署构建时扫描其配置文件
- * 兼容@umajs/plugin-react-ssr配置
+/**
+ * 兼容@umajs/plugin-react/vue-ssr配置
  * @returns
  */
 function umajs_plugin_options() {
@@ -34,9 +34,17 @@ function umajs_plugin_options() {
         Uma.instance({ ROOT: './app' }).loadConfig();
         opt = Uma.config?.ssr || {}; // ssr.config.ts
         const reactSsrPlugin = Uma.config?.plugin['react-ssr'];
+        const vueSsrPlugin = Uma.config?.plugin['vue-ssr'];
+        const ssrPlugin = Uma.config?.plugin['ssr'];
         if (reactSsrPlugin?.options) {
             opt = reactSsrPlugin.options;
         }
+        if (vueSsrPlugin?.options) {
+            opt = vueSsrPlugin.options;
+        }
+        if (ssrPlugin?.options) {
+            opt = ssrPlugin.options;
+        }
     } catch (_error) {}
     return opt;
 }

packages/core-common/src/util.js

@@ -0,0 +1,24 @@
+const replaceSpecialStr = (str) => {
+    return str
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/ /g, '&nbsp;')
+        .replace("'", '&#39;')
+        .replace('"', '&quot;')
+        .replace(/{{/g, '')
+        .replace(/}}/g, '');
+};
+
+export const filterXssByJson = (json) => {
+    for (let key in json) {
+        if (json[key] instanceof Array) {
+            json[key] = json[key].map((item) => {
+                return replaceSpecialStr(item);
+            });
+        } else {
+            json[key] = replaceSpecialStr(json[key]);
+        }
+    }
+    return json;
+};

packages/core-react/package-lock.json

@@ -52,7 +52,8 @@
 		"koa-send": "^5.0.0",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
-		"react-router-dom": "^5.2.0"
+		"react-router-dom": "^5.2.0",
+		"serialize-javascript": "^6.0.0"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.14.5",

packages/core-react/package.json

@@ -1,8 +1,16 @@
 import fs from 'fs';
 import React from 'react';
+import serialize from 'serialize-javascript';
 import ReactDOMServer from 'react-dom/server';
 import { StaticRouter } from 'react-router-dom';
-import common, { clientDir, serverDir, cacheDir, SSRKEY, Logger } from '@srejs/common';
+import common, {
+    clientDir,
+    serverDir,
+    cacheDir,
+    SSRKEY,
+    Logger,
+    filterXssByJson
+} from '@srejs/common';
 import { loadGetInitialProps } from './initialProps';
 import { DevMiddlewareFileSystem, getEntryList, WebpackReact as webPack } from '@srejs/webpack';
 
@@ -56,17 +64,6 @@ export const readPageHtml = (page) => {
     });
 };
 
-const filterXss = (str) => {
-    var s = '';
-    s = str.replace(/&/g, '&');
-    s = s.replace(/</g, '&lt;');
-    s = s.replace(/>/g, '&gt;');
-    s = s.replace(/ /g, '&nbsp;');
-    s = s.replace("'", '&#39;');
-    s = s.replace('"', '&quot;');
-    return s;
-};
-
 const writeFileHander = (cacheDir, cacheUrl, Content) => {
     fs.exists(cacheUrl, (exists) => {
         if (exists) {
@@ -107,6 +104,7 @@ export const renderServer = async (ctx, initProps, ssr = true) => {
     const context = {};
     let props = {};
     var { page, query } = ctx[SSRKEY];
+    query = filterXssByJson(query);
     if (!getEntryList().has(page)) {
         return false;
     }
@@ -154,32 +152,21 @@ export const renderServer = async (ctx, initProps, ssr = true) => {
         });
         ctx.res.end();
     } else {
-        // 加载 index.html 的内容
         let data = await readPageHtml(page);
-        //进行xss过滤
-        for (let key in query) {
-            if (query[key] instanceof Array) {
-                query[key] = query[key].map((item) => {
-                    return filterXss(item);
-                });
-            } else {
-                query[key] = filterXss(query[key]);
-            }
-        }
+        const ssrData = {
+            initProps: props,
+            page,
+            path: ctx[SSRKEY].path,
+            query,
+            options: ctx[SSRKEY].options
+        };
         let rootNode = ctx[SSRKEY].options.rootNode;
         let replaceReg = new RegExp(`<div id="${rootNode}"><\/div>`);
         // 把渲染后的 React HTML 插入到 div 中
         let document = data.replace(
             replaceReg,
             `<div id="${rootNode}">${Html}</div>
-             <script>var __SSR_DATA__ = 
-                {
-                    initProps:${JSON.stringify(props || {})},
-                    page: "${page}",
-                    path:"${ctx[SSRKEY].path}",
-                    query:${JSON.stringify(query || {})},
-                    options:${JSON.stringify(ctx[SSRKEY].options || {})}
-                }
+             <script>var __SSR_DATA__ = ${serialize(ssrData, { isJSON: true })}
              </script>`
         );
         document = renderDocumentHead(document, props);

packages/core-react/src/render.js

@@ -1,6 +1,13 @@
 import fs from 'fs';
 import { createRenderer } from 'vue-server-renderer';
-import common, { clientDir, serverDir, cacheDir, SSRKEY, Logger } from '@srejs/common';
+import common, {
+    clientDir,
+    serverDir,
+    cacheDir,
+    SSRKEY,
+    Logger,
+    filterXssByJson
+} from '@srejs/common';
 import serialize from 'serialize-javascript';
 import {
     VueDevMiddlewareFileSystem as DevMiddlewareFileSystem,
@@ -97,6 +104,7 @@ export const checkModules = async (page) => {
 export const renderServer = async (ctx, initProps = {}, ssr = true) => {
     let context = { url: ctx.req.url };
     var { page, query } = ctx[SSRKEY];
+    query = filterXssByJson(query);
     if (!getVueEntryList().has(page)) {
         return false;
     }