The page at 'https://example.com' was loaded over HTTPS, but requested an insecure stylesheet 'http://example.com/index.css/'

General
1

I get The page at 'https://example.com/login/' was loaded over HTTPS, but requested an insecure stylesheet 'http://example.com/index.css/'. This request has been blocked; the content must be served over HTTPS. when attempting to load my index.css file. This was working 3 days ago but recently stopped. This is resulting in a non-styled page for the end user. I am using flask for my web server. empty login page

I originally had my css file loaded as /index.css, but when that stopped working, I tried manually stating https:// in my stylesheet link. My current html for the stylesheet is <link rel="stylesheet" href="https://example.com/index.css"> Code from site:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://example.com/index.css">
    <link rel="manifest" href="https://example.com/manifest.json" />
    <title>Login</title>
</head>
<body>
    <div id="content">
        <h1>Login</h1>
            <form id="loginForm" onsubmit="return handleFormSubmit(event)">
                    <label for="username">Username:</label>
                    <input type="text" id="username" name="username" required><br><br>
                    <label for="password">Password:</label>
                    <input type="password" id="password" name="password" required><br><br>
                    <input type="submit" value="Login">
                </form>
            <script>
                function handleFormSubmit(event) {
//redacted
}
            </script>
    </div>
</body>
</html>
2

I’d be glad to help you fix the mixed content issue in your Flask application’s login page. Here’s the consolidated solution:

1. Ensure Your CSS File is Accessible over HTTPS:

  • Verify that index.css is located in a directory accessible by your Flask app when running. This could be a static directory within your project structure.
  • If the file is on a separate server, configure it to be served over HTTPS as well.

2. Update Your HTML Link with the Correct Path:

  • Use a relative path assuming index.css is in the same directory as your HTML file:
    HTML
<link rel="stylesheet" href="index.css">

If it’s in a static directory named static, use a relative path within the template:

3. Flask Configuration (Optional but Recommended):

  • If you have a dedicated static directory in your Flask project, configure it in the Flask app’s settings:
    Python
app.config['STATIC_FOLDER'] = 'static'
app.config['STATIC_URL'] = '/static'

4. Server Configuration (If Necessary):

  • If you’re using a web server like Apache or Nginx in front of Flask, ensure it’s configured to serve static files correctly. This might involve setting up directory listings or access permissions.

Complete Example with Flask Static Files:

Assuming your CSS file is in a static directory within your Flask project, here’s a sample layout:

  • Project Structure:
    your_flask_app/
    app.py
    templates/
    login.html
    static/
    index.css

login.html (inside templates ):

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    1.  github.com github.com
    <link rel="stylesheet" href="{{ url_for('static', filename='index.css')    1.  medium.com medium.com }}">
    <title>Login</title>
</head>
<body>
    </body>
</html>

app.py:

Python

from flask import Flask, render_template, url_for

app = Flask(__name__)

app.config['STATIC_FOLDER'] = 'static'  # Configure static directory

@app.route('/login/')
def login():
    return render_template('login.html')

if __name__ == '__main__':
    app.run(debug=True)  # Adjust debug mode as needed