部署网页后用户能否修改源文件？字段偏好保存功能是否仍可用？

一、部署后字段偏好保存功能能否正常工作？ #

你的功能在本地能正常运行，但部署到线上后能否正常工作，需要解决以下几个关键问题：

1. 文件路径问题
   后端代码中使用的相对路径./sql-statistical-analysis/src/assets/savedFieldsPreferences.json，在本地开发环境的工作目录和部署服务器的工作目录大概率不一致，会导致文件写入失败。建议改用绝对路径，借助Node.js的path模块生成：

   const path = require('path');
   const filePath = path.resolve(__dirname, './sql-statistical-analysis/src/assets/savedFieldsPreferences.json');
   fs.writeFile(filePath, message.utf8Data, 'utf8', function(err) {
     if (err) throw err;
   });
   

2. 服务器文件权限
   部署服务器上的Node.js进程运行用户，必须拥有目标JSON文件所在目录的读写权限，否则fs.writeFile会抛出权限错误，导致保存失败。

3. 并发写入冲突
   当前代码是直接覆盖JSON文件，如果多个用户同时点击保存，后写入的内容会完全覆盖之前的设置，导致数据丢失。虽然你提到仅少数人访问，暂时可能不会出问题，但长期来看建议改用数据库（如SQLite、MongoDB）存储偏好，或给文件写入添加锁机制。

4. WebSocket跨域问题
   本地开发时localhost:3000和localhost:8001属于同源，浏览器允许WebSocket连接。但部署后如果前端和后端的域名/端口不同，需要在WebSocket服务器配置中添加允许的Origin，否则连接会被浏览器拦截。示例修改如下：

   const allowedOrigins = ['https://你的前端域名']; // 替换为实际部署的前端域名
   if (!allowedOrigins.includes(request.origin)) {
     request.reject(403, 'Origin not allowed');
     return;
   }
   const connection = request.accept(null, request.origin);
   

如果以上问题都处理妥当，部署后功能即可正常运行。

二、部署后用户能否修改源文件？ #

用户无法直接修改服务器上的源文件：

• 用户访问的是前端编译后的静态资源（如HTML/CSS/JS），与后端的源文件（包括savedFieldsPreferences.json）相互隔离。
• 用户只能通过你提供的WebSocket接口修改savedFieldsPreferences.json文件，无法直接操作服务器上的源文件。

需要注意的是：

• 不要将服务器的源文件目录配置为Web服务根目录，避免用户通过URL直接下载源文件或配置文件。
• 确保服务器文件权限配置合理，避免Node.js进程拥有过高权限，防止被攻击后篡改更多文件。

附：相关代码与截图 #

字段偏好设置界面

读取保存偏好的代码

let CONFIG = require('../assets/savedFieldsPreferences.json');

前端保存按钮代码

<button onClick={()=>{
    client2.send(JSON.stringify(State.values.Fields))
}} style={{marginTop: "1rem", height: "30px", fontSize: "16pt", fontWeight: "bold", backgroundColor: "lightblue"}}>Save Preferences (Will Reload Page)</button>

后端WebSocket处理代码

const server2 = http.createServer();
server2.listen(8001);
const wsServer2 = new webSocketServer({
  httpServer: server2,
  maxReceivedFrameSize: 131072,
  maxReceivedMessageSize: 10 * 1024 * 1024,
  autoAcceptConnections: false
});

wsServer2.on('request', function(request) {
  var userID = 10;
  console.log((new Date()) + ' Recieved a new connection from origin ' + request.origin + '. 2');
  // You can rewrite this part of the code to accept only the requests from allowed origin
  const connection = request.accept(null, request.origin);
  clients[userID] = connection;
  connection.on('message', function(message) {
    //let fields = JSON.parse(message.utf8Data)
    let fs = require('fs');
    fs.writeFile('./sql-statistical-analysis/src/assets/savedFieldsPreferences.json', message.utf8Data, 'utf8', function(err) {
    if (err) throw err;
    //console.log('complete');
    });
  })
});

内容的提问来源于stack exchange，提问作者Anthony The Nguyen