wp-cypress icon indicating copy to clipboard operation
wp-cypress copied to clipboard

Add SSL/HTTPS to WP-Cypress

Open PaulREnglish opened this issue 2 years ago • 2 comments

Adds the option to use SSL certificates when using WP-Cypress

Description

Partially fixes https://github.com/bigbite/wp-cypress/issues/88 - allows the user to add their own SSL certificates using the sslCertificate property in cypress.json. If the user does provide a certificate, WP-Cypress will use the port number provided by the sslPort property instead of the port property in cypress.json. If an sslPort is not provided, the port number will default to 4433 as explained in https://github.com/bigbite/wp-cypress/issues/88.

Change Log

  • Adds support for sslCertificate and sslPort properties in cypress.json
  • If sslCertificate is provided, WP-Cypress will use the sslPort port number defaulting to 4433.

Types of changes (if applicable):

  • [ ] Bug fix (non-breaking change which fixes an issue).
  • [x] New feature (non-breaking change which adds functionality).
  • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected).

Checklist (if applicable):

  • [x] Meets provided linting standards.

Stuff to add to the wiki

Configuration Schema

After 'url' and before 'ports' this should be add to the configuration schema:

Property Required Default
sslCertificate Optional. null
sslPort Optional 4433

sslCertificate

sslCertificate

  • Type: object
Property Required
cert Required
key Required

cert

  • Type: string
  • Example: path/to/ssl-certificate

key

  • Type: string
  • Example: path/to/ssl-key

sslPort

  • Type: number
  • Example: 3773

Guide

Here are the steps to get https working with WP-Cypress:

  1. Install mkcert by following the instructions at: https://github.com/FiloSottile/mkcert
  2. Run mkcert localhost in the directory you want your certificate and key to be located (you must call the certificate localhost since it needs to be valid for that domain name)
  3. Add the following to your cypress.json file:
    "sslCertificate": {
      "cert": "relative-path/to/certificate",
      "key": "relative-path/to/key"
    }

Note that the Cypress browser itself will not trust SSL certificates due to the proxy it uses. If you want to test that it works, copy the URL and use a different browser. The new browser should show that the connection is secure.

PaulREnglish avatar Jul 20 '22 09:07 PaulREnglish

I think I have this working based on your steps, I have to tell the Cypress browser to trust the cert before I was able to run any tests without interruption. Of course this is not idea for automated situations but gets us one step further.

One query and possible suggestion I do have is around defining the cert/key in the config. As cypress has support for defining these items in cypress.json/cypress.config.json using the clientCertificates property, would it not make more sense to leverage what is set there rather than have an additional config for WP-Cypress certificates? This would allow us to stay as consistent as possible with Cypress and end users who will be configuring their own setups.

Curious to hear your thoughts on that.

Thanks. Using the default clientCertificates would probably make more sense since then end users wouldn't have to define two different properties that do the same thing. I'll look into how to get this working.

PaulREnglish avatar Jul 26 '22 08:07 PaulREnglish

@ampersarnie I've been thinking. If I use clientCertificates, won't that cause backwards incompatibility issues due to the port number being different in the URL? I could create a separate property in wpContent just for enabling/disabling SSL but I'm not sure if that's a good solution. Thoughts?

PaulREnglish avatar Aug 03 '22 09:08 PaulREnglish