web-dev-qa-db-ja.com

データURIスキームとInternet Explorer 9のエラー

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で試行すると、次のエラーで失敗します。

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

最も可能性の高い原因：

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

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

このWebコンテンツの表示に使用できるプログラムをオンラインで検索してください。

アドレスを再入力してください。

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

プロトコルタイプ：

説明：不明

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

Data：プロトコルを使用することは、おそらく最も単純な方法ではないか、ほとんどの場合最適なオプションではないことを認識していますが、この特定のプロジェクトではプロトコルを使用する必要があります。

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

internet-explorerprotocolsrfcdata-url
22
DaveCS

データ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 Internet Explorer 8以降で利用できます。**

24
DaveCS

私にとって、 _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リンクを使用します。詳細は full Gist を参照してください。--へのハットヒント 方向のAndrew Blondea 。

[〜＃〜]更新[〜＃〜]

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

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

IEでも問題が発生します。IE10+の場合はmsSaveOrOpenBlobを使用する必要があり、IE8/9の場合はexecCommandを実行する必要がありますiFrame。

更新2

データURIスキームを検出するための Modernizrの問題 があります。 another SO answer を参照しています。必ず確認してください。

16
Snekse

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

<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ファイルを含める別の方法を見つける必要があります。補足として、Stack Overflow上のアプリケーションからこのように実際のデータを共有したくない場合があります。

12
Sampson

ここでのフランコの回答によると： 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
    });
}

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

6
abla

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

私が知ることができる主な違いは、iframeが元のページと同じOriginを持っているということです。

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

0
robocat

ファイル（私の場合はPDF）のデータURIサポートを検出する機能を見つける方法を探していたときに、ここに到着しました。 Internet Explorer 11とEdge 25はサポートしていますが、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を開くことをサポートするためのテストでもあることに気付きました。したがって、 this SO answer で言及され、Snekseの回答更新でリンクされているソリューションは技術的に優れており、上記のコードの代わりに使用することをお勧めします。

0
Chris