Схема URI данных и ошибки Internet Explorer 9
У меня проблема с использованием схемы URL-адреса данных RFC 2397 с версиями IE 6-9. Мой пример кода ниже работает без проблем при использовании текущих версий 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, надеясь, что это был мой синтаксис, но пока не нашел решения.
6 ответов
URI данных нельзя использовать для навигации, создания сценариев или для заполнения элементов фрейма или фрейма в IE.
Согласно 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 данных нельзя использовать для навигации, создания сценариев или для заполнения элементов фрейма или фрейма.
URI данных не могут быть длиннее 32 768 символов.
Данные ресурса должны быть правильно закодированы; в противном случае возникает ошибка и ресурс не загружается. Символы "#" и "%" должны быть закодированы, а также управляющие символы, не-US символы ASCII и многобайтовые символы.
Для получения дополнительной информации см. RFC2397: URL-схема "data".
Доступно в Windows Internet Explorer 8 или более поздней версии.**
Для меня найти 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, а для всех других браузеров мы используем стандартную ссылку Data URI. Вы можете увидеть полную суть для более подробной информации. Шляпник Эндрю Блондо для направления.
ОБНОВИТЬ
Лучший способ определить, поддерживает ли браузер Data URI
supportsDataUri = 'download' in document.createElement('a');
Также кажется, что IE все еще сталкивается с проблемами. Для IE10+ вам может понадобиться msSaveOrOpenBlob и для IE8/9 вам все еще нужно сделать execCommand в iFrame,
ОБНОВЛЕНИЕ 2
Существует проблема Modernizr для определения схемы данных URI. Это ссылается на другой SO ответ. Не забудьте также проверить это.
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 поддерживает эту функцию, но защищает конечного пользователя от тех, кто использует ее злонамеренно. Я уверен, что Microsoft с удовольствием снимет это ограничение, когда и если они определят лучший способ защиты своей пользовательской базы.
Пока все не изменится, вам нужно найти другой способ включить ваши файлы FLV. Напомним, что вы, возможно, не захотите делиться такими данными из своего приложения в Stack Overflow.
Согласно ответу Франко здесь: экспорт CSV-файла для 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
});
}
И это работает для меня!
Я попал сюда, когда искал способ найти функцию поддержки данных и файлов (в моем случае это PDF-файлы). Подход Modernizr для проверки поддержки изображений был недостаточно хорош, поскольку Internet Explorer 11 и Edge 25 поддерживают это, но не поддерживают такие типы файлов, как application / pdf. Подход Снексе к проверке атрибута загрузки работал в 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, технически лучше, и я рекомендовал бы использовать его вместо приведенного выше кода.
Здесь объясняются два альтернативных решения: http://sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/
Основное отличие, которое я могу сказать, заключается в том, что iframe имеет то же происхождение, что и исходная страница, что может быть нежелательно (я не уверен в последствиях для безопасности, например, что может быть реферером или файлами cookie для загруженных ресурсов).
Пример использования техники javascript: схема здесь: http://jsbin.com/uhenuz/4 (При использовании с https потребуется дополнительное прибегание к поиску и хорошее тестирование, чтобы проверить, что смешанное предупреждение https / http никогда не может появиться.)