The Big Three Block Mixed Content: Update Your HTMLby Alan Regan
However, Firefox is not the only browser that does this. Internet Explorer has blocked mixed content since IE 8 (2009) and Chrome started blocking mixed content in version 21 (2012).
What is "mixed content"?Mixed content refers to a web page that contains a mix of both secure content and open or unsecured content. Basically, you're visiting a secure web page (the address begins with HTTPS and has a current and valid security certificate installed). On that secure web page, there is content that draws from an open or unsecured source.
Example pagesFor the following examples, please use one of the following web browsers: Firefox 23+, Google Chrome 21+, or Internet Explorer 8+. Do not use Apple's Safari web browser, since as of the writing of this blog, it does not block mixed content. Not yet, at least.
- Secure Content Example. See this example web page that is hosted on a secure website and only refers to secured content. All references point to content with valid HTTPS addresses. You should see an embedded YouTube video as well as a dynamic countdown counter.
- Mixed Content Example. See this example web page that is hosted on a secure website but refers to media and code with unsecure references. The references point to content with HTTP addresses. The same objects as above are included, but you will likely not see the objects due to mixed content blocking.
What You Need to Verify or Change in Your CodeIf you are embedding content on our learning management system or any secured website, check your code. You want to be sure that all LINK, SCRIPT, SRC, and VALUE references point to HTTPS sites. You also want to be sure that the target websites have valid SSL certificates installed.
If your code contains
... you would change the code to
Another technique to explore is to remove the "scheme" from the address altogether. The scheme is
https:. An example would be like this:
Finally, you can also consider relative references. "Absolute" references include the complete address for a given resource. "Relative" references provide the path to the resource based on the source web site address.
- Absolute reference:
<img src="http://www.pepperdine.edu/images/home/vista-3.jpg" />
- Relative reference:
<img src="/images/home/vista-3.jpg" />
Be sure to check:
- Media embed code
- Image references
- Linked stylesheets (CSS)
- Links within stylesheets (CSS)
Embed Site to Avoid: TED.comAs of this writing, the TED.com website does not offer HTTPS references for its videos. If you would like to embed TED Talk content, find the same video on YouTube and use YouTube's embed code which supports HTTPS.
The Tempting-But-Not-Advised ApproachWhile I can understand the motivation, I would discourage you from simply asking your site participants to use the Safari web browser. Granted, Safari seems to display mixed content right now, but that can easily change. An equally bad practice is to ask your visitors to permanently set their web browsers to "allow" mixed mode content. These two approaches seem like easy fixes because you don't need to do anything to your content. However, the reason that your content isn't displaying in other web browsers is because you are not following the best practices to help protect your audience. Please put in the time to review your code and update your references as needed. This way, your participants can easily view your content and feel secure doing so!
- How to Fix a Website with Blocked Mixed Content
- Enabling Mixed Content in Google Chrome
- Enabling Mixed Content in Microsoft Internet Explorer
- Enabling Mixed Content in Mozilla Firefox