在 Woocommerce 结帐表单中键入会导致浏览器报告 SSL 问题答案

【问题标题】：Typing in Woocommerce checkout form causes browser to report SSL issues在 Woocommerce 结帐表单中键入会导致浏览器报告 SSL 问题
【发布时间】：2015-03-04 01:21:38
【问题描述】：

我正在开发一个 woocommerce 网站。在我开始在结帐中输入几个字段之前，ssl 似乎工作正常。此时，铬锁图标由于某种原因变为黄色。这可能是什么原因造成的？页面上的所有内容都是安全的......图像/字体等。

编辑： 在我要求检查 chrome 资源面板并确定我找到了罪魁祸首之后，我立刻想到了，但我仍然不知道如何解决这个问题点。

http://goods.ie/wp-content/plugins/woocommerce/assets/images/icons/valid.png

【问题讨论】：

如果资产没有被缩小，这将更容易调试。显然有某种keyup JavaScript 函数触发来验证输入。它尝试加载的资产不是默认的 WooCommerce 资产......所以验证必须是自定义的。同样，使用缩小的 JS 很难调试。

标签： wordpress security google-chrome ssl woocommerce

【解决方案1】：

woocommerce.css 文件中的这些行：

background-image:url(../../plugins/woocommerce/assets/images/icons/valid.png);

background-image:url(../../plugins/woocommerce/assets/images/icons/invalid.png);

给你问题是因为它们似乎被处理为：

http://goods.ie/wp-content/plugins/woocommerce/assets/images/icons/valid.png

http://goods.ie/wp-content/plugins/woocommerce/assets/images/icons/invalid.png

即使样式表是使用https 协议调用的：

<link rel='stylesheet' 
      id='woocommerce_responsive_frontend_styles-css'       
      href='https://goods.ie/wp-content/themes/goods/woocommerce.css?ver=4.1.1' 
      type='text/css' 
      media='all' />

原因似乎是这些图像文件当前不存在，我们得到一个 302 重定向到 http 版本并返回 404 响应。

所以只要确保这些文件存在。使用正确的路径并注意 WooCommerce 不附带这些文件。

还可以考虑升级到最新的 WooCommerce 版本。

【讨论】：

我认为这个是解决这个问题的完美答案。我花了最后 20 分钟寻找解决方案，当我返回此页面后，我发现这已经写好了：P 我的错，我应该先开始阅读解决方案。 :P