Wszystko, co warto wiedzieć, zanim zainstalujesz.
Szczegółowe spojrzenie na to, jak działa DataFirefly Fix Dropzone CORS: poprawka błędu tainted canvas w multistore PrestaShop 8, dlaczego zbudowaliśmy go w ten sposób i jaka myśl stoi za powyższymi funkcjami.
Błąd bez owijania
Pracujesz na PrestaShop 8 w trybie multistore, z kilkoma różnymi domenami, na przykład sklep-pl.com dla Polski i sklep-en.com dla Wielkiej Brytanii, każda z własnym certyfikatem HTTPS. Otwierasz zaplecze z sklep-pl.com i klikasz produkt przypisany do sklepu brytyjskiego. Obrazy tego produktu są serwowane z sklep-en.com, bo to domena kanoniczna tamtego sklepu. Dla przeglądarki jest to zasób cross-origin, a ponieważ natywne obrazy PrestaShop nie wysyłają odpowiednich nagłówków CORS (Access-Control-Allow-Origin), canvas generujący podgląd Dropzone zostaje skażony. Przy następnym wywołaniu ctx.getImageData przeglądarka rzuca SecurityError, edytor Dropzone przestaje działać, a sekcja zdjęć w formularzu produktu staje się bezużyteczna. Błąd w konsoli: main.bundle.js:274 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. at main.bundle.js:274:137430 at L (main.bundle.js:274:137535) at main.bundle.js:274:123939 at o (main.bundle.js:274:123147) at l.onload (main.bundle.js:274:123297)
Dlaczego ten błąd jest realny i istotny
Wiele sklepów na wielu domenach żyje z tym błędem od dłuższego czasu, omijając go przez logowanie się zawsze na właściwą domenę dla danego produktu. W realnej organizacji zespołowej, gdzie katalogiem zarządza jedna osoba, a podsklepów międzynarodowych jest kilka, takie obejście jest nie do utrzymania. PrestaShop ma oficjalną poprawkę w Dropzone.vue w niektórych wersjach nowego edytora Symfony, ale błąd pozostaje w starym edytorze AdminProducts i nie zawsze jest przenoszony do wersji stabilnych. Ten moduł rozwiązuje problem w obu edytorach jednocześnie.
Jak działa poprawka od strony technicznej
Przy ładowaniu strony produktu w zapleczu moduł wstrzykuje plik JavaScript o długości 70 linii do nagłówka przez hook displayBackOfficeHeader. Skrypt czeka, aż window.Dropzone będzie zdefiniowane, a następnie zastępuje Dropzone.prototype.displayExistingFile wersją przechwytującą. Ta wersja analizuje otrzymany adres URL: jeśli jest cross-origin, parsuje go przez new URL(url), ustawia u.protocol i u.host na wartości z window.location.origin, składa adres z powrotem i przekazuje do oryginalnej metody. Efekt w przeglądarce: Dropzone otrzymuje adres same-origin, canvas pozostaje czysty, getImageData działa, a istniejący plik obrazu wyświetla się normalnie w polu przeciągnij i upuść. Łatka jest idempotentna (flaga __dfCorsPatched zapobiega podwójnemu nałożeniu) i odporna na błędy (nieprawidłowe adresy wracają do pierwotnego zachowania).
Dlaczego nie łatka rdzenia ani override
Override PrestaShop na kontrolerze produktu byłby kruchy: psułby się przy każdej większej aktualizacji, a kod Dropzone nie znajduje się w kontrolerze PHP. Bezpośrednia modyfikacja pliku JavaScript Dropzone byłaby nadpisywana przy każdej aktualizacji. Monkey patch po stronie przeglądarki jest całkowicie nieinwazyjny: żaden plik PrestaShop nie jest modyfikowany, żaden override nie jest zakładany, łatka nakłada się w czasie wykonania z zewnątrz. Jeśli PrestaShop zaktualizuje Dropzone lub jego integrację, łatka pozostanie sprawna, dopóki sygnatura displayExistingFile się nie zmieni, a ta jest wyjątkowo stabilna od Dropzone 5.x. Jeśli metoda się zmieni albo PrestaShop naprawi błąd natywnie, możesz odinstalować moduł bez żadnych pozostałości.
Zastosowania
Sklep wielokrajowy z osobną domeną na rynek (sklep-pl.com, sklep-en.com, sklep-de.com) prowadzony przez scentralizowany zespół: błąd blokuje edycję produktu między domenami, a moduł usuwa go natychmiast. Marketplace albo grupa marek w trybie multistore na wielu domenach: ta sama konfiguracja, to samo rozwiązanie. Agencja obsługująca kilka podsklepów klientów na odrębnych domenach: moduł przywraca normalną pracę w zapleczu bez skakania z domeny na domenę. Migracja ze sklepu pojedynczego na wiele domen: zainstalowany zapobiegawczo moduł oszczędza przykrej niespodzianki po migracji.
Na razie nie ma opinii o produkcie.