Jump to content

optimized .htaccess file, Fix for SSL insecure page issues and fix for payment gateway errors


Recommended Posts

I have spent weeks researching various issues with my site, tweaking it, making it SEO compliant etc and resolving numerous issues with SSL security and various modules that cause my page to display insecure content and voiding the seal in browsers. Here is a list of tweaks I have developed over this time that has greatly improved my store, hope it helps you too and if anyone see's any room for improvement please do contribute to this post same goes if you see any errors in my tweaks would be a great help to point them out as well :) Heres a brief configeration of my store to begin with

 

Prestashop version 1.4.9

Browser: Chrome

Debugging method: Pressing the CTRL+SHIFT+J keys in chrome browser

Template: Custom Template in Themes Directory

Modules discussed: CloudCache, Google Checkout

 

1- Optimizing the .htaccess file.

 

A number of modules and features in prestashop requires a well configured Apache server and in most hosting providers this is not the case. Amending your .htaccess file offers a work around to these issues. The tweaks I have implemented on my .htaccess file comes mainly from the excellent .htaccess file provided on http://html5boilerplate.com/ and amended to my prestashop needs. A few points about my file, my stores name is www.dressmeglam.com so anywhere you see this will need to be changed to your store! To apply any tweaks in this file to your own just add the code portion into your .htaccess generator in your backend so this code comes on top of the file generated from your backoffice generator.

 

# .htaccess automaticaly generated by PrestaShop e-commerce open-source solution
# WARNING: PLEASE DO NOT MODIFY THIS FILE MANUALLY. IF NECESSARY, ADD YOUR SPECIFIC CONFIGURATION WITH THE HTACCESS GENERATOR IN BACK OFFICE
# http://www.prestashop.com - http://www.prestashop.com/forums
# ----------------------------------------------------------------------
# Start rewrite engine
# ----------------------------------------------------------------------
# Turning on the rewrite engine is necessary for the following rules and
# features. FollowSymLinks must be enabled for this to work.
# Some cloud hosting services require RewriteBase to be set: goo.gl/HOcPN
# If using the h5bp in a subdirectory, use `RewriteBase /foo` instead where
# 'foo' is your directory.
# If your web host doesn't allow the FollowSymlinks option, you may need to
# comment it out and use `Options +SymLinksOfOwnerMatch`, but be aware of the
# performance impact: http://goo.gl/Mluzd
<IfModule mod_rewrite.c>
 Options +FollowSymlinks
# Options +SymLinksIfOwnerMatch
 RewriteEngine On
# RewriteBase /
</IfModule>
# ----------------------------------------------------------------------
# force the "www." at the beginning of URLs or vise versa as long as your using one or the other only and not both! this is an SEO tweak
# ----------------------------------------------------------------------
RewriteCond %{HTTP_HOST} ^dressmeglam.com
RewriteRule ^(.*)$ http://www.dressmeglam.com/$1 [R=301,L]


# ----------------------------------------------------------------------
# Cross-domain AJAX requests
# ----------------------------------------------------------------------
# Serve cross-domain Ajax requests, disabled by default.
# enable-cors.org
# code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
#  <IfModule mod_headers.c>
#	Header set Access-Control-Allow-Origin "*"
#  </IfModule>

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
 <IfModule mod_headers.c>
# mod_headers, y u no match by Content-Type?!
<FilesMatch ".(gif|png|jpe?g|svg|svgz|ico|webp)$">
  SetEnvIf Origin ":" IS_CORS
  Header set Access-Control-Allow-Origin "*" env=IS_CORS
</FilesMatch>
 </IfModule>
</IfModule>

# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
 <FilesMatch ".(ttf|ttc|otf|eot|woff|font.css)$">
Header set Access-Control-Allow-Origin "*"
 </FilesMatch>
</IfModule>

# ----------------------------------------------------------------------
# Proper MIME type for all files
# ----------------------------------------------------------------------
# JavaScript
#   Normalize to standard type (it's sniffed in IE anyways)
#   tools.ietf.org/html/rfc4329#section-7.2
AddType application/javascript		 js jsonp
AddType application/json			   json
# Audio
AddType audio/ogg					  oga ogg
AddType audio/mp4					  m4a f4a f4b
# Video
AddType video/ogg					  ogv
AddType video/mp4					  mp4 m4v f4v f4p
AddType video/webm					 webm
AddType video/x-flv					flv
# SVG
#   Required for svg webfonts on iPad
#   twitter.com/FontSquirrel/status/14855840545
AddType	 image/svg+xml			  svg svgz
AddEncoding gzip					   svgz
# Webfonts
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf		 ttf ttc
AddType font/opentype				  otf
AddType application/x-font-woff		woff
# Assorted types
AddType image/x-icon						ico
AddType image/webp						  webp
AddType text/cache-manifest				 appcache manifest
AddType text/x-component					htc
AddType application/xml					 rss atom xml rdf
AddType application/x-chrome-extension	  crx
AddType application/x-opera-extension	   oex
AddType application/x-xpinstall			 xpi
AddType application/octet-stream			safariextz
AddType application/x-web-app-manifest+json webapp
AddType text/x-vcard						vcf
AddType application/x-shockwave-flash	   swf
AddType text/vtt							vtt
# ----------------------------------------------------------------------
# Gzip compression if your server supports this
# ----------------------------------------------------------------------
<IfModule mod_deflate.c>
 # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
 <IfModule mod_setenvif.c>
<IfModule mod_headers.c>
  SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)s*,?s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
  RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
 </IfModule>
 # Compress all output labeled with one of the following MIME-types
 <IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml
							  application/javascript
							  application/json
							  application/rss+xml
							  application/vnd.ms-fontobject
							  application/x-font-ttf
							  application/xhtml+xml
							  application/xml
							  font/opentype
							  image/svg+xml
							  image/x-icon
							  text/css
							  text/html
							  text/plain
							  text/x-component
							  text/xml
 </IfModule>
</IfModule>

# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------
# These are pretty far-future expires headers.
# They assume you control versioning with filename-based cache busting
# Additionally, consider that outdated proxies may miscache
#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
# If you don't use filenames to version, lower the CSS and JS to something like
# "access plus 1 week".
<IfModule mod_expires.c>
 ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
 ExpiresDefault						  "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
 ExpiresByType text/cache-manifest	   "access plus 0 seconds"
# Your document html
 ExpiresByType text/html				 "access plus 0 seconds"
# Data
 ExpiresByType text/xml				  "access plus 0 seconds"
 ExpiresByType application/xml		   "access plus 0 seconds"
 ExpiresByType application/json		  "access plus 0 seconds"
# Feed
 ExpiresByType application/rss+xml	   "access plus 1 hour"
 ExpiresByType application/atom+xml	  "access plus 1 hour"
# Favicon (cannot be renamed)
 ExpiresByType image/x-icon			  "access plus 1 week"
# Media: images, video, audio
 ExpiresByType image/gif				 "access plus 1 month"
 ExpiresByType image/png				 "access plus 1 month"
 ExpiresByType image/jpeg				"access plus 1 month"
 ExpiresByType video/ogg				 "access plus 1 month"
 ExpiresByType audio/ogg				 "access plus 1 month"
 ExpiresByType video/mp4				 "access plus 1 month"
 ExpiresByType video/webm				"access plus 1 month"
# HTC files  (css3pie)
 ExpiresByType text/x-component		  "access plus 1 month"
# Webfonts
 ExpiresByType application/x-font-ttf	"access plus 1 month"
 ExpiresByType font/opentype			 "access plus 1 month"
 ExpiresByType application/x-font-woff   "access plus 1 month"
 ExpiresByType image/svg+xml			 "access plus 1 month"
 ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
 ExpiresByType text/css				  "access plus 1 year"
 ExpiresByType application/javascript	"access plus 1 year"
</IfModule>
# ----------------------------------------------------------------------
# ETag removal
# ----------------------------------------------------------------------
# FileETag None is not enough for every server.
<IfModule mod_headers.c>
 Header unset ETag
</IfModule>
# Since we're sending far-future expires, we don't need ETags for
# static content.
#   developer.yahoo.com/performance/rules.html#etags
FileETag None
# ----------------------------------------------------------------------
# UTF-8 encoding
# ----------------------------------------------------------------------
# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset utf-8
# Force UTF-8 for a number of file formats
AddCharset utf-8 .atom .css .js .json .rss .vtt .xml
<IfModule mod_rewrite.c>  

 

- Basically in a nutshell what these additions did for me was limit the number of Resource interpreted as Script but transferred with MIME type errors I had on the site

 

- Improve SEO by redirecting my dressmeglam.com domain to www.dressmeglam.com with a 301 redirect

 

- Improved my caching for the site

 

- improved my site's speed by allowing gzip as my server did not have it configured on.

 

- other additions helped when I was messing with a lot of various modules and site analyzers etc that used iframes and ajax widgets etc.

 

2- Fixing some SSL page insecure errors in HTTPS

 

I had alot of frustrating days trying to figure out why my site SSL was not securing my site 100%. The padlock icon might not display in your browser's status bar, or you might receive errors that your site contains both secure and non-secure items.To resolve these issues:

 

- Make sure your certificate is installed properly on your hosting solution. indicators that the certificate is not hosted properly is the x on the lock or a crossed out https in your address bar. Check if you have entered the correct certificate keys if your hosting on your own server.

 

- Make sure all elements on your secure site is loading all the elements securely, meaning any site element — an image, for example — loads from outside the secure (HTTPS) layer is being loaded securely. When you press CTRL+SHIFT+J you will see error messages such as This page has insecure content from http:/www.dressmeglam.com/img/logo.jpg?xxxxxxx. Im my case the logo image for some reason was not being loaded into HTTPS no matter what I did. I am using CloudCache module to increase the speed of my site. and for some reason Cloudcache was not serving this logo image over https. After days of back and forth emails with cloudcache support we were not able to resolve this issue, so the solution I hardcoded the location to the logo image in my header.tpl file as so:

 

Locate the line with img class="logo" src=" and hard code the https location as follows

 

<img class="logo" src="https://www.dressmeglam.com/img/logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" />

 

and this resolved my problem and all my site is now secure. I also had insecure content being delivered by modules such as addshopper's social media widget, those I couldn't resolve and resolved by removing the module all together.

 

3- Most Authentication payment modules errors.

 

I have authorize.net installed as my payment gateway. after days of scouring the forums I came across a post here to resolve my issue of orders were not being processed after client enters credit card details, they received an error, this was due to an invalid format of the logo image in the /img/ folder. login to your site via FTP, go to the img/ folder then replace the .JPG images there with the originals you have or if you don't have the images, download the all .jpg images there to your computer. If you try to view these images they will give you an invalid format error. Open them with an editor (I used ACDSEE) and just re-save them as JPG overwriting the file, then re-upload to your server. This resolved that error and made the payment process work again. I believe this can cause any other modules to malfunction that call upon these images, so its a good idea to replace them anyways just incase....

 

 

i will update this post with any other useful fixes and tweaks I come across.. :)

Edited by www.dressmeglam.com (see edit history)
  • Like 6

Share this post


Link to post
Share on other sites

 

- Make sure all elements on your secure site is loading all the elements securely, meaning any site element — an image, for example — loads from outside the secure (HTTPS) layer is being loaded securely. When you press CTRL+SHIFT+J you will see error messages such as This page has insecure content from http:/www.dressmeglam.com/img/logo.jpg?xxxxxxx. Im my case the logo image for some reason was not being loaded into HTTPS no matter what I did. I am using CloudCache module to increase the speed of my site. and for some reason Cloudcache was not serving this logo image over https. After days of back and forth emails with cloudcache support we were not able to resolve this issue, so the solution I hardcoded the location to the logo image in my header.tpl file as so:

 

Locate the line with img class="logo" src=" and hard code the https location as follows

 

 

<img class="logo" src="https://www.dressmeglam.com/img/logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}">

 

 

and this resolved my problem and all my site is now secure. I also had insecure content being delivered by modules such as addshopper's social media widget, those I couldn't resolve and resolved by removing the module all together.

 

 

 

Hello Dressmeglam, thank you for this message. The problem you encountered with the CloudCache Logo is not due to CloudCache, instead it is a template configuration issue. The logo image does refer to HTTPS by default on PrestaShop. Nevertheless, thank you for sharing your tips and solutions for these issues you encountered :)

Share this post


Link to post
Share on other sites

Hello Dressmeglam, thank you for this message. The problem you encountered with the CloudCache Logo is not due to CloudCache, instead it is a template configuration issue. The logo image does refer to HTTPS by default on PrestaShop. Nevertheless, thank you for sharing your tips and solutions for these issues you encountered :)

 

As mentioned we tried to find the cause of this issue with CloudCache tech as well, the problem is that the logo image being served from the CDN servers is coming as none secured when it is supposed to be secured, this has nothing to do with my template or anything from my side. As you have correctly noted that yes prestashop was calling in the logo correctly as secured, but for some reason the image coming from the cache servers wasn't.

 

This is why I suggested this work around incase this is happening to other users. I love cloudcache module and I think its one of the best modules for prestashop out there and a must for any serious e-commerce site and an e-commerce site's main priority is security as all would agree, so my challenge was finding a way to make cloudcache serve my logo image over https so my site would retain its security status throughout the site. and coming up with that hard code was my personal solution to make it all work.

 

If you know of a solution to get my stores logo image come from the CDN servers as secure please share :)

 

thanks

Edited by www.dressmeglam.com (see edit history)

Share this post


Link to post
Share on other sites

Hey there...

 

I just checked your shop www.dressmeglam.com with Internet Explorer and Firefox...

 

I noticed that if you view your site at the default Zoom level, the page is all messed-up.

It is ok if you zoom one step.

 

I think the problem is with your Logo that is to big and is moving everything else out of place.

 

Just wanted to let you know.

 

Cheers

Dan

Share this post


Link to post
Share on other sites

Hey there...

 

I just checked your shop www.dressmeglam.com with Internet Explorer and Firefox...

 

I noticed that if you view your site at the default Zoom level, the page is all messed-up.

It is ok if you zoom one step.

 

I think the problem is with your Logo that is to big and is moving everything else out of place.

 

Just wanted to let you know.

 

Cheers

Dan

 

Thanks Papagino, you were checking my site the moment I was doing some coding adjustments,(adding the Alexa script) for some reason it is causing my layout problems, Its all sorted now. Thanks for the heads up :)

Share this post


Link to post
Share on other sites
  • 1 year later...
  • 8 months later...
Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More