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.
Written by Steve Jansen
Related protips
12 Responses
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.
@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.
@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.
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.
to avoid file:/// use python -m SimpleHTTPServer or faster node alternative
npm install http-server -g
http-server -p 8000for a new project grunt is a good idea
@lukasz-madon, great tip!
good to know!
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.
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?
I'm sorry, @steve-jansen! The comment is updated.
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.
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.
