00:00 Hi there. Today's video will teach you how you can quickly find out the potential security issues on a website using Chrome dev tools. Chrome dev tools security panel helps you figure out the basic security problems with any webpage. In this video, we will look at what a healthy and secured website looks like with HTTPS support. Then we look at another website with an insecure main origin. This is when websites are hosted on HTTP domains and finally an example site that has a mixed content where the main origin of the webpage is secure but it request resources from the domains that are non-secure. Let's head onto Google Chrome and open Chrome dev tools. If you're on a Mac machine press control+option+i. We will open security panel so that we can inspect the security of this webpage. Let's open airbnb.com and click refresh. You can see that Chrome indicates that this page is secured with HTTPS and by the way, it's extremely important to serve your content using HTTPS even though your sites don't handle the sensitive data.

01:11 Here is the main origin, which is airbnb.com which is served using an SSL certificate. You can also view the certificate details here and this webpage makes calls to other domains that are also secured with HTTPS as you can see here. That's the reason it says all the resources are served securely. Let's click on another URL if you need access to it, the link is in the description. This is an example of non-secure website where the main origin of the website itself is non-secure. Chrome has already marked it not secure right here and if you notice the URL it is served over HTTP instead of HTTPS. When we look at the page source, the image is served from a secure domain but doesn't matter. The website itself has a non-secure origin, but there is one more type of content which is mixed content. Let's use another URL.

02:10 You can find the link in the description. This website has a secure main origin. You can see that Chrome indicates that your connection to webpage is secure and any sensitive data that you end up sending to this webpage is private. However, this webpage is requesting a resource from a non-secure domain. Click on this non-secure HTTP URL and you can view the request in your network panel. You can see demo.js, which is JavaScript. It's loaded from a request URL that is not served using HTTPS. You can also view the source and verify that it is in fact the case. Now, the problem with these kinds of pages containing mixed content is they're only partially protected. Since the content served over HTTP can be accessed by a third party, it can become a candidate for man in the middle attacks. So Chrome dev tools security panel can help you quickly identify if the webpage you are using is secure, non-secure or has a mixed content. Thanks for watching this video. If you would like to take your JavaScript knowledge to the next level and want to know and understand how browsers execute JavaScript and the role of event loop, check out our new course, which is live. I've added the link in the description below and friends, keep learning and share your knowledge. I'll see you in the next video.