webhint can now analyze password protected sites

Analyzing password-protected sites with webhint

Two of the most requested features the team has received are to run webhint in browsers other than Chrome and the ability to analyze password-protected websites. Up until recently that was not possible, but things have changed!

The newest versions of webhint come with the new connector-puppeteer that allows webhint to talk to any browser that implements the subset of the debugging protocol used by puppeteer. Right now, that is any modern Chromium-based browser, but Firefox will support it in the near future as well 👏.

This new package comes with some nice features. For example, it will automatically search for a valid Chromium-based executable. If you have multiple installed, the priority is Chrome > Chromium > Edge.

If you want to specify one, you have two options:

1. Use the browser option and one of the shortcuts:

{
  "connector": {
    "name": "puppeteer",
    "options": {
      "browser": "Chrome|Chromium|Edge"
    }
  },
  ...
}

1. Specify the executable path directly via puppeteer-options:

{
  "connector": {
    "name": "puppeteer",
    "options": {
      "puppeteer-options": {
        "executablePath": "path/to/browser"
      }
    }
  },
  ...
}

The connector supports more configurations (check all of them on this page), but probably the most exciting one is the possibility to analyze password-protected sites 🕵🏽‍♀️.

You can now analyze password-protected sites with webhint

This has been one of the most requested features, and while there were some hacks to make it work sometimes, the experience was far from ideal.

It has taken us more time than expected, but support for this feature has finally landed and we couldn’t be more excited! 🎉

To test it, you will need to provide the user, password, input selectors, and submit input selector in your .hintrc file:

{
    "connector": {
        "name": "puppeteer",
        "options": {
            "auth": {
                "user": {
                    "selector": "string",
                    "value": "string"
                },
                "password": {
                    "selector": "string",
                    "value": "string"
                },
                "submit": {
                    "selector": "string"
                }
            }
        }
    },
    ...
}

webhint will:

1. Navigate to your target URL (https://example.com)/secured) that should redirect to a login page (https://example.com/login),
2. Use the information provided in the auth property to fill the form and submit it, and
3. Analyze the page that appears after the navigation of submitting the form (https://example.com/secured).

GitHub’s login form

If your website uses Basic HTTP Auth, that is supported, too! The fields user and password should be a string only:

{
    "connector": {
        "name": "puppeteer",
        "options": {
            "auth": {
                "user": "string",
                "password": "string"
            }
        }
    },
    ...
}

How do I integrate auth in CI without writing the credentials?

As we all know, storing your credentials in plain text files is not a good idea. To solve this issue, you can use environment variables. Starting with webhint v5.1.0 you can pass specific configurations via environment variables. For example:

webhint_connector_options_auth_user_value=johndoe

webhint_connector_options_auth_password_value=P@ssw0rd!

gets transformed into:

{
    "connector": {
        "options": {
            "auth": {
                "user": {                    
                    "value": "string"
                },
                "password": {                  
                    "value": "string"
                }
            }
        }
    }
}

It is then merged with the contents of your .hintrc file. (For this particular case, your .hintrc file should have the selectors.)

Properties defined in your .hintrc file have higher priority than those in your environment variables in case of duplicates.

Azure Pipelines has the concept of secrets, Travis CI has encrypted environment variables, and other CI systems have similar features, so make sure to use them to not leak any information!

How can I run a quick test?

The fastest way would be to create a .hintrc file similar to the ones above and run webhint via npx:

npx hint https://mysecuresite.com/secure/page

You should see your browser open, authenticate, and navigate to the final URL.

We want your feedback!

Please let us know what you think of this new feature and in what ways we can improve. You can share your thoughts in this post, GitHub, Twitter or Gitter.

Thank you! 🙏

---