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

6

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">

answered Jul 11 '17 at 23:21

MrWhite

11,643
4
25
40

I was afraid of that. Hopefully having relative URL will work everywhere - I will give it a try. I know there was a reason I added `http` to my addresses at some point. Thanks. – mseifert Jul 11 '17 at 23:29
However, you would have a problem if this external(?) resource is not available on HTTPS. – MrWhite Jul 11 '17 at 23:40
The example has an error. You either use `//example.com/static/css/colwidth.min.css` or `/static/css/colwidth.min.css`. The first one is protocol relative, the latter is domain and protocol relative. – Tero Kilkanen Jul 12 '17 at 10:05
@TeroKilkanen Yes - sort of. Although it would seem that in this instance `static` is actually the (cookieless) _domain_ from which the static resources are being served, not a subdirectory. This would seem to be consistent with the code, where `static` is used in place of the domain/host. (However, the use of the word "static" is indeed misleading.) – MrWhite Jul 12 '17 at 10:35
1

Ah yes, it was sloppy reading from my part :) Although it is odd to use a top-level-domain in this case. Maybe it was just an example to protect the main domain. – Tero Kilkanen Jul 12 '17 at 11:43
@TeroKilkanen - I created the domain `static` to serve files without cookies. It points to the same directory as localhost - the only difference being no cookies. The reason for not having it as a subdirectory is that I can serve any file from any directory on the server this way (e.g. /css or /js or /img). I do this on my live server as well as I am not big enough to justify the cost of a cdn. – mseifert Jul 12 '17 at 18:38
But the domain cannot be simply `static`, unless you own the top-level domain `static`. It needs to be `static.example.com` or so. – Tero Kilkanen Jul 12 '17 at 20:47
@TeroKilkanen - Yes I do "own" the top level domain `static`. This setup is on a development machine and so I have complete ownership of all domains - `localhost` and `static`. I could have set it up as you say. – mseifert Jul 14 '17 at 19:09

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

1 Answers1