To ensure a high level of security for the user’s connection to the site server, it is recommended to use such technology as HSTS. What is it for and how to activate it on your website, we will talk below.
Internet marketing outside the Moscow Ring Road:
the best online promotion companies in Russia 2020
Commercial offer
What is HSTS?
Several years ago, webmasters began to install SSL certificates on their resources in order to increase the level of safety of user data. However, if you understand the technology, then it may not be enough for maximum security. The thing is that the user, entering the domain address in the browser line, first gets to the unprotected version of the site, and after that he is redirected to the version with the HTTPS protocol. This server operating principle allows attackers to gain access to user data in a variety of ways. The HSTS technology can solve this problem.
The essence of its work lies in the fact that the browser receives a protected HTTP Strict Transport Security header, and this can happen even on the user’s first visit to the resource (if the domain is added to the Preload List). This header tells the browser to enable a secure HTTPS connection, i.e. only this version of the connection becomes available, and unsecured HTTP is no longer served. In other words, it will no longer be possible to intercept a browser request at the time of a redirect from HTTP to HTTPS.
An interesting point, if the HSTS mechanism is activated, then if there are pages on the site that work using an unprotected protocol, access to them will automatically be closed. The same situation will arise if the SSL certificate has expired.
How to implement HSTS?
On the first visit to the site, the user gets an unsecured connection even when using HSTS. To get the most out of the implementation of this mechanism, you need to add the domain to a special Preload List – a list of sites created by Google. This listing is supported by most browsers, and to check if a site is in this list, you can use one of the specialized services (for example, ssllabs.com). The Preload List lists domains that use the HSTS header mechanism with the maximum expiration date set and the preload flag.
But before adding a domain to the listing, you need to understand that after that, the site will no longer be accessible via the HTTP protocol in principle – only a connection via HTTPS will be possible. Therefore, you need to be sure that you plan to permanently use the SSL certificate, while not forgetting to renew it in time.
Installing the certificate
The first step towards activating HSTS technology will be the correct installation of the SSL certificate. Most of the leading hosting providers provide this service. We will not focus on the principles of choosing a certificate, let’s just say that, as a rule, they are purchased for one year, then extended (or reissued).
After installation, it is important to check the operation of the settings – there should be an automatic redirection from the HTTP protocol to HTTPS, if everything is in order, let’s move on.
Configuring HSTS
There are two options here: activating the mechanism through the capabilities of the hosting provider’s personal account. In this case, everything is pretty simple. And the second is manual server configuration, let’s talk about it below.
You must first select a title option:
- Strict-Transport-Security: max-age =
– defines the duration of HSTS for the specified domain. - Strict-Transport-Security: max-age =
; includeSubDomains – also defines the validity period, but the action applies not only to the domain, but also to its subdomains. - Strict-Transport-Security: max-age =
; preload – in addition to defining HSTS expiration dates, it indicates to the user’s browser that this domain is in the Preload List.
Header directives:
- max-age – present in any title option and is required. Tells the user’s browser how long to store the connection type in seconds. Typically, the retention periods are 31536000 and 63072000 (1 and 2 years, respectively). You can also set the value to 0, in which case the browser will reset the connection information every time the user visits.
- Includesubdomains – if the domain contains subdomains, then this directive is set in the header. To ensure a high level of connection security, it is recommended to link each subdomain to the main one.
- Preload – This directive indicates that the site supports HSTS preloading and is added to the Preload List.
Example header:
This header conveys the following information to the browser: the header is valid for 1 year (31536000 seconds), the domain has been added to the listing base. If during this period the SSL certificate ceases to be valid on the site, the browser will automatically terminate the connection.
Apache configuration
If the server runs on Apache, then to activate HSTS, you need to add the following parameters to its configuration file:
<VirtualHost 67.89.123.45:443> Header always set Strict-Transport-Security "max-age=31536000; includeSubdomains;" </VirtualHost>
In this case, the validity period is 1 year, the title itself will be updated every time you visit the resource. At the same time, to redirect to pages using the HTTPS protocol, you should add the parameter (domain.com is your domain):
<VirtualHost *:80> [...] ServerName domain.com Redirect permanent / https://domain.com/ </VirtualHost>
Setting for Ngnx
Similarly, by adding additional parameters to the configuration file, which, as a rule, is located along the path “/etc/nginx/conf.d”. The parameters are a pre-written title from the options listed above.
Ngnx allows you to use only the option with a secure or unsecured connection on one server. Simultaneous support for these protocols is not supported.
Adding to Preload List
This is an optional step, but if you plan to constantly use an SSL certificate on the site, then to ensure the most secure connection, it is recommended to add the domain to the listing. It was already mentioned above that after adding a site there, all modern browsers will stop opening unprotected pages. If you need to disable HSTS, it will take at least several months of waiting to remove the domain from the listing. Therefore, before adding, it is worth considering all the nuances.
So, the algorithm of actions:
- Install a valid SSL certificate on the server.
- The redirect from HTTP to HTTPS should work correctly, all redirects should be checked. Remember, if any page is not accessible via HTTPS, after adding to the listing, it will be inaccessible in principle.
- Configure the server to transmit the Strict Transport Security header.
- Online get acquainted with the information, and the addition takes place in a special form.
HSTS check
After setting up HSTS, its operation must be checked for errors. This can be done in the following ways:
- On the Apache side using CURL (where domain.com is the name of the checked domain):
$ curl -s -D- https://domain.com | grep Strict Strict-Transport-Security: max-age=31536000; includeSubdomains;
-
Using services:
The relevance of using HSTS
Header preloading certainly significantly improves the security of the site (or rather user data), but is this required for the average resource? Most probably not. However, this decision will be justified if any transactions are made on the site, personal information of users is transmitted, etc.
If it was decided to include HSTS on the site, then it is recommended to first set the minimum possible header validity period (max-age), this will allow you to quickly correct errors (talking about the inaccessibility of pages via HTTPS) with minimal consequences.
If we talk about SEO-promotion, then the presence of HSTS on the site can positively affect the ranking of the site. This is achieved indirectly due to the fact that the speed of loading pages is reduced – the server does not need to redirect from HTTP to HTTPS, the second version of the protocol is loaded immediately.
![From the Author: Webpack is a JavaScript module bundler that transforms web resources such as HTML, CSS, JavaScript, and SVG files and bundles them into a smaller group of files. Webpack also helps with chunking (splitting into smaller chunks) and managing code dependencies to ensure that the code that needs to be loaded first does this. How webpack works In this article, we'll go over some of the new features to look out for in webpack in 2021, but first we'll look at what's new in webpack in 2020. webpack V4 - V5: Important Changes In October 2020, a newer version of webpack was released: webpack 5. This version removes all deprecated elements in V4 and fixes critical bugs to bring the webpack architecture up to par for future improvements. JavaScript. Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn more Other interesting features in version 5: Long-Term Caching Support - New algorithms to support long-term caching are enabled by default in production mode. The real hash of the content - previously only the hash of the internal structure was used in webpack. Webpack 5 will use the real hash of the file content when used [contenthash], which will have a positive effect on long-term caching when only small changes are made to the file. Modular structure - webpack 5 came with a new feature that allows multiple webpack builds to work together. See here for the complete changelog. While 2020 has been a big year for webpack, there is still a lot more to come, which we'll talk about in the following sections. Please note that these updates are subject to change based on the ever-changing world of web developers. Webpack roadmap 2021 Improved ESM support Since the ECMAScript Module (ESM) was introduced in 2015, it has become the standard mechanism for code reuse in highly fragmented JavaScript applications. To improve ESM support, the webpack team is planning to make some important updates. Self-executing snippets One of the most interesting features of webpack is code splitting. This feature allows you to split your code into multiple packages that you can download on demand or in parallel. At the moment, dynamically loaded fragments in webpack usually serve as a container for modules and never execute module code directly. For example, writing: JavaScript import ("./ module") 1 import ("./ module") Will compile like this: JavaScript __webpack_load_chunk __ ("chunk-containing-module.js"). Then (() => __webpack_require __ (" ./module ")) 1 __webpack_load_chunk __ (" chunk-containing-module.js "). then (() => __webpack_require __ (" ./ module ")) In most cases this cannot be changed, but the webpack command considers some cases where webpack could generate a block that directly executes the contained module. This can result in less code generated. ESM imports and exports While there is already a plugin for generating ESM exports, the webpack team is considering adding built-in support for this feature, which may be useful when you decide to integrate webpack packages into ESM boot environments or inline scripts. JavaScript. Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More The command also takes absolute URLs into account when importing. This is very useful when using external services that offer their APIs as EcmaScript modules. Here's an example: JavaScript import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js" ) 12345 import {event} from "https://analytics.company.com/api/v1.js" // Changes to: import ("https://analytics.company.com/api/v1.js") Such the function will help to gracefully handle errors with external dependencies. ESM Library The webpack team will also try to improve the bundling using the ESM libraries and will add a special mode that does not apply chunking, but instead generates rendered modules that can be plugged in via ESM imports and exports. This means that as long as loaders, graphics modules, and resource optimizers are running, no fragment graphs will be created. Instead, each module in the modules graph will be released as a separate file. Strict Mode Caveats Sooner or later, the webpack team plans to ensure that all contained code is put into strict mode when the ESM package is created. While this may not be a problem for many modules, there are a few older packages that may have problems with different interpretations, so it would be nice to see warnings for them. SourceMap Performance SourceMap provides a way to map code in a compressed file back to its original position in the original file. In other words, it links the minified version of the resource (CSS or JavaScript) to the original authoring version. This utility helps you debug applications even after resources have been compressed / optimized. Using SourceMap in webpack is currently quite expensive due to performance issues, so the webpack team will be looking to improve this in 2021. They will also be looking to update / improve the terser plugin, which is the default webpack minifier in webpack 5. Package.json export / import field Node.js v14 came with support for an export field in package.json. This feature allows you to directly define entry points for a package, or conditionally define entry points for each environment or JavaScript flavor (TypeScript, Elm, CoffeeScript, etc.). In a later release, private imports were also supported in Node.js (similar to the export field in package.json). For now, webpack 5 only supports the export function, even with additional conditions such as specifying production / development. Import fields for private imports are another feature to look out for in 2021. HMR for Modular Design Hot Module Replacement (HMR) works by replacing, adding, or removing modules while the application is still running, without the need for a complete reboot. This can significantly speed up development by preserving application state that would have been lost on a hard reboot. Plus, it instantly refreshes the page when changes are made to the source code, much like changing styles directly in the browser developer tools. Webpack 5 ships with a new feature called “Module Federation”. This feature allows you to integrate multiple assemblies together at runtime. HMR currently only supports one assembly at a time and updates cannot move between assemblies. The webpack team will work to improve the HMR updates to move between different builds, making it easier to develop federation apps. Hint System To monitor errors and warnings, the webpack team is considering adding another category for the user: hint. Similar to displaying errors and warnings, a tooltip notifies the user of information that may be of value to him. However, unlike the previous categories, the prompt will identify optimization opportunities or tricks, not problems. An example hint might look something like: "Did you know that when you add X a change to file Y, you can clean it up?"; or "Easy to encode the space with the space function." WebAssembly According to the official documentation, WebAssembly (abbreviated Wasm) is "a binary instruction format for a stack-based virtual machine." This means that you can build your software with programming languages like Rust, C ++ and Python and provide it to the end user in a browser with near-native performance. In the current version of webpack, WebAssembly is experimental and not enabled by default. The default support is what the webpack team will hopefully add this year. Conclusion There are big changes coming to webpack in 2021, and while this list may not be final, we can look forward to new features and capabilities that will make webpack easier and more efficient. Author: Elijah Asaolu Source: blog.logrocket.com Editorial: The webformyself team. JavaScript. Quick Start Learn the basics of JavaScript with a hands-on example of building a web application Learn More Webpack. The Basics Watch the Webpack Video! Look](https://webproject.pro/wp-content/uploads/2021/06/From-the-Author-Webpack-is-a-JavaScript-module-bundler-that.jpg)
