Puppeteer – SSL & Mixed Content Check Automation

Puppeteer can automate the process of checking mixed content on your website and service very well. I wrote an easy and simple script for the automation so let me share 😀

Common Problem with a New SSL Site

When you install an SSL certificate on your site, all resources on the pages should be loaded over secure connection. It is because requesting these resources over an insecure connection will weaken the entire website’s security, which is why Chrome browser blocks such mixed contents.

So, if your website shifted from http to https, you should make sure that all embedded content such as images and stylesheets is also fetched by https on the page. I know there are some sites and services that did not plan well for shifting into SSL. So, they might need to check every page instead of changing some environmental variables.

Solution with Puppeteer

Puppeteer is a node package that helps automating browser test with Chromimum. With the help of it, we will make sure all links for embedded resources start with https. Here is my code at github.

const puppeteer = require("puppeteer");

const targetPages = [
  "https://geniuskouta.com" // set the pages you want to examine here
]; 

(async function main() {
  try {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    page.setUserAgent(
      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
    );
    for (let i = 0; i < targetPages.length; i++) {
      let targetPage = targetPages[i];
      await page.goto(targetPage);

      let styleLinks = await page.$$eval('head > link[rel="stylesheet"][href]', (linkTags) => {
        return linkTags.map((linkTag) => linkTag.href);
      });

      let scriptLinks = await page.$$eval("script[src]", (scriptTags) => {
        return scriptTags.map((scriptTag) => scriptTag.src);
      });

      let anchorLinks = await page.$$eval("a[href]", (anchorTags) => {
        return anchorTags.map((anchorTag) => anchorTag.href);
      });
      
      let imgLinks = await page.$$eval("img[src]", (imgTags) => {
        return imgTags.map((imgTag) => imgTag.src);
      });

      console.log(`Checking ${targetPage}`);
      logInvalidLinks(anchorLinks, "ANCHOR LINK");
      logInvalidLinks(imgLinks, "IMG LINK");
      logInvalidLinks(scriptLinks, "SCRIPT LINK");
      logInvalidLinks(styleLinks, "STYLESHEET LINK");

      await browser.close();
    }
  } catch (err) {
    console.log(err);
  }
})();

function logInvalidLinks(links, type) {
  let invalidLinks = [];
  let message = "";
  links.map((link) => {
    let regex = /^https:/;
    let isHTTPS = link.match(regex) ? true : false;
    let isLink = link.length > 0;
    if (!isHTTPS && isLink) {
      invalidLinks.push(link);
    }
  });

  if (invalidLinks.length > 0) {
    message = `Invalid ${type}s:\n`;
    invalidLinks.map(invalidLink => message += `${invalidLink}\n`);
  } else {
    message = `All ${type} are HTTPS.`;
  }
  console.log(message);
}

So, basically the script fetches all link related tags and validate if they start with https. That way, we can filter out non SSL connection and identify which link needs to be modified.

Thanks for reading.

Hope you enjoyed the article. If you have any question or opinion to share, feel free to write some comments.