Golos Blogs

Я использую скрипт загрузки фото в своем редакторе для голоса (https://golos.rubtc.info/r/) работает он стабильно выполняя простую функцию - загружает фото с вашего ПК/телефона на фотохостинг imgur и после вставляет фотографию в редактор для последующего постинга. Все происходит в фоне и выглядит как обычная прямая загрузка в пост.

Сегодня решил сделать bookmarklet и userscript который позволит пользователям иметь кнопку загрузки фото в редакторе голоса, однако сделать это удалось только применяя стремные иньекции в обход csp голоса, что есть не хороший тон в отношении безопасности.
Потому мне кажется правильнее будет предложить временное (до внедрения ipfs) решение команде.

Для этого нужно немного отредактировать /submit.html добавив :

HTML

<div class="drop"><div id="addimg" onclick="document.querySelector('#up').click()"> Описание кнопки загрузки</div></div> 
<input id="up" style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])">

(function() { 'use strict';
// Селектор textarea редактора markdown или html
var targetToPasteSelector = "";
window.ondragover = function(e) {e.preventDefault();};
window.ondrop = function(e) {e.preventDefault(); 
upload(e.dataTransfer.files[0]); };
window.upload = function(file) {
        if (!file || !file.type.match(/image.*/)) return;
        var fd = new FormData(); 
        fd.append("image", file); 
        var xhr = new XMLHttpRequest(); 
        xhr.open("POST", "https://api.imgur.com/3/image.json"); 
        xhr.onload = function() {
            var imgurl = JSON.parse(xhr.responseText).data.link;
            var ed = document.querySelector(targetToPasteSelector);
            ed.insertAdjacentHTML('afterbegin',imgurl); 
//для markdown. Для html добавить обертку тега img переменной imgurl.
        };
        xhr.setRequestHeader('Authorization', 'Client-ID 28aaa2e823b03b1');
xhr.send(fd);
    }
})();

Можно так же оформить все в виде расширения для браузера, но это возможно, только добавив разрешающую политику в helmet-csp для api.imgur.com.