提问人:Seeker 提问时间:10/31/2023 最后编辑:Seeker 更新时间:11/17/2023 访问量:122
X-Frame-Options 未显示在响应标头中
X-Frame-Options not showing up in response headers
问:
我使用以下配置构建了一个创建 React 应用程序:
这是我的:craco.config.js
const path = require('path');
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');
const terserPlugin = require('terser-webpack-plugin');
module.exports = {
webpack: {
configure: (webpackConfig) => {
webpackConfig.resolve.fallback = {
...webpackConfig.resolve.fallback,
os: require.resolve('os-browserify/browser'),
path: require.resolve('path-browserify'),
buffer: require.resolve('buffer/'),
process: require.resolve('process/browser'),
};
webpackConfig.plugins.push(
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
process: 'process/browser',
}),
new CompressionPlugin({
filename: '[path][base].gz',
algorithm: 'gzip',
test: /\.(js|jsx|ts|tsx|css|scss|html|svg)$/,
threshold: 10240,
minRatio: 0.8,
})
);
webpackConfig.optimization = {
...webpackConfig.optimization,
minimizer: [
new terserPlugin({
terserOptions: {
format: {
ecma: 6, // Use ECMAScript 2015 syntax
indent_level: 2, // Use 2 spaces for indentation
comments: false, // Remove comments
quote_style: 3, // Use original quote style
},
mangle: true, // Enable name mangling
module: true, // Enable module optimizations
toplevel: true, // Enable top level optimizations
compress: {
ecma: 6, // Use ECMAScript 2015 syntax
},
},
}),
],
};
return webpackConfig;
},
},
devServer: {
compress: true,
},
};
这是我在package.json
"build": "craco build",
这是我的.Docker文件:
# Stage 1: Build stage
# pull official base image
FROM node:18-alpine as builder
# Update and upgrade Alpine
RUN apk update && apk upgrade
# Install openssl
RUN apk add openssl
# set working directory
WORKDIR /app
# COPY package-lock.json ./
# RUN npm ci
# copy application files to container
# Copying files
COPY package.json ./
#COPY package-lock.json ./
COPY ./src ./src
COPY ./public ./public
COPY ./__mocks__ ./__mocks__
COPY .env ./
COPY .eslintrc ./
COPY babel.config.js ./
COPY craco.config.js ./
COPY server.js ./
# Installing Dependencies
RUN npm install
# install serve package globally
# RUN npm install -g serve
# build app
RUN npm run build
# Stage 2: Production stage
# FROM node:18-alpine
# stage 2: Production build
FROM node:18-alpine
# Set the working directory in the container
WORKDIR /app
#Copy only necessary files
COPY --from=builder /app/package.json ./
COPY --from=builder /app/build ./build
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/.env ./
COPY --from=builder /app/server.js ./
# expose port 3000
EXPOSE 3000
# run serve command with options
# CMD ["npm", "run", "start"]
# Command to start application using "serve -s build"
# CMD ["npx", "serve", "-s", "build"];
# CMD ["npm", "run", "start:build"];
CMD ["node", "server.js"];
这是我的服务器.js来启动应用程序:
const express = require('express');
const helmet = require('helmet');
const frameguard = require('frameguard');
const path = require('path');
const modifyResponse = require('express-modify-response');
const app = express();
// Use helmet middleware
app.use(helmet());
// Hide x-powered-by header in Response Body
app.use(helmet.hidePoweredBy());
app.use(
helmet.contentSecurityPolicy({
directives: {
defaultSrc: ["'self'"], // default policy for loading content such as fonts, images, etc.
scriptSrc: ["'self'"], // allowed sources for scripts
styleSrc: ["'self'", 'https://fonts.googleapis.com', "'unsafe-inline'"], // allowed sources for styles
imgSrc: ["'self'", 'data:', '*.myapp.com'], // allowed sources for images
mediaSrc: ["'self'", 'data:', '*.myapp.com'], // allowed sources for media
fontSrc: ["'self'", 'https://fonts.gstatic.com'], // allowed sources for fonts
baseUri: ["'self'"], // allowed sources for base URI
manifestSrc: ["'self'"], // allowed sources for manifest
connectSrc: [
"'self'",
'https://login.microsoftonline.com',
'wss://myapp.servicebus.windows.net',
'*.falconwipro.com',
], // allowed sources for connect
frameAncestors: ["'self'"], // allowed sources for frame ancestors
frameSrc: ["'self'", 'https://app.powerbi.com', '*.myapp.com'], // allowed sources for frames
},
})
);
// Use helmet.hsts middleware which tells browser to use only https
app.use(
helmet.hsts({
maxAge: 15552000, // 180 days in seconds
includeSubDomains: true, // apply to subdomains
})
);
// serve static files from build folder
app.use(express.static(path.join(__dirname, 'build')));
// Set referrer policy to send information only to same-origin
app.use(helmet.referrerPolicy({ policy: 'same-origin' }));
// Set X-Frame-Options header
app.use(helmet.frameguard({ action: 'SAMEORIGIN' }));
// Modify Server header
app.use(
modifyResponse(
// added this block
(req, res) => true, // filter condition, we can use it to match specific routes or methods
(req, res, body) => body, // modify the response body if needed
(req, res, headers) => {
headers['Server'] = 'Apache'; // modify the response headers
return headers;
}
)
);
// serve react app
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
部署后。 X-Frame-Options 未显示在响应标头中
不确定我的配置有什么问题。谁能帮我解决这个问题?
答: 暂无答案
评论