使用Node.js版Penthouse Critical CSS生成器时如何解决SSL握手失败错误？

你遇到的SSL握手失败问题，大概率是Puppeteer的SSL相关参数没配全，或者gulp-penthouse没有正确应用你的浏览器配置。试试下面几个方案：

1. 补充Puppeteer的SSL忽略参数 #

默认的ignoreHTTPSErrors有时候不足以覆盖所有场景，在Puppeteer启动的args里添加更多忽略SSL错误的参数：

const browserPromise = puppeteer.launch({
    ignoreHTTPSErrors: true,
    args: [
        '--disable-setuid-sandbox', 
        '--no-sandbox',
        '--ignore-certificate-errors', // 忽略证书错误
        '--ignore-ssl-errors', // 忽略SSL错误
        '--allow-running-insecure-content' // 允许加载不安全内容
    ],
})

2. 让gulp-penthouse直接读取Puppeteer启动配置 #

有些情况下单独声明browserPromise可能出现复用问题，试试把Puppeteer配置直接写入criticalCss的参数中：

gulp.task('critical-css', function () {
    return gulp.src('./minified/lintedmain.min.css')
        .pipe(criticalCss({
            out: 'critical.css',
            url: 'http://www.example.com/',
            width: 1400,
            height: 900,
            userAgent: 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)',
            puppeteer: {
                launchOptions: {
                    ignoreHTTPSErrors: true,
                    args: ['--disable-setuid-sandbox', '--no-sandbox', '--ignore-certificate-errors', '--ignore-ssl-errors']
                },
                pageGotoOptions: {waitUntil: 'networkidle0'}
            }
        }))
        .pipe(gulp.dest('./critical/'));
});

3. 排查环境层面的SSL拦截 #

如果本地用了代理工具（如Charles、Fiddler）或者公司网关做了SSL证书拦截，也会触发握手失败：

• 可以先暂时关闭代理工具测试；
• 若必须用代理，在Puppeteer的args里添加代理配置和对应证书的SPKI指纹：

  args: [
      '--proxy-server=127.0.0.1:8888', // 你的代理地址
      '--ignore-certificate-errors-spki-list=你的代理证书SPKI指纹'
  ]
  

  SPKI指纹可以通过以下命令生成：

  openssl x509 -in 你的证书文件.crt -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | base64
  

4. 更新依赖版本 #

penthouse和puppeteer版本不兼容也可能引发这类问题，尝试更新到最新版：

npm update gulp-penthouse puppeteer

优先尝试方案1和2，这两个能解决大部分同类SSL握手问题。

内容的提问来源于stack exchange，提问作者MeltingDog