Javascript 将 wordpress 页面上所有出现的“http”更改为“https”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6053661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 20:03:16  来源:igfitidea点击:

Change all occurrences of "http" to "https" on a wordpress page

javascriptjquerywordpressssl

提问by Johannes Pille

I am in the process of implementing SSL on some of my wordpress-powered site's pages. Currently I'm getting mixed content warnings on the secured pages - my custom theme includes a lot of links and src attributes that occur on all pages. Links appear in the header, footer, the navigation (auto generated by wordpress function) and the sidebar (partially from a plugin). While I could theoretically write a custom header and footer for the secured pages, it'd be impossible to use the plugin and the navigation on the secured page.

我正在我的一些由 wordpress 驱动的网站页面上实施 SSL。目前,我在受保护的页面上收到混合内容警告 - 我的自定义主题包括所有页面上出现的大量链接和 src 属性。链接出现在页眉、页脚、导航(由 wordpress 功能自动生成)和侧边栏(部分来自插件)中。虽然理论上我可以为受保护的页面编写自定义页眉和页脚,但在受保护的页面上使用插件和导航是不可能的。

What I've been trying to accomplish all day is to write a javascript or jQuery function that changes all occurences of "http" to "https" on pages that are served via SSL.

我一整天都在努力完成的是编写一个 javascript 或 jQuery 函数,将通过 SSL 提供的页面上所有出现的“http”更改为“https”。

This problem blatantly showed me the limits of my coding capacity. Problematic is that the finally served document consists of several php files, some of which I have little control over (would have to modify plugin(s) which are (A) rather complex and (B) I'd like to update in the future). Also regular expressions are still a mystery to me.

这个问题公然向我展示了我的编码能力的极限。有问题的是,最终提供的文档由几个 php 文件组成,其中一些我几乎无法控制(必须修改插件,这些插件(A)相当复杂,(B)我想在未来更新)。此外,正则表达式对我来说仍然是个谜。

I don't know if this is at all possible and whether triggering the change with $(document).readyor window.onloadwouldn't be too late anyway, since the browser will issue the mixed content warning earlier than that.

我不知道这是否完全可能,并且无论如何用$(document).readywindow.onload触发更改都不会太晚,因为浏览器会在此之前发出混合内容警告。

Thanks in advance, Johannes

提前致谢,约翰内斯

回答by Matty F

Have you looked at the protocol-agnostic relative url prefix?

您是否查看了与协议无关的相对 url 前缀?

E.g. if you have the following

例如,如果你有以下

<img src="//myimage.png" />

It will use whatever protocol the page is currently on. More info: http://paulirish.com/2010/the-protocol-relative-url/

它将使用页面当前所在的任何协议。更多信息:http: //paulirish.com/2010/the-protocol-relative-url/

回答by Luke Sneeringer

I agree with the other posters who suggest that there are better ways to do what you are after. With that said, it sounds like you're in a bind, so let me offer a crack at it. (BTW, hat tip and a +1 vote to the protocol relative URL; I didn't know about that!)

我同意其他海报,他们建议有更好的方法来做你所追求的事情。话虽如此,听起来您似乎陷入了困境,所以让我来破解一下。(顺便说一句,帽子提示和对协议相对 URL 的 +1 投票;我不知道!)

Anyway, I assume what you are after is in <a>tags, but it should be easy to extrapolate this to others:

无论如何,我假设您所追求的是<a>标签,但应该很容易将其推断给其他人:

if (document.location.protocol === 'https:') {
    $('a').each(function() {
        var href = $(this).attr('href');
        if (href.indexOf('http:') > -1) {
            href = href.replace('http:', 'https:');
            $(this).attr('href', href);
        }
    });
}

With this help offered, I would encourage you to see if there's a safer / more practical way to do what you are trying to do. I will also mention that this approach will likely only work for links; modifying CSS and script references after the page loads will certainly backfire and not get you the result you want.

通过提供这种帮助,我鼓励您看看是否有更安全/更实用的方法来做您想做的事情。我还会提到这种方法可能只适用于链接;在页面加载后修改 CSS 和脚本引用肯定会适得其反,不会得到您想要的结果。

Notice the ":" in "document.location.protocol === 'https:'".

注意“document.location.protocol === 'https:'”中的“:”。

回答by GmonC

I think you should use a plugin like "WordPress HTTPS". There are too many edge cases that you should be aware of (like third party plugins you don't have control) and using a well stablished add-on like this one would be an interesting approach.

我认为您应该使用“WordPress HTTPS”之类插件。您应该注意太多边缘情况(例如您无法控制的第三方插件),并且使用像这样稳定的附加组件将是一种有趣的方法。

WordPress HTTPS is intended to be an all-in-one solution to using SSL on WordPress sites. Free support provided!

WordPress HTTPS 旨在成为在 WordPress 站点上使用 SSL 的多合一解决方案。提供免费支持!

回答by aequalsb

if you only want to make sure there is no mixed content when an HTTPS request is made, try adding simple code snippet to the "function.php" file of the current theme.

如果您只想确保在发出 HTTPS 请求时没有混合内容,请尝试在当前主题的“function.php”文件中添加简单的代码片段。

function _bd_force_https()
{
    if ( empty( $_SERVER['HTTPS'] ) ) return;
    ob_start();
}
add_action( 'template_redirect', '_bd_force_https', 1 );

function _bd_output_https_page()
{
    if ( empty( $_SERVER['HTTPS'] ) ) return;
    echo str_ireplace( 'http://', 'https://', ob_get_clean() );
}
add_action( 'wp_footer', '_bd_output_https_page', 99 );

PROS:

优点:

  • very lean, simple to add
  • does not use javascript/jquery
  • 非常精简,添加简单
  • 不使用 javascript/jquery

CONS:

缺点:

  • not a plugin so it will break when theme is changed
  • cannot intercept HTTP requests made by javascripts from the client side
  • 不是插件,所以当主题改变时它会中断
  • 无法拦截来自客户端的 javascripts 发出的 HTTP 请求

回答by Jacob Relkin

I think that you should be doing this on the server side, via setting a cookie or something like that instead of using JavaScript to handle such a potentially dangerous security hole.

我认为你应该在服务器端这样做,通过设置 cookie 或类似的东西,而不是使用 JavaScript 来处理这样一个潜在危险的安全漏洞。

回答by unc0nnected

Had this exact problem today, wordpress-https didn't work at all for me, caused my whole site to hang in my browser once I tried saving the settings. I found a much much simpler plugin that did the trick beautifully: http://wordpress.org/extend/plugins/ssl-insecure-content-fixer/

今天遇到了这个确切的问题,wordpress-https 对我来说根本不起作用,一旦我尝试保存设置,我的整个网站就会挂在我的浏览器中。我发现了一个更简单的插件,它可以很好地完成这个技巧:http: //wordpress.org/extend/plugins/ssl-insecure-content-fixer/

As a side note, if you are running a reverse proxy like nginx like I am you'll need to follow the advice here: http://blog.netflowdevelopments.com/2013/04/10/fixing-this-page-includes-script-from-unauthenticated-sources-problem-with-ssl-wordpress-install-on-apachenginx-server/

作为旁注,如果你像我一样运行像 nginx 这样的反向代理,你需要遵循这里的建议:http: //blog.netflowdevelopments.com/2013/04/10/fixing-this-page-includes -script-from-unauthenticated-sources-problem-with-ssl-wordpress-install-on-apachenginx-server/

essentially putting this:

基本上把这个:

if (stripos(get_option('siteurl'), 'https://') === 0) { $_SERVER['HTTPS'] = 'on'; }

if (stripos(get_option('siteurl'), 'https://') === 0) { $_SERVER['HTTPS'] = 'on'; }

at the end of your wp-config.php file

在 wp-config.php 文件的末尾

回答by n611x007

After all the other migration steps if you still get mixed-content:

在所有其他迁移步骤之后,如果您仍然获得混合内容:

sudo apt-get install php5-cli
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
pushd /var/www/path/
php /path/to/wp-cli.phar search-replace 'http://example.com' 'https://example.com' --skip-columns=guid --dry-run

if ok,

如果可以,

php /path/to/wp-cli.phar search-replace 'http://example.com' 'https://example.com' --skip-columns=guid

from: https://helgeklein.com/blog/2015/01/switching-wordpress-site-http-https/

来自:https: //helgeklein.com/blog/2015/01/switching-wordpress-site-http-https/

回答by abhisek

It is better to change the legacy URLs in database level, IMHO. To replace all http://occurrences with protocol-agnostic //, run these SQLs:

恕我直言,最好在数据库级别更改旧 URL。要将所有http://出现的内容替换为协议不可知//,请运行以下 SQL:

UPDATE wp_posts 
SET    post_content = ( Replace (post_content, 'src="http://', 'src="//') )
WHERE  Instr(post_content, 'jpeg') > 0 
        OR Instr(post_content, 'jpg') > 0 
        OR Instr(post_content, 'gif') > 0 
        OR Instr(post_content, 'png') > 0;

For single-quoted occurrences:

对于单引号出现:

UPDATE wp_posts 
SET   post_content = ( Replace (post_content, "src='http://", "src='//") )
WHERE  Instr(post_content, 'jpeg') > 0 
        OR Instr(post_content, 'jpg') > 0 
        OR Instr(post_content, 'gif') > 0 
        OR Instr(post_content, 'png') > 0;

For more, check here

有关更多信息,请查看此处