HTTPS-secured Resources: How to Properly Include CSS and JS files

You can use the link and script tags when including CSS and JavaScript files in an HTML document. To include a CSS file via HTTPS, you can use the following syntax:

<link rel="stylesheet" href="https://example.com/styles.css">

Similarly, to include a JavaScript file via HTTPS, you can use the following syntax:

<script src="https://example.com/script.js"></script>

When including these resources, it is important to make sure that the URLs are using the HTTPS protocol. If the website is being served over HTTPS, it is important that all of the resources are also served over HTTPS, otherwise, the browser will block the resources and it can cause security issues.

Another way to include files via HTTPS is by using a relative path to the files.

<link rel="stylesheet" href="//example.com/styles.css">
<script src="//example.com/script.js"></script>

This way, the browser will automatically use the same protocol that the website is being served over.

It's also possible to include these files via a package manager, like npm or yarn, this way you can manage the version of the packages and dependencies.

If you're using a framework or a library like Angular, React or Vue, you can use the built-in mechanism to include these files, for example in Angular you can use the @import statement to include CSS files in your components.

In summary, the key to including CSS and JS files via HTTPS is to make sure that the URLs are using the HTTPS protocol. Additionally, you can use a relative path or package manager to include these files in your project.