Como saber se sou afetado por este erro?

O erro exato é SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. Aparece nas fichas de produto do back-office quando está em multiloja com vários domínios diferentes. Abra a consola do navegador: se vir tainted canvas e uma chamada ao Dropzone, é este erro.

Porque é que o PrestaShop nativo tem este erro?

Quando edita um produto no back-office de uma loja do domínio A, mas esse produto está associado à loja do domínio B, as imagens são servidas a partir do domínio B. Para o navegador, é um pedido cross-origin, a menos que B envie os cabeçalhos CORS certos, o que quase nunca acontece com as imagens nativas do PrestaShop. Resultado: o canvas que gera a pré-visualização do Dropzone fica «tainted» e o getImageData lança um SecurityError que parte o editor.

Há alguma configuração?

Mesmo nada. Instala o ZIP e ativa o módulo. Sem tabelas criadas, sem configuração e sem parâmetros. O ficheiro JS é carregado apenas nos controladores de produto (AdminProducts no modo legado e admin_products_v2 no novo editor Symfony), para não acrescentar nada noutro sítio.

Há risco para os meus dados?

Nenhum. O módulo não escreve nada na base de dados, não mexe nas suas imagens e não altera os produtos. Apenas acrescenta um script JS ao cabeçalho do back-office nas páginas de produto. O script limita-se a reescrever os URL cross-origin antes do Dropzone e, se o Dropzone não estiver presente (noutra página), o patch não se aplica.

Continua a funcionar depois das futuras atualizações do PrestaShop?

O patch do Dropzone é reaplicado em cada carregamento de página de produto, pelo que continua a funcionar com a próxima atualização do PrestaShop 8.x enquanto existir o método Dropzone.prototype.displayExistingFile (o que acontece em todo o ramo 8.x). Se o PrestaShop integrar a correção de origem numa versão futura, o módulo continua sem efeitos negativos: o patch fica apenas redundante e inofensivo.

É compatível com o meu tema?

Sim. O módulo não interage com o front-office: é uma correção 100 % de back-office. Seja qual for o seu tema (Classic, Hummingbird ou personalizado), funciona sem alterações.

Posso desativar a correção quando quiser?

Sim, pode desativar o módulo a qualquer momento no gestor de módulos. O erro reaparece de imediato nas fichas de produto entre domínios, mas não fica qualquer vestígio na base de dados.

Se não estou em multiloja, preciso do módulo?

Se a sua loja for única, ou se estiver em multiloja num só domínio (com subdiretórios em vez de subdomínios), não tem o erro e não precisa da correção. Mas, se um dia passar a uma configuração com vários domínios, o módulo fica pronto a usar sem intervenção.

Fix Dropzone CORS no PrestaShop: erro tainted canvas

Q: Como funciona a correção?

O módulo faz um monkey patch de Dropzone.prototype.displayExistingFile do lado do cliente. Antes de o Dropzone carregar a imagem, o URL é intercetado: se for cross-origin, o protocolo e o host são reescritos para os de window.location.origin (o domínio do back-office atual). O navegador carrega então a imagem da mesma origem do back-office, o canvas mantém-se limpo e o getImageData funciona. É exatamente a mesma estratégia da correção oficial do PrestaShop para o Dropzone.vue.

DataFirefly Fix Dropzone CORS: Correção do Tainted Canvas em Multiloja no PrestaShop 8

A correção definitiva do erro «tainted canvas» no editor de produto em multiloja com vários domínios.

Se está em PrestaShop 8 em multiloja com vários domínios diferentes (loja-pt.com, loja-es.com, etc.), é provável que já tenha visto este erro na consola do navegador ao editar uma ficha de produto: SecurityError: tainted canvas. O formulário de imagens parte-se, a pré-visualização do Dropzone deixa de aparecer e fica bloqueado. É um erro conhecido do PrestaShop: as imagens são servidas de outro domínio, o canvas fica cross-origin e o getImageData rebenta. O DataFirefly Fix Dropzone CORS resolve o problema com um monkey patch ao Dropzone do lado do cliente: os URL das imagens existentes são reescritos para o domínio do back-office antes do carregamento, o canvas mantém-se limpo e o editor funciona. Instalar, ativar e o erro desaparece. Sem configuração, sem tabelas e com 70 linhas de JavaScript.

PrestaShop 8.0+ Multiloja com vários domínios Correção nativa Sem configuração 1 ficheiro JS Sem base de dados

Reembolso em 30 dias

12 meses de atualizações

Suporte em 24h

A versão longa

Tudo o que quer saber antes de instalar.

Uma análise detalhada de como o DataFirefly Fix Dropzone CORS: Correção do Tainted Canvas em Multiloja no PrestaShop 8 funciona, porque o construímos assim e o raciocínio por trás das funcionalidades acima.

§ 01

O erro, em claro

Está em PrestaShop 8 em multiloja, com vários domínios diferentes, por exemplo loja-pt.com para Portugal e loja-es.com para Espanha, cada um com o seu certificado HTTPS. Abre o back-office a partir de loja-pt.com e clica num produto associado à loja espanhola. As imagens desse produto são servidas a partir de loja-es.com, porque é o domínio canónico dessa loja. Para o navegador, isso é um recurso cross-origin e, como as imagens nativas do PrestaShop não enviam os cabeçalhos CORS certos (Access-Control-Allow-Origin), o canvas que gera a pré-visualização do Dropzone fica «tainted». Na chamada seguinte a ctx.getImageData, o navegador lança um SecurityError, o editor Dropzone parte e o formulário de produto fica inutilizável na zona de imagens. Erro na consola: 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)

§ 02

Porque é que este erro é real e importante

Muitas lojas com vários domínios convivem há muito com este erro, evitando editar entre domínios (ligando-se sempre ao domínio «certo» de cada produto). Mas, numa equipa a sério, com o catálogo gerido por uma única pessoa e várias lojas internacionais, isso é insustentável. O PrestaShop tem uma correção oficial no Dropzone.vue em certas versões do novo editor Symfony, mas o erro persiste no editor antigo AdminProducts e nem sempre é retroportado para as versões estáveis. Este módulo resolve o problema nos dois editores ao mesmo tempo.

§ 03

Como funciona a correção, tecnicamente

Ao carregar uma página de produto do back-office, o módulo injeta um ficheiro JS de 70 linhas no cabeçalho, pelo hook displayBackOfficeHeader. O script espera que window.Dropzone esteja definido e substitui depois Dropzone.prototype.displayExistingFile por uma versão intercetada. Essa versão examina o URL recebido: se for cross-origin, analisa-o com new URL(url), força u.protocol e u.host aos de window.location.origin, recompõe o URL e passa-o ao método original. Resultado no navegador: o Dropzone recebe um URL da mesma origem, o canvas mantém-se limpo, o getImageData funciona e a imagem existente aparece normalmente na zona de arrastar e largar. O patch é idempotente (um sinalizador __dfCorsPatched impede a dupla aplicação) e à prova de falhas (URL inválidos voltam ao comportamento original).

§ 04

Porquê não um patch ao core ou um override

Um override do PrestaShop no controlador de produto seria frágil: partiria a cada atualização importante, e o código do Dropzone não está no controlador PHP. Uma alteração direta ao ficheiro JS do Dropzone seria substituída a cada atualização. O monkey patch do lado do cliente é totalmente não invasivo: nenhum ficheiro do PrestaShop é alterado, nenhum override é colocado e o patch aplica-se em tempo de execução, a partir de fora. Se o PrestaShop atualizar o Dropzone ou a sua integração, o patch continua a funcionar enquanto a assinatura de displayExistingFile não mudar (o que é extremamente estável desde o Dropzone 5.x). Se o método mudar ou se o PrestaShop corrigir de origem, pode desinstalar o módulo sem qualquer vestígio.

§ 05

Casos de utilização

Loja multipaís com um domínio por mercado (loja-pt.com, loja-es.com, loja-fr.com) gerida por uma equipa centralizada: o erro bloqueia a edição de produtos entre domínios e o módulo resolve de imediato. Marketplace ou rede de marcas em multiloja com vários domínios: mesma configuração, mesma solução. Agência que gere várias lojas de clientes em domínios distintos: o módulo torna o back-office utilizável sem andar a saltar de domínio em domínio. Migração de loja única para vários domínios: instalado preventivamente, evita a má surpresa depois da migração.

DataFirefly Fix Dropzone CORS: Correção do Tainted Canvas em Multiloja no PrestaShop 8

A versão curta.

Resolve o erro tainted canvas em multiloja

Monkey patch elegante e mínimo

Pegada zero e sem configuração

Sem mexer no core