craco

Question

我使用“create-react-app”创建了一个示例反应应用。我需要使用Content-Security-Policy和index.html设置请求标头。我该怎么做呢？我只是尝试使用以下代码更新我的<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none'"> <meta http-equiv="X-Frame-Options" content="SAMEORIGIN">，但我不确定这是否正确。任何人都可以帮忙吗？

{{1}}

Answer 1

您必须重写create-react-app随附的一些webpack配置，并添加"X-Frame-Options": "SAMEORIGIN"。

但是在CRA中，您不能直接使用webpack.config.js来执行此操作。您必须使用重新包装CRA启动/构建应用程序方式的软件包。这是您可以使用的重新布线套件：

react-app-wired（CRA v1）
customize-cra或rescript（CRA v2）
craco（CRA v3）

要了解您使用的CRA版本，可以大致遵循react-scripts中的package.json版本。

craco

我成功完成了这个craco配置！！！在craco.config.js中：

module.exports = {
    webpack: {
        headers: {
            'X-Content-Options': 'Deny'
        }
    }
}

（我通过在Burpsuite中进行扫描进行了测试；框架响应问题已消失。）

参考：How to set alias path via webpack in CRA (create-react-app) and craco?

react-app-rewired

我想您可以尝试一下，但是我还没有测试过。在config-overrides.js中：

module.exports = {
    devServer: function(configFunction) {
        return function(proxy, allowedHost) {
            const config = configFunction(proxy, allowedHost)
            config.headers = {
                'X-Frame-Options': 'Deny'
            }
            return config
        }
    }
}

参考：Create React App adding CORS header

*我可能错误地误解了版本，如果正确，请更正。

Answer 2

仅仅修改index.html是不够的，至少对于X-Frame-Options。每OWASP：

常见的防御错误

尝试应用X-Frame-Options指令的元标记不起作用。例如，）将无法正常工作。您必须将X-FRAME-OPTIONS指令应用为HTTP响应标头...

MDC有a similar warning。

我花了一些时间观察，但没有找到在React本身设置X-Frame-Options的方法。有多种方法可以在服务器级别或其他语言中执行此操作（例如for Tomact，in Java，with webpack或configure it with Spring Security），这可能是也可能不是对你有帮助。

React似乎不支持Content-Security-Policy ...至少not as of 2013，我搜索了但没有找到最近的位置变化。

Answer 3

如果您专门针对开发服务器，则可以使用 'manually configure proxy' process.

配置底层 express 实例

您可以在那里设置标题：

// src/setupProxy.js

module.exports = function(app) {
  app.use((req, res, next) => {
    res.set({
        'foo': 'bar'
    });
      next();
  }); 
};

如何为使用'create-react-app'创建的React应用设置标题

3 个答案:

craco

react-app-rewired

常见的防御错误