Automatically redirecting http to https with multiple domains - files referenced from within code

Question

I know there are duplicate questions here and here but these haven't solved my issues.

When localhost is typed in the browser's url bar, it is correctly redirected to https://localhost, but all calls within my code to load files with http are not being redirected or rewritten to https. For example:

<link rel="stylesheet" type="text/css" href="http://static/css/colwidth.min.css">

I have tried Redirect permanent / https://localhost/ in the Apache configuration files in the VirtualHost sections and I have also tried RewriteRule with .htaccess

The Firefox error I am getting is:

Blocked loading mixed active content “http://static/css/colwidth.min.css”

I would appreciate help understanding how to do this with both Apache config and .htaccess (I know .htaccess is not the preferred method - but I still would like to understand why it isn't working)

http:

<VirtualHost *:80>
    ServerAdmin me@localhost
    DocumentRoot "D:/Website/path/to/root"
    ServerName localhost
    Redirect permanent / https://localhost/

    <Directory "D:/Website/path/to/root">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require ip 127.0.0.1
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin me@localhost
    DocumentRoot "D:/Website/path/to/root"
    ServerName static
    Redirect permanent / https://static/

    <Directory "D:/Website/path/to/root">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require ip 127.0.0.1
    </Directory>
</VirtualHost>

<VirtualHost *:443>
    DocumentRoot "D:/Website/path/to/root"
    ServerName localhost:443
    ServerAdmin me@localhost
    ErrorLog "c:/xampp/apache/logs/error.log"
    TransferLog "c:/xampp/apache/logs/access.log"
    <Directory "D:/Website/path/to/root">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require ip 127.0.0.1
    </Directory>

    SSLEngine on

    SSLCertificateFile "c:/xampp/apache/bin/wtr.cert"
    SSLCertificateKeyFile "c:/xampp/apache/bin/wtr.key"

    <FilesMatch "\.(cgi|shtml|phtml|php)$">
        SSLOptions +StdEnvVars
    </FilesMatch>
    <Directory "c:/xampp/apache/cgi-bin">
        SSLOptions +StdEnvVars
    </Directory>

    CustomLog "c:/xampp/apache/logs/ssl_request.log" \
              "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
</VirtualHost>

https:

<VirtualHost *:443>
    DocumentRoot "D:/Website/path/to/root"
    ServerName static:443
    ServerAdmin me@localhost
    ErrorLog "c:/xampp/apache/logs/error.log"
    TransferLog "c:/xampp/apache/logs/access.log"

    <Directory "D:/Website/path/to/root">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require ip 127.0.0.1
    </Directory>

    SSLEngine on

    SSLCertificateFile "c:/xampp/apache/bin/static.cert"
    SSLCertificateKeyFile "c:/xampp/apache/bin/static.key"
    <FilesMatch "\.(cgi|shtml|phtml|php)$">
        SSLOptions +StdEnvVars
    </FilesMatch>
    <Directory "c:/xampp/apache/cgi-bin">
        SSLOptions +StdEnvVars
    </Directory>

    CustomLog "c:/xampp/apache/logs/ssl_request.log" \
              "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
</VirtualHost>

.htaccess

RewriteEngine On
    # For SSL
    RewriteCond %{HTTPS} !=on
    RewriteRule (.*) https://%{SERVER_NAME}/$1 [L,R=301]
    # I also tried:
    #RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}[L,R=301]

    #Rules for Versioned Static Files
    RewriteRule ^(js|js-common|css|css-common|img|img-common)/(.+)\.([0-9])+\.(js|css|php|jpg|gif|png)(.*)$ $1/$2.$4$5 [L]

    #rename invalid file and directory requests
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?redirectroot=true

score 6 · Accepted Answer · answered Jul 11 '17 at 23:21

The Firefox error I am getting is:

That's the problem... the browser is triggering this error before the request even reaches your server, so any attempt to redirect on the server is too late.

If the page itself is redirected to https://... then all referenced resources within that page must also use https://... as well, otherwise you get the "mixed content" warning as above. This is basic browser security in order to prevent any secure content being leaked over an insecure (HTTP) connection.

Instead of using absolute URLs (that include the scheme) in the HTML you can use protocol relative URLs instead, for example:

<link rel="stylesheet" type="text/css" href="//static/css/colwidth.min.css">

Automatically redirecting http to https with multiple domains - files referenced from within code

1 Answers1