@@ -9,120 +9,113 @@ const getHttpsConfig = require('./getHttpsConfig');
99
1010const host = process . env . HOST || '0.0.0.0' ;
1111const sockHost = process . env . WDS_SOCKET_HOST ;
12- const sockPath = process . env . WDS_SOCKET_PATH ; // default: '/sockjs-node '
12+ const sockPath = process . env . WDS_SOCKET_PATH ; // default: '/ws '
1313const sockPort = process . env . WDS_SOCKET_PORT ;
1414
1515module . exports = function ( proxy , allowedHost ) {
16+ // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
17+ // websites from potentially accessing local content through DNS rebinding:
18+ // https://github.com/webpack/webpack-dev-server/issues/887
19+ // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
20+ // However, it made several existing use cases such as development in cloud
21+ // environment or subdomains in development significantly more complicated:
22+ // https://github.com/facebook/create-react-app/issues/2271
23+ // https://github.com/facebook/create-react-app/issues/2233
24+ // While we're investigating better solutions, for now we will take a
25+ // compromise. Since our WDS configuration only serves files in the `public`
26+ // folder we won't consider accessing them a vulnerability. However, if you
27+ // use the `proxy` feature, it gets more dangerous because it can expose
28+ // remote code execution vulnerabilities in backends like Django and Rails.
29+ // So we will disable the host check normally, but enable it if you have
30+ // specified the `proxy` setting. Finally, we let you override it if you
31+ // really know what you're doing with a special environment variable.
32+ const disableFirewall =
33+ ! proxy || process . env . DANGEROUSLY_DISABLE_HOST_CHECK === 'true' ;
34+
1635 return {
17- // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
18- // websites from potentially accessing local content through DNS rebinding:
19- // https://github.com/webpack/webpack-dev-server/issues/887
20- // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
21- // However, it made several existing use cases such as development in cloud
22- // environment or subdomains in development significantly more complicated:
23- // https://github.com/facebook/create-react-app/issues/2271
24- // https://github.com/facebook/create-react-app/issues/2233
25- // While we're investigating better solutions, for now we will take a
26- // compromise. Since our WDS configuration only serves files in the `public`
27- // folder we won't consider accessing them a vulnerability. However, if you
28- // use the `proxy` feature, it gets more dangerous because it can expose
29- // remote code execution vulnerabilities in backends like Django and Rails.
30- // So we will disable the host check normally, but enable it if you have
31- // specified the `proxy` setting. Finally, we let you override it if you
32- // really know what you're doing with a special environment variable.
33- disableHostCheck :
34- ! proxy || process . env . DANGEROUSLY_DISABLE_HOST_CHECK === 'true' ,
36+ allowedHosts : disableFirewall ? 'all' : [ allowedHost ] ,
3537 // Enable gzip compression of generated files.
3638 compress : true ,
37- // Silence WebpackDevServer's own logs since they're generally not useful.
38- // It will still show compile warnings and errors with this setting.
39- clientLogLevel : 'none' ,
40- // By default WebpackDevServer serves physical files from current directory
41- // in addition to all the virtual build products that it serves from memory.
42- // This is confusing because those files won’t automatically be available in
43- // production build folder unless we copy them. However, copying the whole
44- // project directory is dangerous because we may expose sensitive files.
45- // Instead, we establish a convention that only files in `public` directory
46- // get served. Our build script will copy `public` into the `build` folder.
47- // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
48- // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
49- // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
50- // Note that we only recommend to use `public` folder as an escape hatch
51- // for files like `favicon.ico`, `manifest.json`, and libraries that are
52- // for some reason broken when imported through webpack. If you just want to
53- // use an image, put it in `src` and `import` it from JavaScript instead.
54- contentBase : paths . appPublic ,
55- contentBasePublicPath : paths . publicUrlOrPath ,
56- // By default files from `contentBase` will not trigger a page reload.
57- watchContentBase : true ,
58- // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
59- // for the WebpackDevServer client so it can learn when the files were
60- // updated. The WebpackDevServer client is included as an entry point
61- // in the webpack development configuration. Note that only changes
62- // to CSS are currently hot reloaded. JS changes will refresh the browser.
63- hot : true ,
64- // Use 'ws' instead of 'sockjs-node' on server since we're using native
65- // websockets in `webpackHotDevClient`.
66- transportMode : 'ws' ,
67- // Prevent a WS client from getting injected as we're already including
68- // `webpackHotDevClient`.
69- injectClient : false ,
70- // Enable custom sockjs pathname for websocket connection to hot reloading server.
71- // Enable custom sockjs hostname, pathname and port for websocket connection
72- // to hot reloading server.
73- sockHost,
74- sockPath,
75- sockPort,
76- // It is important to tell WebpackDevServer to use the same "publicPath" path as
77- // we specified in the webpack config. When homepage is '.', default to serving
78- // from the root.
79- // remove last slash so user can land on `/test` instead of `/test/`
80- publicPath : paths . publicUrlOrPath . slice ( 0 , - 1 ) ,
81- // WebpackDevServer is noisy by default so we emit custom message instead
82- // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
83- quiet : true ,
84- // Reportedly, this avoids CPU overload on some systems.
85- // https://github.com/facebook/create-react-app/issues/293
86- // src/node_modules is not ignored to support absolute imports
87- // https://github.com/facebook/create-react-app/issues/1065
88- watchOptions : {
89- ignored : ignoredFiles ( paths . appSrc ) ,
39+ client : {
40+ // Silence WebpackDevServer's own logs since they're generally not useful.
41+ // It will still show compile warnings and errors with this setting.
42+ logging : 'none' ,
43+ overlay : false ,
44+ webSocketURL : {
45+ // Enable custom sockjs pathname for websocket connection to hot reloading server.
46+ // Enable custom sockjs hostname, pathname and port for websocket connection
47+ // to hot reloading server.
48+ hostname : sockHost ,
49+ pathname : sockPath ,
50+ port : sockPort ,
51+ } ,
52+ } ,
53+ static : {
54+ // By default WebpackDevServer serves physical files from current directory
55+ // in addition to all the virtual build products that it serves from memory.
56+ // This is confusing because those files won’t automatically be available in
57+ // production build folder unless we copy them. However, copying the whole
58+ // project directory is dangerous because we may expose sensitive files.
59+ // Instead, we establish a convention that only files in `public` directory
60+ // get served. Our build script will copy `public` into the `build` folder.
61+ // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
62+ // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
63+ // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
64+ // Note that we only recommend to use `public` folder as an escape hatch
65+ // for files like `favicon.ico`, `manifest.json`, and libraries that are
66+ // for some reason broken when imported through webpack. If you just want to
67+ // use an image, put it in `src` and `import` it from JavaScript instead.
68+ directory : paths . appPublic ,
69+ // It is important to tell WebpackDevServer to use the same "publicPath" path as
70+ // we specified in the webpack config. When homepage is '.', default to serving
71+ // from the root.
72+ publicPath : [ paths . publicUrlOrPath ] ,
73+ watch : {
74+ ignored : ignoredFiles ( paths . appSrc ) ,
75+ } ,
76+ } ,
77+ devMiddleware : {
78+ // remove last slash so user can land on `/test` instead of `/test/`
79+ publicPath : paths . publicUrlOrPath . slice ( 0 , - 1 ) ,
9080 } ,
9181 https : getHttpsConfig ( ) ,
9282 host,
93- overlay : false ,
9483 historyApiFallback : {
9584 // Paths with dots should still use the history fallback.
9685 // See https://github.com/facebook/create-react-app/issues/387.
9786 disableDotRule : true ,
9887 index : paths . publicUrlOrPath ,
9988 } ,
100- public : allowedHost ,
10189 // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
10290 proxy,
103- before ( app , server ) {
91+ setupMiddlewares : ( middlewares , devServer ) => {
92+ if ( ! devServer ) {
93+ throw new Error ( 'webpack-dev-server is not defined' ) ;
94+ }
95+
96+ if ( fs . existsSync ( paths . proxySetup ) ) {
97+ // This registers user provided middleware for proxy reasons
98+ require ( paths . proxySetup ) ( devServer . app ) ;
99+ }
100+
104101 // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
105102 // middlewares before `redirectServedPath` otherwise will not have any effect
106103 // This lets us fetch source contents from webpack for the error overlay
107- app . use ( evalSourceMapMiddleware ( server ) ) ;
104+ middlewares . unshift ( evalSourceMapMiddleware ( devServer ) ) ;
108105 // This lets us open files from the runtime error overlay.
109- app . use ( errorOverlayMiddleware ( ) ) ;
106+ middlewares . unshift ( errorOverlayMiddleware ( ) ) ;
110107
111- if ( fs . existsSync ( paths . proxySetup ) ) {
112- // This registers user provided middleware for proxy reasons
113- require ( paths . proxySetup ) ( app ) ;
114- }
115- } ,
116- after ( app ) {
117108 // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
118- app . use ( redirectServedPath ( paths . publicUrlOrPath ) ) ;
109+ middlewares . push ( redirectServedPath ( paths . publicUrlOrPath ) ) ;
119110
120111 // This service worker file is effectively a 'no-op' that will reset any
121112 // previous service worker registered for the same host:port combination.
122113 // We do this in development to avoid hitting the production cache if
123114 // it used the same host and port.
124115 // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
125- app . use ( noopServiceWorkerMiddleware ( paths . publicUrlOrPath ) ) ;
116+ middlewares . push ( noopServiceWorkerMiddleware ( paths . publicUrlOrPath ) ) ;
117+
118+ return middlewares ;
126119 } ,
127120 } ;
128121} ;
0 commit comments