Flask App Displays on Desktop Browsers, but Not in Android Mobile Browsers Due To Content Security P-CodePudding

I have a very simple flask 2.x app running on my local network through Apache 2.4.41 that displays in a desktop browser (Chrome 108.0.5359.98 and Firefox 107.0) using the address 192.168.25.15. I am also able to access the site using the Flask web server/debugger in a desktop browser. I then tried to access the site on my Android browser (Chrome 108.0.5359.79 and Firefox 107.2.0) and all I get is a Google search page or a ERR_CONNECTION_TIMED_OUT.

I was able to get the USB debugging working on Firefox, and accessing the website times out with this error:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).

If I am interpreting the error messages correctly, the error is occurring at line 77, which has this code:

<input type="checkbox" value="remember-me"> Remember me

The page is a login page.

Here is the full page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self';  child-src 'none';" />
    <title>Rocket Launcher Signin</title>      

    <!-- Bootstrap core CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.css') }}">

    <!-- Favicons -->
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico', type='image/x-icon') }}" />
    
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="{{ url_for('static', filename='signin.css') }}">
  </head>
  <body >
    
<main >
  <form method="post" action="{{ url_for('auth.login') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <a href="{{ url_for('auth.login') }}"><img  src="{{url_for('static', filename='logo.png')}}" alt="" width="60"></a>
    <h1 >Please sign in</h1>


      {% for message in get_flashed_messages() %}
        <div >{{ message }}</div>
      {% endfor %}

    <div >
      <input name='username' type="text"  id="floatingInput" placeholder='joe'>
      <label for="floatingInput">User name</label>
    </div>
    <div >
      <input type="password"  id="floatingPassword" placeholder="Password" name='password'>
      <label for="floatingPassword">Password</label>
    </div>

    <div >
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button  type="submit">Sign in</button>
    <p >&copy; {{ copyright_years }} Phillips Marketing, Inc. All rights reserved.</p>
  </form>
</main>
  </body>
</html>

I also tried removing the line

<meta http-equiv="Content-Security-Policy" content="default-src 'self';  child-src 'none';" />

and it made no difference.

For my application, do I really need a Content Security Policy? The site will be running in Apache on a Pi Zero acting as a WiFi AP in the middle of a large field where we launch rockets. The only user will be me - the web site is used to control a rocket launcher 25 feet away.

Any ideas on how to access the site on my Android browsers?

CodePudding user response：

Not sure this is the best answer, but I was able to load my web site on a mobile browser when I changed the Flask setting SESSION_COOKIE_SECURE from True to False. The documentation for Flask 2.2.x says that SESSION_COOKIE_SECURE=True limits cookies to only HTTPS traffic. Since my site does not use HTTPS, I guess the CSRF cookie was not being transmitted and the site loading timed out?