Since the importance of cybersecurity is on the rise, developers must implement web application security testing to make sure that users’ data does not end up in the hands of unwanted third-parties. To keep transmitted information safe, Chrome Developer Tools include the Security panel.
One of the essential functions of the Security panel is to inform users about website security. After opening this panel, you can immediately see whether a website is using HTTPS for secure communication. You can also check the issued SSL certificate and make sure that it is valid.
Furthermore, you can find out about page security by analyzing whether resources on a specific page are shown to you securely.
Don’t assume that understanding all of this information is complicated: even regular Internet visitors (with no experience in cybersecurity) can perform a simple web application security testing.
The colors in the Security tab are also used to indicate the level of website security. Green is used when the connections are secure, red indicates security problems, and yellow means mixed content.
We realize that mixed content can be confusing, but the Security panel will show you requests of the Network panel that are not handled securely. It means that you can solve page security issues by reviewing all of the resources from non-secure origins.
By implementing web security testing with DevTools, you can diagnose security issues on your website and find ways to fix these problems. Don’t wait around: fix security issues now!
Contents
Chrome DevTools Security: Main Tips
- In this tutorial, we are going to take a look at the Security panel of the Chrome Developer Tools.
- This panel is used to see whether the page you are currently on is secure or not and to inspect the origins.
Security Panel Explained
The Security panel is simple and pretty straightforward, providing insight into some of the essential data about whether the web page you're visiting is secure. The panel allows you to implement web application security testing to protect users from having their data stolen or leaked.
After opening the Security panel of DevTools, you will see something like this:
In this case, the Security panel indicates that the page is secure.
This conclusion is based on a few things:
- Certificate: the certificate of the server, whether it is trusted and valid (has not expired).
- Connection: the connection, whether it is authenticated and encrypted properly.
- Resources: the resources, whether they are loaded using valid HTTPS.
The most important aspect is whether the page is served over valid HTTPS or not. The web application security testing in DevTools will reveal whether the resources on a page are not loaded via HTTP.
Remember that even if the connection is secure, resources of a page might be loaded from suspicious origins. Such problems are indicated as mixed-content, and they do pose a threat to data security.
If any of the mentioned security rules are not met, the page is not secure. It means that a website is vulnerable to various attacks that could put its data in danger of being accessed. Therefore, start the web application security testing before your users' information is stolen by hackers and sold on the dark web.
Learn About Request Origin
Another thing in the Security panel is the option to inspect origins of requests. They are shown in the vertical menu on the side.
In this screenshot, you can see expanded details of the origins of the page.
The origins that are displayed may be categorized as:
- Main: this is normally the URL of the website you are inspecting.
- Secure: origins that are served using valid HTTPS.
- Non-secure: origins that are not served using valid HTTPS or otherwise vulnerable.
- Unknown/cancelled: origins that have not yet been specified as secure or not, may appear while loading.
Additionally, you can view the requests from a specific origin by clicking View requests in Network Panel.
Chrome DevTools Security: Summary
- Our tutorial explained the main features of the Security panel of DevTools.
- In this Chrome tab, you can check whether a website is using HTTPS communication, whether a page loads resources from secure origins and whether the connection is encrypted.