Solving Browser Security Warnings

When you use SSL to secure your site (and you should use SSL) you may encounter web browser warnings on some or all of the pages in your site. Some web browsers provide scarier warnings than others, but in general you want to prevent these warnings so that your users are not scared away or concerned by them. This is especially true if you are doing any kind of ecommerce on your site, you certainly don't want your users thinking there is anything insecure about your site or they may be afraid to proceed with a purchase.

ie 8 insecure content warning

Note that the above screen shot is an example from Internet Explorer 8, it has changed in newer versions and will look different than this screen shot in newer versions of Internet Explorer, Chrome or Firefox or other web browsers. The messages will be similar in most browsers.

What Causes the Insecure Content Warnings?

If the web page url is using SSL (the web page url starts with https as opposed to http), but some content on the page is not using SSL/https it will cause the warning. More specifically, these errors occur if there is anything in the html markup that has scr="http://...." which means any image, iframe, javascript, or CSS file could cause the warning. Note that it only happens with src= not with href=, so links to insecure pages do not cause any warnings, it only happens for things actually loaded within the page.

Finding the Cause(s) of the Insecure Content Warning

First, you have to identify the source(s) of the warnings, that is you need to figure out what image, iframe, javascript file, or css url exists in the markup of the page and that are not using the same secure https protocol as the main page. The first step is to just right click somewhere on the web page and choose "View Source". The markup you see here is the markup that was delivered to the web browser from the server, however the markup can be changed by javascript after the page is delivered to the browser. Therefore if you cannot find the problem using "View Source" then you will need to look deeper by using the Browser development tools which provide a way to inspect the html markup after all the javascript has executed in the web browser. In Chrome for example you can right click and choose "Inspect Element" to get to the browser tools. It will zoom in on the markup right where you right clicked but you can expand it out and view all of the page markup. Doing this is important if you can't find the problem using the normal "View Source" approach because javascript can load images or or more javascript or css files and any of those could be loaded insecurely depending on how well written the javascript is, and that will cause the browser warning.

What you need to look for is:


you need to inspect every place in the page where that occurs and look for anything with http: like src=http:... or src="http:..." or src='http:... they should generally all have either single quotes or double quotes after the equal sign but they don't always and they may not be consistent within a given page.

Fixing the Problem and Avoiding the Problem

The insecure urls need to be fixed at the source so first you need to determine where the content is coming from. If the problem is happening on every page of your mojoPortal CMS site, chances are the problem exists in the markup in the layout.master file of the skin used on the page. Maybe the designer hard coded an image or some javascript in there with src="http:...

The problem could also come from the database in a CMS if a user enters in some markup or adds some javascript from the source view of the editor. This is likely if the problem only happens on a specific page. If you have edit permissions on the page you could inspect the content using the source view of the editor. In general, by viewing the source of the page you should be able to get an idea of where the content is coming from.

Once you've found the source of the problem and are able to edit it, you could fix it by changing from src="http://... to src="//... an url that starts with // is known as a protocol relative url. Basically a protocol relative url leaves out the protocol (http and https are protocols, https is the secure one). By leaving out the protocol it tells the web browser to just use the same protocol that the page is using, so if the page is using https and an image url or css url or javascript url is in the content of the page and it uses a protocol relative url, then those items would use https since the outer page is using it and therefore no browser warning will happen. Of course there may be more than one thing in a given page that could be causing the problem so if it doesn't go away after fixing the first one you found you need to keep looking.

Note that if you are linking to external resources such as javascript or css files or images from another domain you can still use protocol relative urls. However if SSL is not supported by the server where the content is served from then it would fail to load the file so it could break some javascript feature or fail to load an image in that scenario. If that happens the only way to fix it is to contact the owner or source of the content and ask them to support https/SSL or stop using the remote resources. If you can host the files within your own site then you can always use relative urls. Most CDNs (Content Delivery Networks) that host popular javascript libraries like jQuery do support https/SSL.

Created by Joe Audette on Nov 29, 2012
Last Modified by Joe Audette on Nov 30, 2012