How to deal with net::ERR_SSL_PROTOCOL_ERROR?

Question

I am including a JS library into my website

<script type="text/javascript" src="http://www.turnjs.com/lib/turn.min.js "></script> 

that is designed, maintained and hosted by a webdesign company. The implementation of what I am trying to achieve seems to be well coded – see my JSFiddle – it works fine with no errors. However when a copy and paste the code from my JSfiddle into my website, it doesn’t work at all – Google Chrome developer console shows this:

GET https://www.turnjs.com/lib/turn.min.js net::ERR_SSL_PROTOCOL_ERROR

But it is weird, since my Jsfiddle code is including the same turn.min.js and it works there, but on my website it doesn’t.

Answer 1

This is not a javascript problem, it's an ssl probem.

You can't get a file through an insecure connection (http) from a html page served through a secure connection (https). If you're going to use https (and you SHOULD!) then you need to get the script through a secure connection. To get the file, you should use:

<script type="text/javascript" src="https://www.turnjs.com/lib/turn.min.js "></script> 

And make sure that the file is being served through https, by configuring the server accordingly. Here's a simple configuration for lighttpd, and here's one for apache. If you don't have a CA signed certificate, you could get one with letsencrypt ( www.letsencrypt.org/getting-started/ ). If you don't control the server, you should get in contact with the person who does.

Answer 2

• 1) http://www.turnjs.com/lib/turn.min.js could not be reached through HTTPS. This causes your error.
• 2) JSfiddle accessed through HTTP hence no problems
• 3) <script type="text/javascript" src="http://www.turnjs.com/lib/turn.min.js "></script> will cause problems in any cases for your site, because this is an example of mixed content which will be blocked by almost all browsers.

Solution:

Copy this file on your server and then include local version

I prefer include script to the pages in that way: <script type="text/javascript" src="//www.turnjs.com/lib/turn.min.js "></script>.

That allowed browser to check connection type itself. Which is actually won't work in you case (see p.1).

An very good explanation in Google developers