我正在一个项目中，我将生成一个包含bundle.js的静态网站（index.html），并将该静态网站（index.html）像“报告”一样发送给客户。 。这是工作流程：
1st：我需要在前端React.js代码中导入数据，以便将其显示在html网页上。 （某些json文件）
第二：我将这些数据导入到我的JavaScript代码中（例如i mport data from "../../../data/queried_data.json"）
3rd：我将执行npm run build以使用webpack将我的前端代码捆绑到index.html并将bundle.js捆绑到dist文件夹中
4th：我将将此bundle.js上传到AWS S3，并使其地址公开共享。然后，将我的<script>中的index.html标签更改为<script src="http://my-bucket.s3.amasonaws.com/fodler/**bundle.js**">
第五：在更改script文件中的index.html标签之后，我可以将此静态网站index.html发送给我的客户。而且我的客户将能够查看所有数据，用户界面以及在index.html
最棘手的是，前面提到的json data是我的前端代码要呈现并显示在静态网站上，此数据仅应由指定的客户查看。但是，导入到我的前端代码中的那些数据也捆绑到bundle.js文件中。仅当他们的bundle.js被上传并在aws s3上公开共享时，此静态网站（index.html）才能为我的客户使用。因此，由于现在关联的aws s3文件夹（包含客户的bundle.js）是公用的，因此敏感数据将包含在bundle.js中，并且这些敏感数据将以某种方式公开。这是不安全的，因为我不想客户A（index-A.html）可以看到客户B（index-B.html）的数据（我相信客户A可以转到公共aws s3地址并追溯到其他客户的bundle.js，其中包括他们的敏感数据吗？）。
结论和问题：
注意，这是我将发送给指定客户的便携式静态网站。如何确保客户只能看到自己的数据，而不能看到彼此的数据？不使用后端服务器。
如果您有任何想法或建议，请帮助，我很绝望
以下内容供您参考：
Click to see image of folder structure
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
Change "src" to aws s3's bundle.js before sending to customer
-->
<script src="./bundle.js"></script>
</body>
</html>
package.json{
"name": "frontend",
"version": "0.1.0",
"private": true,
"homepage": "./",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"antd": "^4.3.3",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"less-loader": "^6.1.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js",
"test": "echo \\\"Error: no test specified\\\" && exit 1",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.10.1",
"babel-plugin-import": "^1.13.0",
"css-loader": "^3.5.3",
"html-webpack-plugin": "^4.3.0",
"react-hot-loader": "^4.12.21",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
}
}
webpack.prod.jsconst merge = require("webpack-merge");
const path = require("path");
const common = require("./webpack.common.js");
module.exports = merge(common, {
mode: "production",
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "./",
filename: "vadvisor-bundle.js",
},
});
webpack.common.jsconst webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.(pdf|jpg|jpeg|png|gif|svg|ico)$/,
use: [
{
loader: "url-loader",
},
],
},
],
},
resolve: {
extensions: ["*", ".js", ".jsx", ".less"],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public/index.html"),
filename: "index.html",
}),
],
};
这是我将发送给指定客户的便携式静态网站。
对于我来说，让网站由离线.html文件和在线.js文件组成，这听起来不太方便。选择其中一种，而不是混合。
如果您希望将单个工件发送给客户，则有一个甚至更简单的解决方案：只需将脚本内容直接嵌入到嵌入式<script>标签中即可。您甚至可以使用您的构建系统通过模板自动完成此任务。或者，仅将敏感的客户特定的JSON数据嵌入html文件中，并链接在线脚本进行处理，从而减小文件大小并允许对该脚本进行更新。 （但是请确保您是唯一可以更新脚本的人，并且该脚本中已加载了https，这样，当客户打开其文件时，没有其他人可以操纵该脚本来提取数据。）