Last Updated: July 06, 2017
·
3.029K
· steve-jansen

Use src="//server/lib.js" instead of src="http://server/lib.js"

Google's Angular docs turned me onto the HTML trick of linking to external files without specifying the scheme/protocol (e.g., http or https).

Do this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Don't do this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

The browser will implicitly load the external resource using the same scheme as the page.

This avoids dynamically loading scripts or rewriting HTML to support hosting on both HTTP and HTTPS.

HTTPS is becoming much more ubiquitous thanks to better TLS scalability and privacy concerns of HTTP over open networks like WiFi hot spots. Even if your site isn't using HTTPS today, this simple trick today makes it easier to "flip the swtich" tomorrow with HTTPS support.

Keep in mind a few CDN operators (e.g., http://code.highcharts.com/) will overlook this trick even though they support both HTTP and HTTPS.

12 Responses
Add your response

Also keep in mind, when testing local files (eg: file://Users/username/myfile.html), the // will resolve to file:// which obviously will not work for external resources like jQuery.

over 1 year ago ·

@koen, nice point. FYI there is a fix for this. To enable XHR/AJAX requests (like jQuery dynamic loading of scripts) with file:/// schemes:

Chrome

Pass the --allow-file-access-from-files command line arg, which you can check with chrome://flags.

Safari

Click the Develop menu > Disable Local File Restrictions.

over 1 year ago ·

@steve-jansen I think @koen meant that if you open locally an html file that has e.g.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Then the browser will try to fetch file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js instead of http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js Which causes a problem unless you use a smarter script loader with local file fallback.

over 1 year ago ·

Ah, now I see! Totally right.

I forgot about this since I use yeoman/grunt/bower now for local JS dev, which gives me 'grunt serve' for a lightweight server. Some people use a short rack config file for this too.

over 1 year ago ·

to avoid file:/// use python -m SimpleHTTPServer or faster node alternative

npm install http-server -g
http-server -p 8000

for a new project grunt is a good idea

over 1 year ago ·

@lukasz-madon, great tip!

over 1 year ago ·

good to know!

over 1 year ago ·

I believe it worth to mention that IE6 have some issues with protocol relative URLs.


Update: This is the right link

The previous one is about the server conditions that makes IE6 returns a dialog window.

over 1 year ago ·

Hi @robsonsobral, good to know however that link doesn't seem to talk about protocol relative URLs in IE6. It talks about host name mismatches when using IE6 on XP, which uses SSLv2 instead of SSLv3 or TLSv1.0. Did I misread the article?

over 1 year ago ·

I'm sorry, @steve-jansen! The comment is updated.

over 1 year ago ·

Hi @robsonsobral, thanks! It looks like this IE6 edge case effects Google's data center. However, it looks like it could work in IE6 if your hostname matches the subject of the SSL certs. Definitely good to know for anything hosted by Google, at the least.

over 1 year ago ·

You can also use python to start a simple webserver also.

Mac:
Navigate to the folder to use and enter:
python -m SimpleHTTPServer 8000

The number at the end is the port to use, open your browser and visit http://localhost:8000 You can use the default of port 80 if you wish and remove the port number entirely.

over 1 year ago ·