数据 URI 方案和 Internet Explorer 9 错误

发布于 2024-12-04 12:25:14 字数 897 浏览 1 评论 0原文

我在 IE 版本 6-9 中使用 RFC 2397 数据 url 方案时遇到问题。我的下面的示例代码在使用当前版本的 Safari、FF、Opera 和 Chrome 时可以正常工作。

data:text/html;base64,PG1ldGEgaHR0cC1lcXVpdj0icmVmcmVzaCIgY29udGVudD0iMDt1cmw9aHR0cDovL2dvb2dsZS5jb20vIj4g

或者

data:text/html,%3Cmeta%20http-equiv%3D%22refresh%22%20content%3D%220%3Burl%3Dhttp%3A//google.com/%22%3E%20

如果将上述代码粘贴到几乎所有不包括 IE 的浏览器中，它将导航到 google.com，当尝试使用 IE 时，它会失败并出现以下错误。

网页无法显示
最可能的原因：
此网页上的某些内容或文件需要您尚未安装的程序。
您可以尝试什么：
在线搜索可用于查看此网页内容的程序。
重新输入地址。

检查生成的 IE 错误页面的页面源时，有一个引用文件关联和协议的链接。

协议类型：
描述：未知
Windows 无法识别此协议。

我意识到使用 data: 协议可能不是最直接的，或者在大多数情况下不是最好的选择，但我必须将它用于这个特定的项目。

我已经到处寻找解决方案，并使用 IE 尝试了很多示例，希望这是我的语法，但尚未找到解决方案。

原文

I'm having a problem using the RFC 2397 data url scheme with IE versions 6-9. My sample code below works without problem when using current versions of Safari, FF, Opera and Chrome.

data:text/html;base64,PG1ldGEgaHR0cC1lcXVpdj0icmVmcmVzaCIgY29udGVudD0iMDt1cmw9aHR0cDovL2dvb2dsZS5jb20vIj4g

data:text/html,%3Cmeta%20http-equiv%3D%22refresh%22%20content%3D%220%3Burl%3Dhttp%3A//google.com/%22%3E%20

If the above code is pasted in almost any browser excluding IE it will navigate to google.com, when attempting with IE it fails with the following error.

The webpage cannot be displayed
Most likely cause:
Some content or files on this webpage require a program that you don't have installed.
What you can try:
Search online for a program you can use to view this web content.
Retype the address.

When inspecting the page source of the IE error page generated there is a link that makes reference to File Associations and protocols.

Protocol Type:
Description: UnKnown
Windows does not recognize this Protocol.

I realize that using the data: protocol is probably not the most straight forward or in most cases the best option, but I must use it for this particular project.

I have searched all over for a solution and tried many examples with IE hoping it was my syntax but have yet found a solution.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

荒人说梦 2024-12-11 12:25:15

数据 URI 不能用于导航、脚本编写或填充 IE 中的框架或 iframe 元素。

根据 http://msdn.microsoft.com /en-us/library/cc848897%28v=vs.85%29.aspx：

仅以下元素支持数据 URI 和/或
属性。
对象（仅限图像）
图像
输入类型=图像
关联
接受 URL 的 CSS 声明，例如 background、backgroundImage 等。
数据 URI 可以嵌套。
出于安全原因，数据 URI 仅限于下载
资源。 数据 URI 不能用于导航、脚本编写或
填充框架或 iframe 元素。
数据 URI 不能大于 32,768 个字符。
资源数据必须经过正确编码；否则会出现错误
并且资源未加载。 “#”和“%”字符必须是
编码的以及控制字符、非 US ASCII 字符和
多字节字符。
有关详细信息，请参阅 RFC2397：“数据”URL 方案。
自 Windows Internet Explorer 8 或更高版本起可用。**

Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements in IE.

According to http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx:

Data URIs are supported only for the following elements and/or
attributes.
object (images only)
img
input type=image
link
CSS declarations that accept a URL, such as background, backgroundImage, and so on.
Data URIs can be nested.
For security reasons, data URIs are restricted to downloaded
resources. Data URIs cannot be used for navigation, for scripting, or
to populate frame or iframe elements.
Data URIs cannot be larger than 32,768 characters.
The resource data must be properly encoded; otherwise, an error occurs
and the resource is not loaded. The "#" and "%" characters must be
encoded, as well as control characters, non-US ASCII characters, and
multibyte characters.
For more information, see RFC2397: The "data" URL scheme.
Available as of Windows Internet Explorer 8 or later.**

回复收藏 0 原文

蓝颜夕 2024-12-11 12:25:15

对我来说，找到文档。 execCommand 是一个救星。它与其他一些示例一样使用 iFrame，但 execCommand 使另存为 功能保持一致。

下面是一个示例

var getCsvFileForIE = function(target) {
  var csvData = target.attributes["data-csv"].value;
  if (navigator.appName === "Microsoft Internet Explorer") {
    csvData = decodeURIComponent(csvData);

    var iframe = document.getElementById('csvDownloadFrame');
    iframe = iframe.contentWindow || iframe.contentDocument;

    csvData = 'sep=,\r\n' + csvData;

    iframe.document.open("text/html", "replace");
    iframe.document.write(csvData);
    iframe.document.close();
    iframe.focus();
    iframe.document.execCommand('SaveAs', true, 'data.csv');
  } else {
    if (console && console.log) {
      console.log('Trying to call getCsvFileForIE with non IE browser.');
    }
  }
};

我们为 IE 执行此操作，对于所有其他浏览器，我们使用标准数据 URI 链接。您可以查看完整要点了解更多详细信息。向 Andrew Blondeau 的指导致敬。

更新

确定浏览器是否支持数据 URI 的更好方法

supportsDataUri = 'download' in document.createElement('a');

似乎 IE 仍然会遇到问题。对于 IE10+，您可能需要使用 msSaveOrOpenBlob，对于 IE8/9，您仍然需要在 iFrame 中执行 execCommand。

更新2

有一个Modernizr问题用于检测数据uri方案。它引用了另一个SO答案。一定要检查一下这些内容。

For me, finding document.execCommand was a life saver. It uses the iFrame like some of the other examples, but the execCommand makes the Save As functionality consistent.

Here's an example

var getCsvFileForIE = function(target) {
  var csvData = target.attributes["data-csv"].value;
  if (navigator.appName === "Microsoft Internet Explorer") {
    csvData = decodeURIComponent(csvData);

    var iframe = document.getElementById('csvDownloadFrame');
    iframe = iframe.contentWindow || iframe.contentDocument;

    csvData = 'sep=,\r\n' + csvData;

    iframe.document.open("text/html", "replace");
    iframe.document.write(csvData);
    iframe.document.close();
    iframe.focus();
    iframe.document.execCommand('SaveAs', true, 'data.csv');
  } else {
    if (console && console.log) {
      console.log('Trying to call getCsvFileForIE with non IE browser.');
    }
  }
};

We do this for IE and for all other browsers we use the standard Data URI link. You can see the full gist for more details. A hat tip to Andrew Blondeau for the direction.

UPDATE

A better way to determine if the browser support a Data URI

supportsDataUri = 'download' in document.createElement('a');

It also seems like IE still runs into issues. For IE10+ you might need to use msSaveOrOpenBlob and for IE8/9 you still need to do the execCommand in an iFrame.

UPDATE 2

There is a Modernizr issue for detecting data uri scheme. It references another SO answer. Be sure to also check those out.

回复收藏 0 原文

指尖上得阳光 2024-12-11 12:25:15

Internet Explorer 确实支持数据 URI（资源有点不足）日期）。但它有一些安全考虑，阻止它允许恶意尝试重定向用户，或者允许黑客在不需要第 3 方脚本或托管资源的情况下进行网络钓鱼。

这意味着您可以将其与 JavaScript 一起使用：

<script src="data:text/javascript;base64;YWxlcnQoIldvcmtzIik7"></script>

级联样式表（带或不带 base64 编码）：

<link rel="stylesheet" href="data:text/css;base64,Ym9keXtjb2xvcjpncmVlbn0=">
<link rel="stylesheet" href="data:text/css,body%7Bcolor:green%7D">

甚至图像：

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QBgRXhpZgAASUkqAAg
AAAACADEBAgAHAAAAJgAAAGmHBAABAAAALgAAAAAAAABQaWNhc2EAAAMAAJAHAAQAAAAwMjIwAqAEAAE
AAAAbAAAAA6AEAAEAAAAbAAAAAAAAAP/bAIQAAwICAwICAwMDAwQDAwQFCAUFBAQFCgcHBggMCgwMCwo
LCw0OEhANDhEOCwsQFhARExQVFRUMDxcYFhQYEhQVFAEDBAQFBAUJBQUJFA0LDRQUFBUUFBQUFBQUDxQ
QFBUUExUVFBQUEBUUFQ4UFBQUEhISDxURFQ8SFRQSEBAQDQ8P/8AAEQgAGwAbAwERAAIRAQMRAf/EABg
AAAMBAQAAAAAAAAAAAAAAAAUHCAIG/8QAKxAAAQMDAwMDAwUAAAAAAAAAAQIDBAUGEQASIQciMQgTFEF
RgRVhcaHD/8QAGQEAAwEBAQAAAAAAAAAAAAAABAUGBwMC/8QALxEAAQMCAgcHBQEAAAAAAAAAAQACAwQ
RBSESMUFRYZHBEyJxobHR4RVDgfDxFP/aAAwDAQACEQMRAD8AGdeKdd3Um670bjz0waNQpzVKpVOWtSE
uqSgKefIztKipQwSOU4wRjuBq6tj52h2YTbA8Nkp6UmMaLzzS1sz0ru1qqNyrkrqWIiMrfjsjctw4HGT
wM/ngaEmxJjBaNqdRYPJpaczr8FTXRY1h7p9dVg1GpSZzNBkobYcec3qfgup9xjefqUqQ4n+ED651RYf
Utla2UjMKBx6hdTvdEw2ac7JR13psz+rytkUqTv8AITq1bVZDNZo6ncCQFYFH9O1vS+lVrOW1bD0REtl
uW8hi45Ty0hSAUkOrKlLyNvA27eBnCdZbUxNv3GjkFudDWvved55k9QpI9S0y7ujfqUk2jZ4bcaetuFP
MSSFyENrW84h1zevcvOEgZzj9hnQ76aAQh0+Wezw1JjR1dVPO5kJuNxJ360Stj1LU/ooqREuuA9Krs4s
LqM2A0lbDSACG0kDlRTlZKUjHJx5xplhjWui7mq+Xkk2PhxqgDrDRfxuUmL89awuO8KrUU202lDz3Z7K
vbSpIASlW3ZwSACR9ydUsc/ZtDBs4qLkw4TPMjjmeCGSurEun2rRqJBvStJq5U6iSiLUZHx0BKRtQ2pT
hJwPBASnggDxqUjDzdxBtx+PlaTpQEhha38DqegCM2PdL6apMrkyHKn1FuIiOuoyCpbiEA57nFLVkcnC
OAST4OgqqMygMLsr6lQUZigvIxlstdv3pdbqsGy7nn1ym3pcEy3am06hwvsKZMYtrYQUZK1pVu2r5SkK
APPGjIJXQQt7Jml/VJ4lCKmre50lj8JYVDopYQmu/GviZJYz2OtQS6lQ+4UlZB/B16+oz7YDzCB/wsH3
fJIx+W8qRKWXFbxIUQrPPCiB/QGmLNQQriS4lODo1Mk1/qBQaJUJcmVSXJrYXEW+v21dw8gHnQNaBHA6
Ros62tOaKV8kjY3OJbuWrXkya/wBV6z8ubMCn1y1OLjSnI61YXwNzaknaMDtzjgccDXKoPZUzdEDZsB9
UFGTJO7SO/wBV0kq3mRIcHzaue4+axLP+uk/bO3DkPZMxE3jzPuv/2Q==">

但是，您不能将它们与 window.open 或 iframe，因为这会允许一些非常危险的事情，包括使用数据 URI 进行网络钓鱼：

<iframe src="data:text/html;base64,PGJ1dHRvbiBpZD0iX3BheXBhbCI+TG9nIGludG8gUGF5cG
FsPC9idXR0b24+DQo8c2NyaXB0Pg0KICAgIF9wYXlwYWwuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCB
mdW5jdGlvbiAoKSB7DQogICAgICAgIGFsZXJ0KCJUaGlzIGNvdWxkIGhhdmUgYmVlbiB1Z2x5IGZvciB5
b3UuLi4iKTsNCiAgICB9LCBmYWxzZSk7DQo8L3NjcmlwdD4="></iframe>

最后一个例子很可能是的完整复制品贝宝登录屏幕。相反，它只是一个带有绑定事件处理程序并监听点击的 HTML 按钮。类似的黑客攻击也可能通过 window.open 进行：

window.open("data:text/html;base64,PHN0cm9uZz5XQVQhPzwvc3Ryb25nPg==", "OHAI");

因此 Internet Explorer 10 支持此功能，但它可以保护最终用户免受恶意使用它的人的侵害。我确信，如果微软确定了更好的方法来保护其用户群，他们将很乐意取消此限制。

在情况发生变化之前，您需要找到另一种方法来包含 FLV 文件。顺便说一句，您可能不想在 Stack Overflow 上分享您的应用程序中的实际数据。

Internet Explorer does support Data URIs (resource is a bit out of date). It has some security considerations though which prevent it from allowing malicious attempts to redirect users, or otherwise allow hackers to engage in phishing without requiring 3rd party scripts or hosted resources.

This means you can use it with JavaScript:

<script src="data:text/javascript;base64;YWxlcnQoIldvcmtzIik7"></script>

Cascading Style Sheets (with, or without base64 encoding):

<link rel="stylesheet" href="data:text/css;base64,Ym9keXtjb2xvcjpncmVlbn0=">
<link rel="stylesheet" href="data:text/css,body%7Bcolor:green%7D">

Or even images:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QBgRXhpZgAASUkqAAg
AAAACADEBAgAHAAAAJgAAAGmHBAABAAAALgAAAAAAAABQaWNhc2EAAAMAAJAHAAQAAAAwMjIwAqAEAAE
AAAAbAAAAA6AEAAEAAAAbAAAAAAAAAP/bAIQAAwICAwICAwMDAwQDAwQFCAUFBAQFCgcHBggMCgwMCwo
LCw0OEhANDhEOCwsQFhARExQVFRUMDxcYFhQYEhQVFAEDBAQFBAUJBQUJFA0LDRQUFBUUFBQUFBQUDxQ
QFBUUExUVFBQUEBUUFQ4UFBQUEhISDxURFQ8SFRQSEBAQDQ8P/8AAEQgAGwAbAwERAAIRAQMRAf/EABg
AAAMBAQAAAAAAAAAAAAAAAAUHCAIG/8QAKxAAAQMDAwMDAwUAAAAAAAAAAQIDBAUGEQASIQciMQgTFEF
RgRVhcaHD/8QAGQEAAwEBAQAAAAAAAAAAAAAABAUGBwMC/8QALxEAAQMCAgcHBQEAAAAAAAAAAQACAwQ
RBSESMUFRYZHBEyJxobHR4RVDgfDxFP/aAAwDAQACEQMRAD8AGdeKdd3Um670bjz0waNQpzVKpVOWtSE
uqSgKefIztKipQwSOU4wRjuBq6tj52h2YTbA8Nkp6UmMaLzzS1sz0ru1qqNyrkrqWIiMrfjsjctw4HGT
wM/ngaEmxJjBaNqdRYPJpaczr8FTXRY1h7p9dVg1GpSZzNBkobYcec3qfgup9xjefqUqQ4n+ED651RYf
Utla2UjMKBx6hdTvdEw2ac7JR13psz+rytkUqTv8AITq1bVZDNZo6ncCQFYFH9O1vS+lVrOW1bD0REtl
uW8hi45Ty0hSAUkOrKlLyNvA27eBnCdZbUxNv3GjkFudDWvved55k9QpI9S0y7ujfqUk2jZ4bcaetuFP
MSSFyENrW84h1zevcvOEgZzj9hnQ76aAQh0+Wezw1JjR1dVPO5kJuNxJ360Stj1LU/ooqREuuA9Krs4s
LqM2A0lbDSACG0kDlRTlZKUjHJx5xplhjWui7mq+Xkk2PhxqgDrDRfxuUmL89awuO8KrUU202lDz3Z7K
vbSpIASlW3ZwSACR9ydUsc/ZtDBs4qLkw4TPMjjmeCGSurEun2rRqJBvStJq5U6iSiLUZHx0BKRtQ2pT
hJwPBASnggDxqUjDzdxBtx+PlaTpQEhha38DqegCM2PdL6apMrkyHKn1FuIiOuoyCpbiEA57nFLVkcnC
OAST4OgqqMygMLsr6lQUZigvIxlstdv3pdbqsGy7nn1ym3pcEy3am06hwvsKZMYtrYQUZK1pVu2r5SkK
APPGjIJXQQt7Jml/VJ4lCKmre50lj8JYVDopYQmu/GviZJYz2OtQS6lQ+4UlZB/B16+oz7YDzCB/wsH3
fJIx+W8qRKWXFbxIUQrPPCiB/QGmLNQQriS4lODo1Mk1/qBQaJUJcmVSXJrYXEW+v21dw8gHnQNaBHA6
Ros62tOaKV8kjY3OJbuWrXkya/wBV6z8ubMCn1y1OLjSnI61YXwNzaknaMDtzjgccDXKoPZUzdEDZsB9
UFGTJO7SO/wBV0kq3mRIcHzaue4+axLP+uk/bO3DkPZMxE3jzPuv/2Q==">

You cannot, however, use these with window.open or iframe, as these would allow some very dangerous things, including Phishing with Data URIs:

<iframe src="data:text/html;base64,PGJ1dHRvbiBpZD0iX3BheXBhbCI+TG9nIGludG8gUGF5cG
FsPC9idXR0b24+DQo8c2NyaXB0Pg0KICAgIF9wYXlwYWwuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCB
mdW5jdGlvbiAoKSB7DQogICAgICAgIGFsZXJ0KCJUaGlzIGNvdWxkIGhhdmUgYmVlbiB1Z2x5IGZvciB5
b3UuLi4iKTsNCiAgICB9LCBmYWxzZSk7DQo8L3NjcmlwdD4="></iframe>

This last example could very well have been a full-on replica of the PayPal login screen. Instead, it's just an HTML button with an event-handler bound and listening for clicks. Similar hackery could come by way of window.open:

window.open("data:text/html;base64,PHN0cm9uZz5XQVQhPzwvc3Ryb25nPg==", "OHAI");

So Internet Explorer 10 supports this feature, but it protects the end-user from those who would use it maliciously. I'm sure Microsoft will gladly lift this restriction when and if they determine a better way to protect their user-base.

Until things change, you need to find another way to include your FLV files. On a side-note, you may not want to share actual data like this from your application on Stack Overflow.

回复收藏 0 原文

夏见 2024-12-11 12:25:15

根据 Franco 在这里的回答： CSV file export For IE

只需创建一个 Blob 对象它对

//Save file
if (isMicrosoftIE()) {
    csvData = decodeURIComponent(csv);

    if(window.navigator.msSaveBlob){
        var blob = new Blob([csvData],{ type: "application/csv;charset=utf-8;"});
        navigator.msSaveBlob(blob, filename);
    }
}
else
{
    csvData = "data:application/csv;charset=utf-8," + encodeURIComponent(csv);
    $(this).attr({
        "href": csvData,
        "target": "_blank",
        "download": filename
    });
}

我有用！

According to Franco's answer here: CSV file export For IE

Just create a Blob object with it

//Save file
if (isMicrosoftIE()) {
    csvData = decodeURIComponent(csv);

    if(window.navigator.msSaveBlob){
        var blob = new Blob([csvData],{ type: "application/csv;charset=utf-8;"});
        navigator.msSaveBlob(blob, filename);
    }
}
else
{
    csvData = "data:application/csv;charset=utf-8," + encodeURIComponent(csv);
    $(this).attr({
        "href": csvData,
        "target": "_blank",
        "download": filename
    });
}

And it works for me!

回复收藏 0 原文

春风十里 2024-12-11 12:25:15

这里解释了两种替代解决方案： http:// /sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/

我可以看出的主要区别是 iframe 与原始 iframe 具有相同的起源页面，这可能不是我们想要的（我不确定安全隐患，例如加载资源的引用或 cookie 可能是什么）。

使用 javascript: 方案技术的示例如下： http://jsbin.com/uhenuz/4 （如果与 https 一起使用，则需要额外的谷歌搜索和良好的测试来检查混合 https/http 警告永远不会出现。）

回复收藏 0 原文

执手闯天涯 2024-12-11 12:25:15

我来到这里的时候正在寻找一种方法来检测文件的数据 uri 支持（在我的例子中是 PDF）。检查图像支持的 Modernizr 方法还不够好，因为 Internet Explorer 11 和 Edge 25 确实支持该方法，但不支持 application/pdf 等文件类型。 Snekse 检查下载属性的方法适用于 IE，但不适用于 Edge。最终，我使用 AJAX 调用编写了自己的功能检测脚本，尝试打开数据 URI 并检查错误。这是我使用的脚本（在 IE 11、Edge 25、Firefox 46 和 Chrome 49 中测试）：

checkDataURISupport(function (checkResult) {
    if (checkResult) {
        alert('Files in data URIs are supported.');
    } else {
        alert('Files in data URIs are NOT supported.');
    }
})

function checkDataURISupport(callback) {
    try {
        var request = new XMLHttpRequest();
        request.onload = function reqListener() {
            callback(true);
        };
        request.onerror = function reqListener() {
            callback(false);
        };
        request.open('GET', 'data:application/pdf;base64,cw==');
        request.send();
    } catch (ex) {
        callback(false);
    }
}

更新

我意识到任何测试数据 URI 的代码是否支持 iframe 也在测试支持在新窗口中打开数据 URI。因此，这个SO答案中提到的解决方案以及Snekse答案更新中链接的解决方案在技术上是优越的，我建议使用它上面的代码。

I got here while I was looking for a way to feature detect for data uri support of files (PDFs in my case). The Modernizr approach of checking for image support was not good enough since Internet Explorer 11 and Edge 25 do support that but don't support file types like application/pdf. Snekse's approach of checking for the download attribute worked on IE but not Edge. Eventually, I wrote my own feature detection script using an AJAX call to attempt to open a data URI and checking for errors. This is the script I used (tested in IE 11, Edge 25, Firefox 46, and Chrome 49):

checkDataURISupport(function (checkResult) {
    if (checkResult) {
        alert('Files in data URIs are supported.');
    } else {
        alert('Files in data URIs are NOT supported.');
    }
})

function checkDataURISupport(callback) {
    try {
        var request = new XMLHttpRequest();
        request.onload = function reqListener() {
            callback(true);
        };
        request.onerror = function reqListener() {
            callback(false);
        };
        request.open('GET', 'data:application/pdf;base64,cw==');
        request.send();
    } catch (ex) {
        callback(false);
    }
}

Update

I realized that any code that is testing for data URI is iframe support is also testing for supporting opening a data URI in a new window. Thus, the solution mentioned in this SO answer and linked to in Snekse's answer update is technically superior and I would recommend using it instead of the above code.

回复收藏 0 原文

~没有更多了~