Forcing a specific page to use HTTPS with angularjs

Question

In our application we have a payment page that we want to use SSL on because we are handling credit card information. We've already put in place rewrite rules for apache to redirect a request to the specific page to HTTPS -- which takes care of any direct requests to the payment page ( http://oursite.com/pay ).

However most navigation in our site is done via relative urls and states using ui-router in angularjs and we have found that apache does not catch these requests and so serves the page without SSL.

EX If a user clicks a link with ui-sref='pay' ui-router loads the template and refreshes the state -- at no point is a request made to the server for a new uri so apache can't redirect to https

Is there a way to force ui-router(or angular in general) to force a state to use HTTPS without having to change all links to reload the entire site?

Of course this may also be a shortcoming in our rewrite rules...Here's what we have so far

RewriteEngine on
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_URI} /pay
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]

The second set of rules is to enforce html5mode for our app.

RewriteCond %{REQUEST_FILENAME} !-f is in place so that angular can fetch the payment template for the state without needing SSL. Is this okay?

Answer 1

I had a similar problem, although was using $routeProvider in a SPA application. What I did was to enforce a redirect inside the controller:

var forceSSL = function () {
    if ($location.protocol() !== 'https') {
        $window.location.href = $location.absUrl().replace('http', 'https');
    }
};
forceSSL();

This though does reload all resources. However, this happens only once when switching to SSL mode.

Note, the function is actually in a service so can be called from anywhere.

I hope this helps.