Learn how to fix IPad or iPhone Javascript/Jquery click problems

by Amir Sadeghian Posted on | Web Development

Today I was working on a project that was using Jquery. In this project, I was using Jquery click listener. Everything was working fine on Firefox and Chrome. However, when I tapped on the element on my Ipad the click event didn’t get fired. In this post, I will present an example of the problem and explain how to resolve it.

Problem

Let’s assume following is my HTML element and Javascript(JQuery).

<div class="slide">
	<img src="..." />
</div>
$(document).ready(function(){
	$('.slide').click(function(){
		$('body').css('background-color','red');
	});
});

Above Javascript in combination with the HTML will change the background color of the body of the page to red on click on the element with slide class. However this only works on Chrome and Firefox browsers and it doesn’t work on Safari Mobile. The cause of this problem is due to a known bug in Safari Mobile version 7 and higher. Due to this bug, the click event is not being fired on non-interactive elements. For example “Div” is a none interactive element. However “a” is an interactive element.

Solution

There are a few ways to fix this problem:

  • Avoid using non-interactive elements where you want to attach click listeners. Replace div, span with anchor element.
  • Use CSS to set pointer attribute of target element to pointer. In my case, I had to keep the div element. Therefore, I used the following solution to fix this problem:
    .slide{
    	cursor: pointer;
    }
    

Reference

https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

Easy way to backup website files and database using Cpanel

by Amir Sadeghian Posted on | Web Development

It is always a good practice to back up your website content and database before making any modification to the website. In this article, I will explain how to make a backup of source code and database using Cpanel.

Background

Let’s say you have a WordPress website. As you might know by now WordPress core, templates and plugins regularly update their source code to fix security vulnerabilities and add new features. The chances are high that one of the updates goes wrong and in result your whole website breaks. If this happens and you don’t have a recent backup you are in a big trouble as the fixing and recovery requires a professional programmer familiar with WordPress.

GIT

Git is a version control system that allows the software engineer to track changes in the software source code. Proper usage of Git repositories allows software engineer to store a history of all changes to the code. In case of disaster software engineer can use the Git repository to restore to last stable version of the software. If you are using a Git repository to for your code you don’t need to back up your source code. However, you still need to backup your database. 

Backup all files using Filemanager

If you are not using a GIT repository you must back up all of your website files before making any major changes to source code such as updates or new additions. One way for backing up all files is using FTP. Using an FTP client like FileZilla you can select all the files in public_html or www directory and transfer them to your computer. However, this process is very slow and time-consuming.

Following instructions shows how to back up all the files in the root directory of your site in a few clicks.

  1. To use CPanel file manager you need to make sure your website is hosted on an Apache machine and has CPanel as control panel software. For testing you can type your website address in web browser address bar following by CPanel. ex: https://www.sadeghian.us/cpanel
  2. Use the username and password for CPanel to login to CPanel. This username an password is usually the same as your FTP credentials. If you don’t have this credential you can contact your hosting provider an ask them to provide them to you.
  3. After login to CPanel click on File Manager icon. Then double-click on public_html or www folder to navigate into it. www is a shortcut to public_html and both point to the same destination. CPanel File Manager
  4. Click on the settings button on top right of file manager. Then from popup window check the “Show Hidden Files (dotfiles)” checkbox and click on save. This will show the hidden files in the file managerShow hidden files in CPanel file manager
  5. Click on “Select All” button then click on “Compress” icon.Select all files and compress them using CPanel File Manager
  6. After clicking on “Compress” a popup will open with options for compression. In this popup select “Zip Archive” and click on “Compress File(s)” button. Then, wait for few minutes until the compression process finish.
  7. Next, you need to find the backup file. This might be a little bit tricky as the file name is not predictable. The backup file has a .zip extension and “Last modified” date shows current date and time. After finding the backup file right-click on the file and select “Download” from the menu.
  8. After downloading the backup file rename it to today date and time and archive it in a safe place on your computer.

Backup the database using PHPMyAmin

  1. First login to CPanel. You can follow steps 1 and 2 in the previous section(Backup all files using Filemanager) to login to CPanel.
  2. Click on the phpMyAdmin icon.
  3. From left sidebar click on the name of the database that you would like to back up. If you would like to back up a WordPress website you can find the name of the current database in use by viewing the code of wp-config.php in the root directory of your web server.
  4. Next click on “Export” in the top navigation.Export database using phpMyAdmin
  5. In the next page don’t change any of the options and just click on the “Go” button.
  6. A file with SQL extension will download to your computer. Rename the file to today date and time and archive it in your computer.

Mixed content problem and a quick way to solve it

by Amir Sadeghian Posted on | Web Development

Did you recently see the following warning message? “Mixed Content: The page at … was loaded over HTTPS, but requested an insecure script … . This request has been blocked; the content must be served over HTTPS. ” or “Blocked loading mixed active content”. These messages are all signs of mixed content.

What is mixed content? Mixed content happens when the website loaded over HTTPS protocol but there are some resources(fonts, CSS files, JavaScript files, images, videos) loaded in the page over HTTP protocol. This scenario is called mixed-content because the content of the page is being loaded over HTTP and HTTPS protocol at the same time. Modern browsers like the latest version of Chrome and Firefox show a warning to inform the user about mixed content.

Mixed content : This page is trying to load scripts from unauthenticated sources.

Background

For a better understanding of the problem first, you need to learn about HTTP and HTTPS protocols.

HTTPS vs HTTP

HTTP is an acronym for HyperText Transfer Protocol. HTTP is the protocol that is being used to transfer data between a website and your computer. S in HTTPS stands for secure which means all the communication between the website and your computer will be encrypted. In past usually, websites that needed to deal with confidential information such as credit cards and banking information would use HTTPS. Recently Google announced that it will flag all unencrypted websites on the internet. This means if the website is not using HTTPS, it will display a “Not Secure” in the address bar.

All modern browsers display a green padlock icon next to address bar which indicates HTTPS connection is enabled. Having green lock and an encrypted channel increase confident of website visitor to use the website. Therefore it’s crucial to enable HTTPS and fix the mixed content problem.

"Not Secure" in Chrome address bar

"Not Secure" in Firefox address bar

Problem

Loading resources using insecure HTTP weakens the security of the whole webpage and it makes the request vulnerable to MITM (man-in-the-middle-attack).  In MITM attacker intercept the traffic between two sender and receiver parties. In case of mixed content, the attacker can take control of the page not only the non-secure resource. Therefore modern browser like Chrome and Firefox might completely block the access to the resource that has been loaded over HTTP. In the result, the webpage might not appear as expected because it is missing resource (videos, images, fonts, CSS, JavaScript).

To gather more details about problematic resources. You can open the website using Chrome or Firefox. Then right-click anywhere on the screen and select inspect/inspector. Next click on the “Console” tab. The console will show a detailed list of resources that are loading over HTTP a files that includes them. It even gives you the line number.

Firefox is showing a list of mixed content resources. Firefox is showing a list of mixed content resources including the file names and line numbers.

Following code snippet is showing a reference to a JavaScript that is using HTTP protocol. For fixing this, simply HTTP needs to be replaced with HTTPS.

<script type="text/javascript" src="http://www.sadeghian.us/wp-content/themes/sad/js/main.js" defer></script>

Solution

For fixing mixed content you need to find all HTTP references to resources and replace them with HTTPS. In a database-driven website like WordPress there might be references to resources in the database.  Following step-by-step procedure covers all possible scenarios:

  1. First backup your code and database. I have an article on how to make a database backup. Backup allows you to rollback to a stable version of your website in case of any error.
  2. Download your website root folder including all files to your computer. You can use Cpanel to compress and download all files in your website home directory all at once.
  3. Open the directory of the website using a text editor that is capable of search in all files(Sublime, Visual Studio Code, Adobe Dreamweaver & …) and search for http:// in all files and folders. Then replace appropriate http:// protocols with https:// . Search probably will find many URLs in readme documents and comments that don’t need to be replaced.
  4. Make sure to search in all file types. For example, don’t exclude CSS files from your search. It is very usual to find a reference to an image, font or another CSS file in a CSS file.
  5. For finding and replacing http:// in the database you need a DBMS(database management system) like MySQLWorkbench, Sequel Pro, PHPMyAdmin. Goto search feature and lookup http:// and replace all instances with https:// . Most of DBMS have search-and-replace feature. In case you have a WordPress website you can use a plugin to do the search and replace process. I highly recommend “Better Search Replace” plugin. This plugin allows you to search and replace a term in the entire WordPress database. It also allows you to do a dry-run and it supports serialize data.
  6. Certain functions and tools escape / character with \ character before storing it in the database. This usually happens when the function serializes the data before storing it in the database. Therefore http://www.sadeghian.us/ will be stored as http:\/\/www.sadeghian.us\/ . In result searching for http:// can not find all the instances of http. You need to search for http:\/\/ and replace it with https:\/\/ 
  7. Open your website using Chrome or Firefox. Right-click anywhere on the screen and from the menu chose Inspect/Inspector. Then go to the “Console” tab. There shouldn’t be any trace of mixed content warning.

Note: Number 6 is a very common scenario in WordPress websites that uses page builders tool like WPBakery, Visual Composer, Elementor & … .

 

Chrome is showing a lock in the address bar which indicates the existence of HTTPS