Monday, January 15, 2018

.htaccess

Hello,

Recently I configured SSL on Amazon EC2 instance running Apache server. In this blog I am going to explain the procedure step by step.

Step 1 : Generate CSR and submit to CA authority for verification

To generate CSR login to your server with SSH and use following command.

openssl req -new -newkey rsa:2048 -nodes -keyout YourDomain.key -out YourDomain.csr

Once you execute this command it will ask for certain inputs and based on it it will generate csr file. That you have to submit to CA authority and generate

Step 2 : Edit Inbound rules on your EC2 Instance and allow HTTPS

Login to Amazon AWS console and go to EC2 dashboard. Click on instance and edit security rules. Select HTTPs and allow it from anywhere.


Step 3 : Upload your SSL certificate and key file to EC2 using SSH

 You can use SCP command to upload crt file and pem key file to server.

scp -i "YourKey.pem" "Cert.crt" ubuntu@YourIP:/home/ubuntu/Cert.crt
scp -i "YourKey.pem" "Key.key" ubuntu@YourIP:/home/ubuntu/Key.key

Step 4 : Edit Default SSL config file and Add Certificate In File

Go to  cd /etc/apache2/sites-available

Update default-ssl.conf file by using command

sudo nano default-ssl.conf

Add following lines in file

SSLEngine on
SSLCertificateFile      /home/ubuntu/Cert.crt
SSLCertificateKeyFile /home/ubuntu/Key.key

Save the file.

Step 5 : Enable SSL mode in Apache and set config file to default-ssl.conf

Now we have ssl config file set, we have to enable SSL mode in apache and set config file.

Use following command

sudo a2enmod ssl
sudo a2ensite default-ssl.conf
sudo service apache2 reload
sudo service apache2 restart

That's it and now you can access your web app on HTTPS. Hope this helps you.

Sunday, January 14, 2018

jQuery Close Modal Window When User Clicks Outside of It

Recently in my work we faced an issue due to some JavaScript conflict on a page where we have modal popups that were not closing when user clicks outside of it and anywhere on page. Normally it does automatically in jQuery pop up. So here we have to add custom code to handle this situation. In this blog I am going to explain how to do it.

In above picture I explained how to do it. So basic trick is to track click event on entire web page and to check it it's X and Y coordinates are inside the BOX of modal window. If yes then do not close it. But if it's out side of it, close the modal popup. Here is the code for the same.

  var rect = $('.modalSelector')[0].getBoundingClientRect();
  clientX1 = rect.x
  clientX2 = rect.x + rect.width;

  clientY1 = rect.y
  clientY2 = rect.y + rect.height;

  if((e.clientX >= clientX1 && e.clientX <= clientX2) && (e.clientY >= clientY1 && e.clientY <= clientY2)){
    return;
  }

  if($('#modalSelector').hasClass('active')){
    $('#modalSelector').removeClass('active');
    $('. modalSelector').hide();
  }

That's it and it will close if you click anywhere on web page outside of modal popup.