(nginx+gunicorn+flask+dash) dash Firewall problem

Dash Python
21

Indeed a nice suggestion to really strip the problem to the minimum!

I put the code into my run.py, and again, I get “Hello world” at 127.0.0.1:5000, and I get the following error when accessing the website from another machine (I get briefly “Loading…” and then a blank page):

Error: Minified Redux error #14; visit https://redux.js.org/Errors?code=14 for the full message or use the non-minified dev environment for full errors. 
    Ui https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    r https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    r https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    p https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    _n https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    Ds https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    Bh https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:126
    Dj https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:162
    unstable_runWithPriority https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:25
    Da https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:60
    xb https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:162
    Bj https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:162
    U https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:16
    onmessage https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:24
    EventHandlerNonNull* https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:24
    <anonymous> https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:9
    <anonymous> https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:9
react-dom@16.v2_10_2m1730126952.14.0.min.js:125:24
    Me https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:125
    callback https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:138
    Wg https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:67
    oj https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:127
    Aj https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:160
    unstable_runWithPriority https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:25
    Da https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:60
    ab https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:154
    Te https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:146
    Pg https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:61
    unstable_runWithPriority https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:25
    Da https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:60
    Pg https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:61
    ha https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:60
    Dj https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:163
    unstable_runWithPriority https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:25
    Da https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:60
    xb https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:162
    Bj https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:162
    U https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:16
    onmessage https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:24
    (Async: EventHandlerNonNull)
    <anonymous> https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:24
    <anonymous> https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:9
    <anonymous> https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:9
Uncaught Error: Minified Redux error #14; visit https://redux.js.org/Errors?code=14 for the full message or use the non-minified dev environment for full errors. 
    Ui https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    r https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    r https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    p https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    _n https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    Ds https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    Bh https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:126
    Dj https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:162
    unstable_runWithPriority https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:25
    Da https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:60
    xb https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:162
    Bj https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:162
    U https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:16
    onmessage https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:24
    EventHandlerNonNull* https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:24
    <anonymous> https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:9
    <anonymous> https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:9
dash_renderer.v2_10_2m1730126951.min.js:2:106040
    Ui https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    r https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    r https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    p https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    _n https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    Ds https://xxxxxxx.xxx/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_10_2m1730126951.min.js:2
    Bh https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:126
    Dj https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:162
    unstable_runWithPriority https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:25
    Da https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:60
    xb https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:162
    Bj https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react-dom@16.v2_10_2m1730126952.14.0.min.js:162
    U https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:16
    onmessage https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:24
    (Async: EventHandlerNonNull)
    <anonymous> https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:24
    <anonymous> https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:9
    <anonymous> https://xxxxxxx.xxx/_dash-component-suites/dash/deps/react@16.v2_10_2m1730126952.14.0.min.js:9

From here it shall be possible to track what is not working. To get a clearer look at what is happening, I modified slightly the code to this version:

import dash

dashApp = dash.Dash(__name__, serve_locally=True)

dashApp.enable_dev_tools(debug=True, dev_tools_ui=True, dev_tools_hot_reload=False, dev_tools_serve_dev_bundles=True)

app = dashApp.server

dashApp.layout = dash.html.Div("Hello world")

The error is a bit more clear:

Uncaught Error: When called with an action of type "SET_LAYOUT", the slice reducer for key "layout" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.
    combination Redux
    recordHistory reducer.js:88
    reloaderReducer reducer.js:121
    Redux 2
    storeEffect React
    commitHookEffectListMount react-dom@16.v2_10_2m1730126952.14.0.js:19866
    commitPassiveHookEffects react-dom@16.v2_10_2m1730126952.14.0.js:19904
    callCallback react-dom@16.v2_10_2m1730126952.14.0.js:182
    invokeGuardedCallbackDev react-dom@16.v2_10_2m1730126952.14.0.js:231
    invokeGuardedCallback react-dom@16.v2_10_2m1730126952.14.0.js:286
    flushPassiveEffectsImpl react-dom@16.v2_10_2m1730126952.14.0.js:22988
    unstable_runWithPriority react@16.v2_10_2m1730126952.14.0.js:2685
    runWithPriority$1 react-dom@16.v2_10_2m1730126952.14.0.js:11174
    flushPassiveEffects react-dom@16.v2_10_2m1730126952.14.0.js:22955
    performSyncWorkOnRoot react-dom@16.v2_10_2m1730126952.14.0.js:21872
    flushSyncCallbackQueueImpl react-dom@16.v2_10_2m1730126952.14.0.js:11224
    unstable_runWithPriority react@16.v2_10_2m1730126952.14.0.js:2685
    runWithPriority$1 react-dom@16.v2_10_2m1730126952.14.0.js:11174
    flushSyncCallbackQueueImpl react-dom@16.v2_10_2m1730126952.14.0.js:11219
    flushSyncCallbackQueue react-dom@16.v2_10_2m1730126952.14.0.js:11207
    batchedUpdates$1 react-dom@16.v2_10_2m1730126952.14.0.js:21997
    Redux 6
    _callee$ api.js:122
    tryCatch api.js:2
    makeInvokeMethod api.js:2
    defineIteratorMethods api.js:2
    asyncGeneratorStep api.js:2
    _next api.js:2
    promise callback*asyncGeneratorStep api.js:2
    _next api.js:2
    _asyncToGenerator api.js:2
    _asyncToGenerator api.js:2
    apiThunk api.js:133
    middleware Redux
    storeEffect React
    commitHookEffectListMount react-dom@16.v2_10_2m1730126952.14.0.js:19866
    commitPassiveHookEffects react-dom@16.v2_10_2m1730126952.14.0.js:19904
    callCallback react-dom@16.v2_10_2m1730126952.14.0.js:182
    invokeGuardedCallbackDev react-dom@16.v2_10_2m1730126952.14.0.js:231
    invokeGuardedCallback react-dom@16.v2_10_2m1730126952.14.0.js:286
    flushPassiveEffectsImpl react-dom@16.v2_10_2m1730126952.14.0.js:22988
    unstable_runWithPriority react@16.v2_10_2m1730126952.14.0.js:2685
    runWithPriority$1 react-dom@16.v2_10_2m1730126952.14.0.js:11174
    flushPassiveEffects react-dom@16.v2_10_2m1730126952.14.0.js:22955
    commitBeforeMutationEffects react-dom@16.v2_10_2m1730126952.14.0.js:22834
    workLoop react@16.v2_10_2m1730126952.14.0.js:2629
    flushWork react@16.v2_10_2m1730126952.14.0.js:2584
    performWorkUntilDeadline react@16.v2_10_2m1730126952.14.0.js:2196
    EventHandlerNonNull* react@16.v2_10_2m1730126952.14.0.js:2219
    <anonymous> react@16.v2_10_2m1730126952.14.0.js:15
    <anonymous> react@16.v2_10_2m1730126952.14.0.js:16
redux.js:564
The above error occurred in the <UnconnectedContainer> component:
    in UnconnectedContainer (created by Connect(UnconnectedContainer))
    in Connect(UnconnectedContainer) (created by UnconnectedAppContainer)
    in UnconnectedAppContainer (created by Connect(UnconnectedAppContainer))
    in Connect(UnconnectedAppContainer) (created by AppProvider)
    in Provider (created by AppProvider)
    in AppProvider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom@16.v2_10_2m1730126952.14.0.js:19662:15
Error: When called with an action of type "SET_LAYOUT", the slice reducer for key "layout" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.
    combination Redux
    recordHistory reducer.js:88
    reloaderReducer reducer.js:121
    Redux 2
    storeEffect React
    commitHookEffectListMount react-dom@16.v2_10_2m1730126952.14.0.js:19866
    commitPassiveHookEffects react-dom@16.v2_10_2m1730126952.14.0.js:19904
    callCallback react-dom@16.v2_10_2m1730126952.14.0.js:182
    invokeGuardedCallbackDev react-dom@16.v2_10_2m1730126952.14.0.js:231
    invokeGuardedCallback react-dom@16.v2_10_2m1730126952.14.0.js:286
    flushPassiveEffectsImpl react-dom@16.v2_10_2m1730126952.14.0.js:22988
    unstable_runWithPriority react@16.v2_10_2m1730126952.14.0.js:2685
    runWithPriority$1 react-dom@16.v2_10_2m1730126952.14.0.js:11174
    flushPassiveEffects react-dom@16.v2_10_2m1730126952.14.0.js:22955
    performSyncWorkOnRoot react-dom@16.v2_10_2m1730126952.14.0.js:21872
    flushSyncCallbackQueueImpl react-dom@16.v2_10_2m1730126952.14.0.js:11224
    unstable_runWithPriority react@16.v2_10_2m1730126952.14.0.js:2685
    runWithPriority$1 react-dom@16.v2_10_2m1730126952.14.0.js:11174
    flushSyncCallbackQueueImpl react-dom@16.v2_10_2m1730126952.14.0.js:11219
    flushSyncCallbackQueue react-dom@16.v2_10_2m1730126952.14.0.js:11207
    batchedUpdates$1 react-dom@16.v2_10_2m1730126952.14.0.js:21997
    Redux 6
    _callee$ api.js:122
    tryCatch api.js:2
    makeInvokeMethod api.js:2
    defineIteratorMethods api.js:2
    asyncGeneratorStep api.js:2
    _next api.js:2
    promise callback*asyncGeneratorStep api.js:2
    _next api.js:2
    _asyncToGenerator api.js:2
    _asyncToGenerator api.js:2
    apiThunk api.js:133
    middleware Redux
    storeEffect React
    commitHookEffectListMount react-dom@16.v2_10_2m1730126952.14.0.js:19866
    commitPassiveHookEffects react-dom@16.v2_10_2m1730126952.14.0.js:19904
    callCallback react-dom@16.v2_10_2m1730126952.14.0.js:182
    invokeGuardedCallbackDev react-dom@16.v2_10_2m1730126952.14.0.js:231
    invokeGuardedCallback react-dom@16.v2_10_2m1730126952.14.0.js:286
    flushPassiveEffectsImpl react-dom@16.v2_10_2m1730126952.14.0.js:22988
    unstable_runWithPriority react@16.v2_10_2m1730126952.14.0.js:2685
    runWithPriority$1 react-dom@16.v2_10_2m1730126952.14.0.js:11174
    flushPassiveEffects react-dom@16.v2_10_2m1730126952.14.0.js:22955
    commitBeforeMutationEffects react-dom@16.v2_10_2m1730126952.14.0.js:22834
    workLoop react@16.v2_10_2m1730126952.14.0.js:2629
    flushWork react@16.v2_10_2m1730126952.14.0.js:2584
    performWorkUntilDeadline react@16.v2_10_2m1730126952.14.0.js:2196
    EventHandlerNonNull* react@16.v2_10_2m1730126952.14.0.js:2219
    <anonymous> react@16.v2_10_2m1730126952.14.0.js:15
    <anonymous> react@16.v2_10_2m1730126952.14.0.js:16
error.js:16:20

Now I shall try to understand what is the problem, but I do not know hot to debug in the browser and pinpoint clearly what is going on. Any other suggestion? Thank you!

1 Like
22

It looks like you are running dash at 2.10.2, what happens if you update to 2.18.2?

I think you might need to run gunicorn with 0.0.0.0:5000 instead of 127.0.0.1:5000. And then on nginx put it as localhost instead of 127.0.0.1 instead.

23

I updated to 2.18.2, same problem and same error (still works on 127.0.0.1).
I changed the gunicorn configuration to 0.0.0.0:5000, same problem and same error (still works on 127.0.0.1).
I changed in the nginx configuration 127.0.0.1 to localhost, same problem and same error (still works on 127.0.0.1).

I will try to schedule a session with our sysadmin, change the corporate firewall configuration and do some tests to see if that is the reason.

24

Our sysadmin has not yet replied to my ticket, but I noticed Dash works from any internal machine behind the firewall, and it does not if reached from outside. I would assume that this proves that nginx and gunicorn are configured correctly, and the issue is with the firewall. Would you agree?

Thank you.

25

By internal machine, you mean on the local network and not that they can reach from localhost?

26

I mean machines which can reach the server with the 192.168.X.X address, local network.

27

Yes, nginx and everything is configured correctly.

To access from the outside, your admin will have to setup port forwarding for your locations ip address 443 to go to your servers location. Alternatively, you can have them create a VPN, then just hop on the VPN and you can navigate normally to your server.

1 Like
28

Finally, we solved the problem. The problem was the corporate WAF. The problem arose because the app was sending GET requests with a Content-Type header, which violates HTTP standards. I learned that GET requests are meant to retrieve data without a body, so a Content-Type header used to describe the body’s media type is non-compliant.

The WAF blocked such requests to ensure protocol adherence and prevent potential security risks. Including a Content-Type header in GET requests can appear anomalous, as it might signal malicious intent, like HTTP smuggling or injection attacks.

An ad-hoc rule was deployed, and now the website works.

Thank you for all the help, at least now I got a better understanding of my own app, nginx and gunicorn!

2 Likes
29

Glad you got it figured out. If that is really what is happening with the content-type on the GET requests. If this is coming from Dash directly, it might be worth raising as an issue on the GitHub. I think it’d be easy to alter on the renderer.