Html 如何在 https 站点上的 iframe 中允许 http 内容

How to allow http content within an iframe on a https site

提问by georgephillips

I load some HTML into an iframe but when a file referenced is using http, not https, I get the following error:

我将一些 HTML 加载到 iframe 中，但是当引用的文件使用 http 而不是 https 时，出现以下错误：

[blocked] The page at {current_pagename} ran insecure content from {referenced_filename}

[已阻止] {current_pagename} 的页面运行了来自 {referenced_filename} 的不安全内容

Is there any way to turn this off or any way to get around it?

有什么办法可以关闭它或绕过它吗？

The iframe has no srcattribute and the contents are set using:

iframe 没有src属性，内容设置使用：

frame.open();
frame.write(html);
frame.close();

采纳答案by panpernicek

Based on generality of this question, I think, that you'll need to setup your own HTTPS proxy on some server online. Do the following steps:

基于这个问题的普遍性，我认为您需要在某些在线服务器上设置自己的 HTTPS 代理。执行以下步骤：

• Prepare your proxy server - install IIS, Apache
• Get valid SSL certificate to avoid security errors (free from startssl.com for example)
• Write a wrapper, which will download insecure content (how to below)
• From your site/app get https://yourproxy.com/?page=http://insecurepage.com

• 准备您的代理服务器 - 安装 IIS、Apache
• 获取有效的 SSL 证书以避免安全错误（例如从 startssl.com 免费获取）
• 编写一个包装器，它将下载不安全的内容（如何在下面）
• 从您的网站/应用程序获取https://yourproxy.com/?page=http://insecurepage.com

If you simply download remote site content via file_get_contents or similiar, you can still have insecure links to content. You'll have to find them with regex and also replace. Images are hard to solve, but ? found workaround here: http://foundationphp.com/tutorials/image_proxy.php

如果您只是通过 file_get_contents 或类似方式下载远程站点内容，您仍然可以拥有指向内容的不安全链接。您必须使用正则表达式找到它们并替换它们。图像很难解决，但是？在这里找到解决方法：http: //foundationphp.com/tutorials/image_proxy.php

回答by Matthew Peters

Note:While this solution may have worked in some browsers when it was written in 2014, it no longer works. Navigating or redirecting to an HTTP URL in an iframeembedded in an HTTPS page is not permitted by modern browsers, even if the frame started out with an HTTPS URL.

注意：虽然这个解决方案在 2014 年编写时可能在某些浏览器中有效，但它不再有效。iframe现代浏览器不允许导航或重定向到嵌入在 HTTPS 页面中的 HTTP URL ，即使框架以 HTTPS URL 开头。

The best solution I created is to simply use google as the ssl proxy...

我创建的最佳解决方案是简单地使用 google 作为 ssl 代理...

https://www.google.com/search?q=%http://yourhttpsite.com&btnI=Im+Feeling+Lucky

Tested and works in firefox.

在 Firefox 中测试和工作。

Other Methods:

其他方法：

• Use a Third party such as embed.ly (but it it really only good for well known http APIs).

• Create your own redirect script on an https page you control (a simple javascript redirect on a relative linked page should do the trick. Something like: (you can use any langauge/method)

  https://example.comThat has a iframe linking to...

  https://example.com/utilities/redirect.htmlWhich has a simple js redirect script like...

  document.location.href ="http://thenonsslsite.com";

• Alternatively, you could add an RSS feed or write some reader/parser to read the http site and display it within your https site.

• You could/should also recommend to the http site owner that they create an ssl connection. If for no other reason than it increases seo.

• 使用第三方，例如 embed.ly（但它确实只适用于众所周知的 http API）。

• 在您控制的 https 页面上创建您自己的重定向脚本（相对链接页面上的简单 javascript 重定向应该可以解决问题。例如：（您可以使用任何语言/方法）

  https://example.com那有一个 iframe 链接到...

  https://example.com/utilities/redirect.html它有一个简单的 js 重定向脚本，如...

  document.location.href ="http://thenonsslsite.com";

• 或者，您可以添加 RSS 提要或编写一些阅读器/解析器来读取 http 站点并将其显示在您的 https 站点中。

• 您还可以/应该向 http 站点所有者推荐他们创建 ssl 连接。如果没有其他原因，它会增加 seo。

Unless you can get the http site owner to create an ssl certificate, the most secure and permanent solution would be to create an RSS feed grabing the content you need (presumably you are not actually 'doing' anything on the http site -that is to say not logging in to any system).

除非您可以让 http 站点所有者创建 ssl 证书，否则最安全和永久的解决方案是创建一个 RSS 提要来获取您需要的内容（大概您实际上并没有在 http 站点上“做”任何事情——也就是说说不登录任何系统）。

The real issue is that having http elements inside a https site represents a security issue. There are no completely kosher ways around this security risk so the above are just current work arounds.

真正的问题是在 https 站点中包含 http 元素代表了一个安全问题。没有完全符合 kosher 的方法来解决这个安全风险，所以以上只是当前的解决方法。

Note, that you can disable this security measure in most browsers (yourself, not for others). Also note that these 'hacks' may become obsolete over time.

请注意，您可以在大多数浏览器中禁用此安全措施（您自己，而不是其他人）。另请注意，这些“黑客”可能会随着时间的推移而过时。

回答by David R.

I know this is an old post, but another solution would be to use cURL, for example:

我知道这是一篇旧帖子，但另一种解决方案是使用 cURL，例如：

redirect.php:

重定向.php：

<?php
if (isset($_GET['url'])) {
    $url = $_GET['url'];
    $ch = curl_init();
    $timeout = 5;
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    $data = curl_exec($ch);
    curl_close($ch);
    echo $data;
}

then in your iframe tag, something like:

然后在您的 iframe 标签中，例如：

<iframe src="/redirect.php?url=http://www.example.com/"></iframe>

This is just a MINIMAL example to illustrate the idea -- it doesn't sanitize the URL, nor would it prevent someone else using the redirect.php for their own purposes. Consider these things in the context of your own site.

这只是一个用于说明这个想法的最小示例——它不会清理 URL，也不会阻止其他人将 redirect.php 用于他们自己的目的。在您自己的站点的上下文中考虑这些事情。

The upside, though, is it's more flexible. For example, you could add some validation of the curl'd $data to make sure it's really what you want before displaying it -- for example, test to make sure it's not a 404, and have alternate content of your own ready if it is.

不过，好处是它更灵活。例如，您可以对 curl 的 $data 添加一些验证，以确保它在显示之前确实是您想要的——例如，测试以确保它不是 404，并且如果它准备好您自己的替代内容是。

Plus -- I'm a little weary of relying on Javascript redirects for anything important.

另外——我有点厌倦依赖 Javascript 重定向来处理任何重要的事情。

Cheers!

干杯!

回答by user2523022

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

加入<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">头部

reference: http://thehackernews.com/2015/04/disable-mixed-content-warning.html

browser compatibility: http://caniuse.com/#feat=upgradeinsecurerequests

参考：http: //thehackernews.com/2015/04/disable-mixed-content-warning.html

浏览器兼容性：http: //caniuse.com/#feat=upgradeinsecurerequests

回答by Addeladde

You will always get warnings of blocked content in most browsers when trying to display non secure content on an https page. This is tricky if you want to embed stuff from other sites that aren't behind ssl. You can turn off the warnings or remove the blocking in your own browser but for other visitors it's a problem.

尝试在 https 页面上显示非安全内容时，您总是会在大多数浏览器中收到被阻止内容的警告。如果您想嵌入来自不支持 ssl 的其他站点的内容，这很棘手。您可以在自己的浏览器中关闭警告或删除阻止，但对于其他访问者来说这是一个问题。

One way to do it is to load the content server side and save the images and other things to your server and display them from https.

一种方法是加载内容服务器端并将图像和其他内容保存到您的服务器并从 https 显示它们。

You can also try using a service like embed.ly and get the content through them. They have support for getting the content behind https.

您也可以尝试使用 embed.ly 之类的服务并通过它们获取内容。他们支持获取 https 背后的内容。

回答by David Guan

Using Google as the SSL proxy is not working currently,

使用 Google 作为 SSL 代理目前无法正常工作，

Why?

为什么？

If you opened any page from google, you will find there is a x-frame-optionsfield in the header.

如果您从谷歌打开任何页面，您会发现x-frame-options标题中有一个字段。

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe>or <object>. Sites can use this to avoid clickHymaning attacks, by ensuring that their content is not embedded into other sites.

X-Frame-Options HTTP 响应标头可用于指示是否应允许浏览器以<frame>、<iframe>或格式呈现页面<object>。网站可以使用它来避免点击劫持攻击，确保他们的内容没有嵌入到其他网站中。

(Quote from MDN)

（引用自 MDN）

One of the solution

解决方案之一

Below is my work around for this problem:

以下是我解决此问题的方法：

Upload the content to AWS S3, and it will create a https link for the resource.
Notice: set the permission to the html file for allowing everyone view it.

将内容上传到 AWS S3，它将为资源创建一个 https 链接。
注意：设置html文件的权限，允许所有人查看。

After that, we can using it as the srcof iframe in the https websites.

之后，我们可以将其用作srchttps 网站中的 iframe。

回答by Grant

You could try scraping whatever you need with PHP or another server side language, then put the iframe to the scraped content. Here's an example with PHP:

您可以尝试使用 PHP 或其他服务器端语言抓取您需要的任何内容，然后将 iframe 放入抓取的内容中。这是一个 PHP 示例：

scrapedcontent.php:

刮内容.php：

<?php
$homepage = file_get_contents('http://www.example.com/');
echo $homepage;
?>

index.html:

索引.html：

<iframe src="scrapedcontent.php"></iframe>

回答by tanius

Use your own HTTPS-to-HTTP reverse proxy.

使用您自己的 HTTPS 到 HTTP 反向代理。

If your use case is about a few, rarely changing URLs to embed into the iframe, you can simply set up a reverse proxy for this on your own server and configure it so that one httpsURL on your server maps to one httpURL on the proxied server. Since a reverse proxy is fully serverside, the browser cannot discover that it is "only" talking to a proxy of the real website, and thus will not complain as the connection to the proxy uses SSL properly.

如果您的用例是关于几个很少更改的 URL 嵌入到 中iframe，您可以简单地在您自己的服务器上为此设置一个反向代理并配置它，以便https您服务器上的一个httpURL映射到代理服务器上的一个URL。由于反向代理完全是服务器端，浏览器无法发现它“仅”与真实网站的代理通信，因此不会抱怨，因为与代理的连接正确使用了 SSL。

If for example you use Apache2 as your webserver, then see these instructionsto create a reverse proxy.

例如，如果您使用 Apache2 作为您的网络服务器，请参阅这些说明以创建反向代理。

回答by Star TechTricks

All you need to do is just use Google as a Proxy server.

https://www.google.ie/gwt/x?u=[YourHttpLink].

您需要做的就是将 Google 用作代理服务器。

https://www.google.ie/gwt/x?u=[YourHttpLink]。

<iframe src="https://www.google.ie/gwt/x?u=[Your http link]"></frame>

It worked for me.

它对我有用。

Credits:- https://www.wikihow.com/Use-Google-As-a-Proxy

积分：- https://www.wikihow.com/Use-Google-As-a-Proxy