检测 HTTP 或 HTTPS，然后在 JavaScript 中强制使用 HTTPS答案

【问题标题】：Detect HTTP or HTTPS then force HTTPS in JavaScript检测 HTTP 或 HTTPS，然后在 JavaScript 中强制使用 HTTPS
【发布时间】：2011-06-11 00:39:54
【问题描述】：

有什么方法可以检测 HTTP 或 HTTPS，然后强制使用 HTTPS 和 JavaScript？

我有一些检测 HTTP 或 HTTPS 的代码，但我不能强制它使用 https:。

我正在使用 window.location.protocol 属性将站点设置为 https:，然后刷新页面以希望重新加载加载到浏览器中的新 https'ed URL。

if (window.location.protocol != "https:") {
   window.location.protocol = "https:";
   window.location.reload();
}

【问题讨论】：

这是更可靠（和高效）处理的服务器端。
我认为你是对的。作为使用 MITM 攻击的攻击者，我可以删除这段代码。所以它只提供针对被动攻击的保护。
检测部分与2008年的How can I use JavaScript on the client side to detect if the page was encrypted?重复。
@NeoDevlin http 上的 MITM 攻击者也可以替换服务器端重定向
没错。 2018年，没有理由不使用HSTS。这是强制使用 HTTPS 的唯一安全方法。

标签： javascript https window.location

【解决方案1】：

我喜欢这个问题的答案。但为了有创意，我想再分享一种方式：

<script>if (document.URL.substring(0,5) == "http:") window.location.replace('https:' + document.URL.substring(5));</script>

【讨论】：

【解决方案2】：

以下代码假定变量“str”包含您的 http://.... 字符串。它检查它是否是 https，如果 true 什么都不做。但是，如果是 http，它会将 http 替换为 https。

if (str.indexOf('https') === -1) {
  str = str.replace('http', 'https')
}

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。
这个答案与这个问题有关。 stackoverflow.com/questions/11300906/…

【解决方案3】：

你应该检查这个： https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests

将这个 meta 标签添加到你的 index.html head

中

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

希望对您有所帮助。

【讨论】：

当您无法控制页面上的阳光代码（例如来自数据库的 html）时，更优雅的解决方案。我们的 gravatar 连接不安全，这解决了所有问题。

【解决方案4】：

试试这个

if (location.protocol !== 'https:') {
    location.replace(`https:${location.href.substring(location.protocol.length)}`);
}

location.href = blah 将此重定向添加到浏览器历史记录中。如果用户点击后退按钮，他们将被重定向回同一页面。最好使用location.replace，因为它不会将此重定向添加到浏览器历史记录中。

【讨论】：

为什么是window 而不是document？
@webjay 见stackoverflow.com/a/2431375/228534 和stackoverflow.com/a/12098898/228534
字符串比较应该是!==吗？
@WesTurner 无论哪种方式都不重要。他们都将永远是字符串。如果一个是数字或布尔值，那么它可能会有所不同。
location.replace(url) 在这种情况下会比location.href = url 好得多。您不希望浏览器历史记录中的这种重定向或用户点击后退按钮只是为了再次重定向。

【解决方案5】：

你可以这样做：

  <script type="text/javascript">        
        if (window.location.protocol != "https:") {
           window.location.protocol = "https";
        }
    </script>

【讨论】：

它有效。这是重定向的标准方式吗？它适用于所有浏览器吗？

【解决方案6】：

功能方式

window.location.protocol === 'http:' && (location.href = location.href.replace(/^http:/, 'https:'));

【讨论】：

【解决方案7】：

您好，我使用此解决方案效果很好。无需检查，只需使用 https。

<script language="javascript" type="text/javascript">
document.location="https:" + window.location.href.substring(window.location.protocol.length, window.location.href.length);
</script>

【讨论】：

即使协议是 https 也不会刷新页面吗？

【解决方案8】：

Setting location.protocol navigates to a new URL。无需解析/切片任何东西。

if (location.protocol !== "https:") {
  location.protocol = "https:";
}

Firefox 49 有一个bug，其中https 有效，但https: 无效。据说是fixed in Firefox 54。

【讨论】：

if window.location.href.match('http:') window.location.href = window.location.href.replace('http', 'https') 适用于最新的 FF 和 Chrome。
location.protocol = "https"; 似乎在 Firefox 28 中有效
废话打破了后退按钮。请改用location.replace。

【解决方案9】：

我刚刚测试了Pui Cdm 测试的所有脚本变体，包括上面的答案和许多其他使用 php、htaccess、服务器配置和 Javascript 的答案，结果是脚本

<script type="text/javascript">        
function showProtocall() {
        if (window.location.protocol != "https") {
            window.location = "https://" + window.location.href.substring(window.location.protocol.length, window.location.href.length);
            window.location.reload();
        }
    }
    showProtocall();
</script>

由vivek-srivastava提供效果最好，您可以在 java 脚本中添加进一步的安全性。

【讨论】：

【解决方案10】：

不是 Javascript 方法来回答这个问题，但如果您使用 CloudFlare，您可以编写 page rules 将用户更快地重定向到 HTTPS 并且它是免费的。在 CloudFlare 的页面规则中看起来像这样：

【讨论】：

我实际上发现这非常有用，不是为了回答框架中的问题，而是为不提供始终在线 SSL 的 SaaS 服务提供一种可能更可靠的方法的有用信息。

【解决方案11】：

if (location.protocol == 'http:')
  location.href = location.href.replace(/^http:/, 'https:')

【讨论】：

【解决方案12】：

这个怎么样？

if (window.location.protocol !== 'https:') {
    window.location = 'https://' + window.location.hostname + window.location.pathname + window.location.hash;
}

不过，理想情况下，您应该在服务器端进行。

【讨论】：

缺少端口
还有搜索/查询字符串

【解决方案13】：

这不是一个好主意，因为您只是临时将用户重定向到 https，而浏览器不会保存此重定向。

您为网络服务器（apache、nginx 等）http 301, http 302 描述任务

【讨论】：

同意。在服务器上强制使用 https 更可靠
如果保留哈希值很重要，我可以看到它正在被使用。它不会发送到服务器，并且某些浏览器不会保留它。
这里是为 https 设置 Azure 网站的链接...blogs.msdn.com/b/benjaminperkins/archive/2014/01/07/…
不一定正确。有一种观点认为 301 是出于缓存原因的魔鬼。 getluky.net/2010/12/14/301-redirects-cannot-be-undon
虽然做这个客户端确实不是一个好主意，但这不是被要求的。而且您没有展示如何做到这一点，因此这不是答案。此外，在这些静态网页的日子里，通常没有办法在服务器端做这个（想想 Github 页面），这意味着你必须在客户端上做这个。不过，您可以通过添加规范链接标签来帮助改进搜索，以避免人们点击非 SSL 版本。