Recently usedDocusaurusI set up a personal website. After deploying, I saw the word "unsafe" on the browser address bar that was particularly eye-catching, so I couldn't help but think of it.HTTPS. Recalling some of the things I encountered in daily developmentHTTPSI can’t help but want to sort out some of the details and experiences accumulated over the years.
Why use HTTPS
The development history of HTTPS is an interesting history, full of technological innovation and security challenges. Why use it as a front-end developerHTTPS, could it beHTTPCan't be used anymore? Of course not, essentiallyHTTPSstillHTTP, for our front-end development, in most cases, there is no need to consider whether we want to use it.HTTPS，HTTPSMainly for safety-related content. However, security issues have been around for a long time, and many front-end features and browser security policies rely onHTTPSto ensure user security and privacy. I am quite impressed by the following content:
HTTP2
HTTP2 is based onHTTPSImplemented, so to enable HTTP2, you must use itHTTPS. What is most profound influential to HTTP2 isMultiplexing, It allows multiple requests and responses to be sent concurrently on the same connection, and does not require a new connection to be established for each request like HTTP/, perfectly solving the problem of browser concurrency restrictions (I remember when I was dealing with this problem in the past, I still refer to Baidu. , use multiple domain names to fix resources to increase the number of concurrency). If one day the leader said that our website would upgrade the protocol to HTTP2, the front-end students must be calm because it will hardly involve code modification. The HTTP protocol is for browsers and servers, as long as our service Both the terminal and the browser support HTTP2, so this function is completed.
Service Worker
Service Worker allows web applications to work independently in the background, through which we can perform time-consuming calculations, cache resources, process offline requests, etc. But since it involves background operations and caches user data, the browser requires that it can only beHTTPSRun in an environment, this is to avoid the injection of malicious scripts and ensure the security of user data.
Web Authentication API（WebAuthn）
I have never really used this function. It is a public key-based authentication method. In our mobile application, if you want to provide fast login methods such as fingerprints, facial recognition, etc., you can achieve this API . Since it involves sensitive identity information, WebAuthn needs to beHTTPSRun in an environment to ensure that data during the authentication process is not stolen or tampered with.
Geolocation API
If you need to obtain the user's geographical location through the browser, the browser will ask the request to passHTTPSconduct. This ensures that the user's geographical location information will not be stolen or tampered with by third parties during transmission.
Clipboard
The Clipboard API allows us to read or write clipboard content on web pages, enabling cutting, copying and pasting functions. However, since the clipboard may contain sensitive information from the user, the browser requires that this function can only beHTTPSRun in the environment.
Notifications API
The Notifications API allows web applications to display notifications on users' devices. It is often used to remind users of important events, messages, or updates, especially if the user does not open the app. Similar to traditional desktop application notifications, web applications can also pass information to users through notifications. At present, this is a relatively common function, and this function can only beHTTPSRun in the environment.
In addition to the above functions, there are many other functions that need to beHTTPSRun in an environment, such as: camera, microphone, Bluetooth, etc.
In daily work, I occasionally hear my colleagues talk about some strange problems they encounter, and finally use them.HTTPSSolved. I have also encountered it once myself, using CORS to implement cross-domain communication in our project, which is a solution we are familiar with. However, in the end, I encountered some unexpected situations when it was launched, and a function frequently encountered cross-domain problems during actual use. After some investigation, we found that there is an interface URL in this function:/The ending looks roughly like this:/d/history/. Although the URL doesn't seem particularly noticeable, it responds abnormally when actually calling. There is about 20% chance that the response will be normal, while in the rest, the interface returns a segmentHTMLThe code, the interface return format we agreed should beJSON. An experienced big brother quickly gave the best solution: Switch toHTTPS. Used during actual developmentHTTPSSome problems can indeed be avoided.
Certificate
useHTTPSIt is inevitable to use a security certificate. How to obtain a free certificate? I used to get one directly on Alibaba Cloud, but this time I searched for it for a long time but couldn't find the entrance to this function. Later, I decided to add oneCaddyBe an agent, and use it to feel that the basic agent configuration is moreNginxMuch simpler, and it is used by defaultLet's Encrypt(Let's Encrypt is a free certificate authority) provides certificates to enable for websitesHTTPS。CaddyProvides simple and automated certificate issuance and renewal services. Of course, if your website is a large commercial website, it is recommended to purchase a paid certificate, after all, there are always some restrictions on free things.
Conclusion
As technology continues to evolve, more and more APIs are being introduced into browsers, many of which involve privacy and data security are required.HTTPSRun in the environment. For front-end developers,HTTPSIt is no longer just a protocol, but also a sense of security. It has become the basic knowledge that every developer must master.