Firefox: unsecured ajax calls on secure page

Question

I am working on a travel website. In the website is a page where I make Ajax calls to another page. The app is created in vuejs framework. When I make a call Firefox says that I am making the AJAX call on an unsecured connection. It then proceeds to redirect the whole page instead of making an AJAX call. None of my POST data is preserved in the redirect. The entire process takes place on website secured end-to-end with SSL.

Even JS is included with an HTTPS URL and there is no concern of cross origin scripting. Firefox also confirms that no elements of the page are unsecured. This issue plagues the bus booking module of the website only and not the other modules such as flight booking or hotel booking which uses the exact same script. I am wondering what could be triggering this issue.

Error Message:

The connection used to access this resource was not secure.

Screenshots:

Details of deployment:

• Backend: Codeigniter 2.1.6 (PHP)
• Web Server: Apache 2
• Server: Amazon EC2

Site Conf File for Apache:

<VirtualHost *:80>

ServerName mysite.com

ServerAdmin webmaster@localhost
DocumentRoot /var/www/html/mysite/


ErrorLog ${APACHE_LOG_DIR}/stg_error.log
CustomLog ${APACHE_LOG_DIR}/stg_access.log combined

<Directory “/var/www/html/mysite”>
  AllowOverride All
</Directory>
    RewriteEngine on
    RewriteCond %{SERVER_NAME} =mysite.com
    RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI}[END,NE,R=permanent]
</VirtualHost>

<VirtualHost _default_:443>
    ServerName mysite.com
    ServerAdmin webmaster@localhost


    DocumentRoot /var/www/html/mysite/


    <FilesMatch "\.(cgi|shtml|phtml|php)$">
            SSLOptions +StdEnvVars
    </FilesMatch>
    <Directory /usr/lib/cgi-bin>
            SSLOptions +StdEnvVars
    </Directory>
    <Directory “/var/www/html/mysite">
      AllowOverride All
    </Directory>



    BrowserMatch    "MSIE [2-6]"nokeepalive ssl-unclean-shutdown downgrade-1.0 force-response-1.0

    BrowserMatch "MSIE [17-9]"ssl-unclean-shutdown

    Include /etc/letsencrypt/options-ssl-apache.conf
    SSLCertificateFile /etc/letsencrypt/live/mysite.com/cert.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/mysite.com/privkey.pem
    SSLCertificateChainFile /etc/letsencrypt/live/mysite.com/chain.pem
</VirtualHost>

.htaccess

            RewriteEngine On
            RewriteBase /
            RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
            RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

Answer 1

As it turns out my issue was with my JavaScript. While my app originally was created in Vuejs it was on a page with other scripts. There was an issue with some other script which in turn was breaking functionality of Vuejs. In my case jQuery errors were preventing proper execution of my script. As soon as I resolved the original jQuery error, the redirect stopped and ajax worked normally.

In conclusion it is a good idea to check if other scripts are halting your execution even if your code might be in another framework.