X-Frame-Options 未显示在响应标头中

X-Frame-Options not showing up in response headers

提问人:Seeker 提问时间:10/31/2023 最后编辑:Seeker 更新时间:11/17/2023 访问量:122

问:

我使用以下配置构建了一个创建 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 未显示在响应标头中

不确定我的配置有什么问题。谁能帮我解决这个问题?

reactjs dockerfile gzip x-frame-options craco

评论

0赞 Miao Tian-MSFT 11/1/2023
使用的是 Azure DevOps 还是 Azure Pipelines?yaml 文件似乎不是 Azure Pipeline 的 yaml。

答: 暂无答案