How to Load jQuery Securely Over HTTPS

Loading jQuery securely over HTTPS protects your website from man-in-the-middle (MITM) attacks, eliminates mixed content security warnings, and ensures the library has not been tampered with in transit. This guide outlines the best practices for implementing jQuery via HTTPS, including using explicit secure protocols, leveraging official Content Delivery Networks (CDNs), applying Subresource Integrity (SRI) hashes, and configuring local fallbacks.

1. Always Use Explicit HTTPS CDN URLs

Historically, developers used protocol-relative URLs (e.g., //code.jquery.com/jquery-3.7.1.min.js). Today, best practice dictates specifying the https:// protocol explicitly. This guarantees the script is always transmitted over an encrypted TLS connection, even if the referencing page is tested or accessed insecurely.

Example using the official jQuery CDN:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Alternative trusted CDNs offering HTTPS delivery include:

  • Google Hosted Libraries: https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js
  • Cloudflare (cdnjs): https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js

2. Implement Subresource Integrity (SRI)

Loading over HTTPS encrypts the connection to the CDN, but it does not protect your site if the CDN itself is compromised. Subresource Integrity (SRI) solves this by verifying that the downloaded file matches an expected cryptographic hash. If an attacker modifies the jQuery file on the CDN, the browser will block execution.

To implement SRI, add the integrity and crossorigin attributes to your <script> tag:

<script 
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous">
</script>
  • integrity: Contains the cryptographic hash algorithm (e.g., sha256, sha384, or sha512) followed by the base64-encoded digest.
  • crossorigin="anonymous": Required for cross-origin requests to allow SRI verification without transmitting user credentials like cookies.

3. Provide a Secure Local Fallback

If a third-party CDN experiences downtime or is blocked by an ad blocker, your website's functionality may break. You can implement a secure fallback that loads a locally hosted copy of jQuery if the window.jQuery object is not detected.

Ensure the local copy is also served over HTTPS:

<!-- Attempt CDN load with SRI -->
<script 
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous">
</script>

<!-- Fallback to local copy if CDN fails -->
<script>
  window.jQuery || document.write('<script src="/js/vendor/jquery-3.7.1.min.js"><\/script>');
</script>

4. Self-Hosting jQuery Over HTTPS

For maximum control, self-host the jQuery library directly on your web server:

  1. Download the production version of jQuery directly from the official website.
  2. Place the file within your web server's public directory (e.g., /assets/js/jquery.min.js).
  3. Ensure your web server has a valid SSL/TLS certificate configured.
  4. Reference the file using a relative path:
<script src="/assets/js/jquery.min.js"></script>

When self-hosting on an HTTPS-enabled domain, relative paths automatically inherit the secure HTTPS protocol.