Загрузка файлов в локальный iframe с использованием целевого атрибута, не работающего в новейших Chrome

Question

Я использую kcFinder 2.54 для загрузки файлов на один из моих сайтов через CKEditor. Я знаю, что версии скриптов старые, но до недавнего времени они работали нормально.

Просматривая список изменений Chrome, я заметил следующее:

The native file system API starts a new origin trial with added functionality

Думаю, это может быть причиной моих проблем, а может и нет. Вот код:

При инициализации kcFinder создается простая форма:

<form enctype="multipart/form-data" method="post" target="uploadResponse" action="browse.php?type=files&amp;lng=pl&amp;opener=ckeditor&amp;act=upload">
    <input type="file" name="upload[]" onchange="_.uploadFile(this.form)" style="height:30px" multiple="multiple">
    <input type="hidden" name="dir" value="">
</form>

Обратите внимание на target="uploadResponse", который является локальным iframe, добавленным к body документ:

<iframe id="uploadResponse" name="uploadResponse" src="javascript:;"></iframe>

Вот как выглядит функция uploadFile(this.form):

_.uploadFile = function(form) {
    if (!_.dirWritable) {
        _.alert(_.label("Cannot write to upload folder."));
        $('#upload').detach();
        _.initUploadButton();
        return;
    }
    form.elements[1].value = _.dir;
    $('<iframe id="uploadResponse" name="uploadResponse" src="javascript:;"></iframe>').prependTo(document.body);
    $('#loading').html(_.label("Uploading file...")).show();
    form.submit();
    $('#uploadResponse').load(function() {
        var response = $(this).contents().find('body').text();
        $('#loading').hide();
        response = response.split("\n");

        var selected = [], errors = [];
        $.each(response, function(i, row) {
            if (row.substr(0, 1) == "/")
                selected[selected.length] = row.substr(1, row.length - 1);
            else
                errors[errors.length] = row;
        });
        if (errors.length) {
            errors = errors.join("\n");
            if (errors.replace(/^\s+/g, "").replace(/\s+$/g, "").length)
                _.alert(errors);
        }
        if (!selected.length)
            selected = null;
        _.refresh(selected);
        $('#upload').detach();
        setTimeout(function() {
            $('#uploadResponse').detach();
        }, 1);
        _.initUploadButton();
    });
};

У меня была go при отладке и я понял, что response полностью пусто. Тогда я понял, что не удивлен, так как запрос был отменен:

Единственное, что я заметил, это заголовок Upgrade-Insecure-Requests: 1, но не уверен если это важно, поскольку iframe полностью локальный.

Я искал информацию о возможном понижении уровня атрибута target или способе отправки формы с использованием iframe, но безрезультатно. Если кто-нибудь испытал что-то подобное или, по крайней мере, может сказать мне причину, по которой это не работает, возможно, я смогу найти обходной путь.

То, что я пробовал до сих пор:

1. Измените javascript:; на javasript:false; в источнике iframe
2. Измените javascript:; на # в источнике iframe

Answer 1

Я столкнулся с той же проблемой. Решил, позвонив form.submit в следующем тике:

// [...]

$('<iframe id="uploadResponse" name="uploadResponse" src="javascript:;"></iframe>').prependTo(document.body);
$('#loading').html(_.label("Uploading file...")).show();

setTimeout(function() {
  $('#uploadResponse').load(function() {
      // [...]
  });
  form.submit();
}, 1);

Answer 2

Я тоже застрял с этой проблемой. После некоторого исследования проблему можно легко решить, заменив src="javascript:;" на src="about:blank" в файле kcfinder/js/060.toolbar.js:

$('<iframe id="uploadResponse" name="uploadResponse" src="javascript:;"></iframe>').prependTo(document.body);

на

$('<iframe id="uploadResponse" name="uploadResponse" src="about:blank"></iframe>').prependTo(document.body);

Ссылка: https://github.com/jquery-form/form/pull/572

$. AjaxFileUpload не работает в последней версии Chrome версии 83.0.4103.61 (официальная сборка) (64-разрядная)