How to Make a Page Fully Secure over SSL Connections?

In this post, it shows the configurations required to make a SSL work (on port 443) on Ubuntu servers.

However, for some pages (especially old posts/pages), it will show ‘not fully secure’ information, if you are using Chrome browser,

ssl-no-so-secure

The causes as it says, is that the page uses some non-secure connections to images, css or javascript files. If you are go to https://www.whynopadlock.com/ (online SSL check tool), then you can see the detailed reasons why that page is not entirely secure.

SSL Check Tool

Alternatively, you can go to console of the Chrome browser, and you will see the warnings in details.

SSL details/connections in Google Chrome browser console

If we don’t make those image/js/css resources SSL, then someone could/might be able to change what the website looks like, making it pointless to use SSL.

Also, if you are using HTML iframe tag to include pages, they have to be using HTTPS as well otherwise this will be blocked by most browsers because of potential security risks.

Also, if you have forms which are insecure URLS (action field), you will still have warnings. For example, you should use the SSL version of google search form instead of non-SSL one.

If the resources are hosted on others domain

There are nothing much to do if the resources are hosted on others domains. In this case, you could use the HTTPS versions if they provide but this is not always possible. Big companies have both HTTP and HTTPS versions e.g. google. If not, you can download a copy and upload to your own FTP and thus change the URL, which is secure.

SQL to change URL for wordpress posts

If you are using wordpress, then you can use the following URL to change the URLs in the post.

UPDATE wp_posts SET post_content = REPLACE (post_content, '//helloacm.com', 'https://helloacm.com');

The following changes the GUID for each post as well.

UPDATE wp_posts SET guid = REPLACE (guid,  '//helloacm.com', 'https://helloacm.com');

And you should login to the wordpress control panel to update the site URL.

wordpress ssl control panel settings

Alternatively, you can do this over SQL:

UPDATE wp_options SET option_value = replace(option_value, '//helloacm.com', 'https://helloacm.com') WHERE option_name = 'home' OR option_name = 'siteurl';

If you are hosting several websites/domains on the same IP address (VPS or dedicated server)

As you can see in the above screenshots, if you are hosting several websites/domains on the same IP address and if you are using these images in your posts, you can then either make those domains secure as well (purchasing new SSL certificates) or changing the URLs.

For the second method, you can download images/css/js and re-upload to the SSL-ed domain you are using, or, you can map the non-SSL resource URLs to the SSL-ed domains.

For example, you can login to your VPS or dedicated server and make a symbolic link (similar to shortcuts on Windows).

1

ln -s  /var/non-ssl-domains/images /var/ssl-domain/images

ln -s  /var/non-ssl-domains/images /var/ssl-domain/images

Then, you can replace the http://non-ssl-domains/images to https://ssl-domain/images using the SQL above.

Sometimes, symbolic links are not followed by Apache server, and in this case, you can, Of course, make hard links instead (without the -s option)

1

ln  /var/non-ssl-domains/images /var/ssl-domain/images

ln  /var/non-ssl-domains/images /var/ssl-domain/images

Using PHP to redirect non-secure URLs to secure SSL

The other solution is to create a PHP file and based on the $_GET parameters of the URLs, and read the resources files from other domain, since they are all hosted on the same machine (VPS or dedicated server).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

  function hell() {
    header($_SERVER['SERVER_PROTOCOL'] . ' 404 Not Found'); 
    die();
  }
  $r = '';
  if (isset($_GET['r'])) {
    $r = trim($_GET['r']);
  }
  if (!strlen($r)) {
    hell();
  }
  $url = '/var/www/codingforspeed.com/images/'.$r;
  if (!is_file($url)) {
    hell();   
  }
  $ext = strtoupper(pathinfo($url, PATHINFO_EXTENSION));
  $type = exif_imagetype($url);
  if (($ext == 'JPG') && ($type == IMAGETYPE_JPEG)) {
            header('Content-Disposition: inline');
            header("Content-Type: image/jpeg");
            header("Content-Length: " . filesize($url));
            header("Content-Transfer-Encoding: binary\n");
            $im = imagecreatefromjpeg($url);
            imagejpeg($im);
            imagedestroy($im);
            die();
  }
  else if (($ext == 'GIF') && ($type == IMAGETYPE_GIF)) {
            header('Content-Disposition: inline');
            header("Content-Type: image/gif");
            header("Content-Length: " . filesize($url));
            header("Content-Transfer-Encoding: binary\n");
            readfile($url);   
            die(); 
  } 
  else if (($ext == 'PNG') && ($type == IMAGETYPE_PNG)) {
            header('Content-Disposition: inline');
            header("Content-Type: image/png");
            header("Content-Length: " . filesize($url));
            header("Content-Transfer-Encoding: binary\n");
            $im = imagecreatefrompng($url);
            imagepng($im);
            imagedestroy($im); 
            die(); 
  }
  else if (($ext == 'BMP') && ($type == IMAGETYPE_BMP)) {
            header('Content-Disposition: inline');
            header("Content-Type: image/bmp");
            header("Content-Length: " . filesize($url));
            header("Content-Transfer-Encoding: binary\n");
            $im = imagecreatefrombmp($url);
            imagebmp($im);
            imagedestroy($im);  
            die();
  }
  else {
    hell();
  }

  function hell() {
    header($_SERVER['SERVER_PROTOCOL'] . ' 404 Not Found'); 
    die();
  }
  $r = '';
  if (isset($_GET['r'])) {
    $r = trim($_GET['r']);
  }
  if (!strlen($r)) {
    hell();
  }
  $url = '/var/www/codingforspeed.com/images/'.$r;
  if (!is_file($url)) {
    hell();   
  }
  $ext = strtoupper(pathinfo($url, PATHINFO_EXTENSION));
  $type = exif_imagetype($url);
  if (($ext == 'JPG') && ($type == IMAGETYPE_JPEG)) {
            header('Content-Disposition: inline');
            header("Content-Type: image/jpeg");
            header("Content-Length: " . filesize($url));
            header("Content-Transfer-Encoding: binary\n");
            $im = imagecreatefromjpeg($url);
            imagejpeg($im);
            imagedestroy($im);
            die();
  }
  else if (($ext == 'GIF') && ($type == IMAGETYPE_GIF)) {
            header('Content-Disposition: inline');
            header("Content-Type: image/gif");
            header("Content-Length: " . filesize($url));
            header("Content-Transfer-Encoding: binary\n");
            readfile($url);   
            die(); 
  } 
  else if (($ext == 'PNG') && ($type == IMAGETYPE_PNG)) {
            header('Content-Disposition: inline');
            header("Content-Type: image/png");
            header("Content-Length: " . filesize($url));
            header("Content-Transfer-Encoding: binary\n");
            $im = imagecreatefrompng($url);
            imagepng($im);
            imagedestroy($im); 
            die(); 
  }
  else if (($ext == 'BMP') && ($type == IMAGETYPE_BMP)) {
            header('Content-Disposition: inline');
            header("Content-Type: image/bmp");
            header("Content-Length: " . filesize($url));
            header("Content-Transfer-Encoding: binary\n");
            $im = imagecreatefrombmp($url);
            imagebmp($im);
            imagedestroy($im);  
            die();
  }
  else {
    hell();
  }

Save above PHP code under your SSL domain, for example, https://helloacm.com/ssl and make it index.php.

Then, for example, if previous non-secure URL is https://codingforspeed.com/images/logo.png then the new secure SSL URL is https://helloacm.com/ssl/?r=logo.png

And, replace URLs accordingly in wordpress using above SQL. These methods are kinda temporarily since if you have budgets, it is better to make all of your domains SSL.

Welcome to the SSL world! And as a reward, some search engines (google algorithms) prefer SSL pages over non-secured HTTP. Your SSL pages tend to gain a better SEO.

double forward slashes URL

Sometimes, you can see that ‘//helloacm.com/images/logo.png‘. The double forward slashes will automatically detect the protocol of current page. If it is HTTP and it will use HTTP or if it is HTTPS then the image will be accessed over HTTPS. You might consider replacing all URLs to double forward slashes for better compatibility i.e. no matter what protocol is using, you are always on the correct one. Simple as that!

htaccess URL mod rewrite

Once your SSL URLs are fully tested, you should move your previous non-secure URLs to the SSL. You can do this in .htaccess (apache server mod rewrite). Simply put the following two lines in the root folder of your website, e.g. wordpress blog.

1
2
3

RewriteEngine On 
RewriteCond %{SERVER_PORT} 80 
RewriteRule ^(.*)$ https://helloacm.com/$1 [R=301,L] 

RewriteEngine On 
RewriteCond %{SERVER_PORT} 80 
RewriteRule ^(.*)$ https://helloacm.com/$1 [R=301,L] 

The 301 redirect tells the search engine that the SEO score of the current non-secure URL should be transferred to the SSL one. Now, start propagating your SSL instead of the non-secure HTTP.

–EOF (The Ultimate Computing & Technology Blog) —