22

IEバージョン6〜9でRFC2397データ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で試行すると、次のエラーで失敗します。

ウェブページを表示できません

最も可能性の高い原因：

  • このWebページの一部のコンテンツまたはファイルには、インストールしていないプログラムが必要です。

お手並みをみせてもらおう：

このWebコンテンツを表示するために使用できるプログラムをオンラインで検索します。

アドレスを再入力します。

生成されたIEエラーページのページソースを調べると、ファイルの関連付けとプロトコルを参照するリンクがあります。

プロトコルタイプ：

説明：不明

Windowsはこのプロトコルを認識しません。

data：プロトコルを使用することは、おそらく最も簡単ではなく、ほとんどの場合最良のオプションではないことを理解していますが、この特定のプロジェクトではそれを使用する必要があります。

私は解決策を探し回って、それが私の構文であることを期待してIEで多くの例を試しましたが、まだ解決策を見つけていません。

4

6 に答える 6

24

データURIは、ナビゲーション、スクリプト作成、またはIEのフレームまたはiframe要素への入力には使用できません。

http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspxによると：

データURIは、次の要素や属性でのみサポートされます。

object (images only)
img
input type=image
link
CSS declarations that accept a URL, such as background, backgroundImage, and so on.

データURIはネストできます。

セキュリティ上の理由から、データURIはダウンロードされたリソースに制限されています。データURIは、ナビゲーション、スクリプト作成、またはフレームまたはiframe要素への入力には使用できません。

データURIは32,768文字を超えることはできません。

リソースデータは適切にエンコードされている必要があります。そうしないと、エラーが発生し、リソースがロードされません。「＃」および「％」文字は、制御文字、非US ASCII文字、およびマルチバイト文字と同様にエンコードする必要があります。

詳細については、RFC2397：「データ」URLスキームを参照してください。

Windows InternetExplorer8以降で使用できます。**

于 2011-12-10T01:18:56.330 に答える
16

私にとって、発見document.execCommandは命の恩人でした。iFrame他のいくつかの例と同様に使用しexecCommandますが、Save As機能の一貫性を保ちます。

これが例です

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リンクを使用します。詳細については、完全な要点を参照してください。方向性のためのアンドリュー・ブロンドーへの帽子のヒント。

アップデート

ブラウザがデータURIをサポートしているかどうかを判断するためのより良い方法

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

また、IEはまだ問題に直面しているようです。IE10 +の場合はを使用する必要がmsSaveOrOpenBlobあり、IE8/9の場合はでを実行する必要がありexecCommandますiFrame。

更新2

データURIスキームを検出するためのModernizrの問題があります。別のSO回答を参照します。ぜひチェックしてみてください。

于 2014-09-23T19:39:13.523 に答える
12

Internet ExplorerはデータURIをサポートします（リソースは少し古くなっています）。セキュリティ上の考慮事項がいくつかありますが、悪意のあるユーザーのリダイレクトを防止したり、ハッカーがサードパーティのスクリプトやホストされたリソースを必要とせずにフィッシングに関与したりすることを防ぎます。

これは、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ただし、これらをまたはで使用することはできません。これは、データURIを使用したフィッシングiframeなどの非常に危険なことを可能にするためです。

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

この最後の例は、PayPalログイン画面の完全なレプリカである可能性があります。代わりに、イベントハンドラーがバインドされ、クリックをリッスンするHTMLボタンです。同様のハッカーは、次の方法で発生する可能性がありwindow.openます。

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

そのため、Internet Explorer 10はこの機能をサポートしていますが、悪意を持って使用するユーザーからエンドユーザーを保護します。マイクロソフトは、ユーザーベースを保護するためのより良い方法を決定したときに、喜んでこの制限を解除すると確信しています。

状況が変わるまで、FLVファイルを含める別の方法を見つける必要があります。ちなみに、StackOverflowでアプリケーションからこのような実際のデータを共有したくない場合があります。

于 2013-05-07T00:58:11.753 に答える
6

ここでのフランコの答えによると：IEのCSVファイルのエクスポート

それを使って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
    });
}

そしてそれは私のために働きます！

于 2015-08-26T07:07:16.013 に答える
0

ここでは、2つの代替ソリューションについて説明します：http ：//sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/

私が知ることができる主な違いは、iframeが元のページと同じ原点を持っていることです。これは望ましくない場合があります（ロードされたリソースのリファラーやCookieなど、セキュリティへの影響はわかりません）。

javascript：スキーム手法の使用例は次のとおりです。http：//jsbin.com/uhenuz/4（httpsで使用する場合は、https / httpの混合警告が表示されないことを確認するために、追加のグーグルと適切なテストが必要になります。）

于 2013-07-01T02:56:33.847 に答える
0

私は、ファイル（私の場合はPDF）のデータURIサポートを機能検出する方法を探していたときにここに着きました。Internet Explorer11とEdge25は画像のサポートをサポートしていますが、application / pdfなどのファイルタイプはサポートしていないため、画像のサポートをチェックするModernizrのアプローチは十分ではありませんでした。ダウンロード属性をチェックする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の回答更新でリンクされているソリューションは技術的に優れており、上記のコードの代わりに使用することをお勧めします。

于 2016-04-28T13:19:12.177 に答える