如何禁止浏览器调试时访问前端源码？React生产环境Source Map配置咨询

问题原因 #

你遇到的调试器可查看完整项目代码的现象，确实是source map配置不当导致：生产构建时如果生成了source map文件，且和前端静态资源一同部署到公网、未做访问限制，浏览器会自动根据js文件末尾的sourceMappingURL注释拉取对应.map文件，反解出完整原始源码。Reddit的报错就是因为其限制了公网对source map文件的访问。

最优处理方案 #

结合你需要给Sentry提供source map的需求，推荐按如下步骤处理：

• 构建阶段调整配置：将webpack的devtool配置设置为hidden-source-map，该配置会生成完整的source map文件，但不会在打包后的js文件末尾追加sourceMappingURL注释，浏览器不会主动发起source map的拉取请求，从根源避免触发源码反解。如果用的是Create React App，可以设置GENERATE_SOURCEMAP=true后，自行删除产物js中的sourceMappingURL注释，效果一致。
• Sentry对接规则：生成的source map文件不需要部署到前端静态资源服务器，只需要在CI/CD构建流程中，将对应版本的.map文件直接上传到Sentry平台即可。Sentry会自行存储这些文件用来反解生产报错的堆栈信息，不需要source map对公网可访问。
• Nginx拦截兜底方案：如果确实需要将source map文件部署到静态服务器（比如内部调试场景），可以在现有Nginx配置基础上新增规则，拦截公网对.map文件的访问，配置示例如下：

# 新增source map拦截规则
location ~* \.map$ {
    # 无需内部访问的场景直接返回403即可
    return 403;
    # 如果需要允许内部IP访问可以用如下配置，替换为你的内部网段
    # allow 192.168.0.0/16;
    # deny all;
}

# 原有配置保持不变
location / {
    # serve bundle
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}

配置生效后，公网用户请求source map文件会直接返回403，和你访问Reddit看到的报错效果一致，不会暴露源码，也不影响正常站点功能。

内容的提问来源于stack exchange，提问作者Javier Guzmán