Как обмануть WebGL в плане CORS: The image element contains cross-origin data, and may not be loaded

152
07 ноября 2019, 07:30

Я подменял png картинку на свою при помощи Requestly и поставил на сервере с картинкой заголовки, разрешающие корс:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Заголовки работают, я проверял. Но Пикси, использующий WebGl, всё равно недоволен:

Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.
    at n.upload (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js:8:23686)
    at t.updateTexture (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js:13:7068)
    at e.bindTexture (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js:13:14706)
    at e.flush (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js:15:1438)
    at e.stop (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js:15:1847)
    at e.setObjectRenderer (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js:13:12588)
    at e._renderWebGL (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js:11:13151)
    at e.renderWebGL (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js:10:23281)
    at e.renderWebGL (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js:10:23357)
    at e.renderWebGL (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js:10:23357)

Можно как-то его обмануть, не прибегая к подмене ещё и пикси? Возможно, надо как-то модифицировать заголовки с сервера? Выполнить до загрузки страницы js код, где будет согласие клиента на корс? Иначе самый грустный вариант - WebGL нужно не только разрешение сервера, но и пикси, и придётся изменять (и подменять) уже код пикси. Если так, то кому из этих нечитаемых абвгд ставить crossOrigin = "anonymous";?

Answer 1

нужно к загружаемому изображению добавлять img.crossOrigin = "anonymous";

let loader = new Image();
loader.crossOrigin = "anonymous";
loader.src = url;  
loader.onload = function() { 
    ... use image webgl code ...
}

Вот в этом сообщении можно посмотреть рабочий пример

Вариант номер 2 - обойти cors каким либо способом (свой прокси или вот)

READ ALSO
Как расшифровать вредоносный jse файл?

Как расшифровать вредоносный jse файл?

Пришло на почту письмо с вирусом, открыл в песочнице архив, вынул файл jse и вот его код

129
Paper js добавление точки

Paper js добавление точки

Функция с ajax запросом присылает данные с сервера

95
Сортировка по ключу Y [дубликат]

Сортировка по ключу Y [дубликат]

На данный вопрос уже ответили:

108
#1062 - Дублирующаяся запись '235-74' по ключу 'PRIMARY'

#1062 - Дублирующаяся запись '235-74' по ключу 'PRIMARY'

Мне надо заменить в БД значение ячейки, если оно попадает под условиеДелаю такой запрос:

133