Lidar com violações de código hospedados remotamente

O código hospedado remotamente, ou RHC, é o que a Chrome Web Store chama de qualquer coisa que é executado pelo navegador que é carregado de um lugar diferente do arquivos da própria extensão. Coisas como JavaScript e WASM. Ela não inclui dados ou coisas como JSON ou CSS.

Por que o RHC não é mais permitido?

Com as extensões do Manifest V3, agora é necessário agrupar todo o código usado a extensão em si. Antes, era possível injetar tags de script de forma dinâmica qualquer URL da web.

Foi informado que minha extensão tem RHC. O que está acontecendo?

Se a extensão tiver sido rejeitada durante a revisão com um erro Blue Argon, nossos revisores acreditam que sua extensão está usando um código hospedado remotamente. Isso é geralmente o resultado de uma extensão que tenta adicionar uma tag de script com um comando (ou seja, da web aberta, em vez dos arquivos incluídos no extensão) ou buscando um recurso para executar diretamente.

Como identificar RHC

Identificar RHC não é muito difícil quando você sabe o que procurar. Primeiro, procure as strings "http://" ou "https://" em seu projeto. Se você tiver um uma violação do RHC, você provavelmente conseguirá localizá-la ao encontrá-la. Se você tem um sistema de build completo ou usa dependências de npm ou outro de terceiros, verifique se está pesquisando a versão compilada do código, já que é isso que está sendo avaliado pela loja. Se você ainda não conseguir encontrar o problema, a próxima etapa é entrar em contato com o suporte único. Eles poderá descrever as violações específicas e o que é necessário para a extensão será publicada o mais rápido possível.

O que fazer se uma biblioteca estiver solicitando o código

Independentemente da origem do código, não é permitido ter RHC. Isso inclui código que não foi criado por você, mas que acaba sendo usado como uma dependência no seu projeto. Alguns desenvolvedores que usam o Firebase tiveram esse problema com o acesso remoto estava sendo incluído para uso no Firebase Auth. Embora este tenha sido um biblioteca própria (ou seja, do Google), nenhuma exceção é dada para RHC. Você precisa para configurar o código para remover o RHC ou atualizar o objeto para não incluir o código no início. Se você encontrar um problema em que o código não é seu que carrega o RHC, mas uma biblioteca que você usa, então o melhor é entrar em contato com o autor da biblioteca. Informe a eles que isso está acontecendo, e solicitar uma solução alternativa ou atualizações de código para removê-lo.

E se você não puder esperar pela atualização de uma biblioteca?

Algumas bibliotecas enviam uma atualização quase imediatamente após serem notificadas, mas outras pessoas podem ser abandonadas ou levar algum tempo para resolver o problema. Dependendo do quê está acontecendo na violação específica, talvez não seja necessário aguardar mover para o desbloqueio e concluir uma revisão bem-sucedida. Existem vários disponíveis para voltar a funcionar rapidamente.

Auditar o código

Você tem certeza de que o código que está causando a solicitação é necessário? Se possível, ou uma biblioteca que está fazendo com que ele possa ser removido, exclua o código e o trabalho está pronto.

Existe outra biblioteca que oferece os mesmos recursos? Testar consulte npmjs.com, GitHub ou outros sites para encontrar outras opções que atendam os mesmos casos de uso.

Árvores balançando

Se o código que causa a violação do RHC não estiver sendo usado, talvez seja podem ser excluídas automaticamente pelas ferramentas. Ferramentas de build modernas, como webpack, Rollup e Vite (apenas para citar alguns) têm um recurso chamada tree-shaking. Depois de ativado em seu sistema de compilação, o tree shaking deve remover todos os caminhos de código não utilizados. Isso pode significar que você tem uma experiência em conformidade do seu código, mas também mais enxuta e mais rápida. É importante Nem todas as bibliotecas podem ter o tree shaking, mas muitas são. Algumas Ferramentas como Rollup e Vite têm o tree shaking ativado por padrão. webpack precisa ser configurado para ser ativado. Se você não estiver usando um build como parte da sua extensão, mas estejam usando bibliotecas de código, estará recomendamos que você investigue como adicionar uma ferramenta de build ao seu fluxo de trabalho. Criação ajudam você a escrever projetos mais seguros, confiáveis e de fácil manutenção.

As especificidades de como implementar o tree shaking dependem do projeto. Mas, para pegar um exemplo simples com a Rollup, você pode adicionar o compartilhamento de árvores e compilar o código do projeto. Por exemplo, se você tem um arquivo que só faz login Firebase Auth, chamado main.js:

import { GoogleAuthProvider, initializeAuth } from "firebase/auth";

chrome.identity.getAuthToken({ 'interactive': true }, async (token) => {
  const credential = GoogleAuthProvider.credential(null, token);
  try {
    const app = initializeApp({ ... });
    const auth = initializeAuth(app, { popupRedirectResolver: undefined, persistence: indexDBLocalPersistence });
    const { user } = await auth.signInWithCredential(credential)
    console.log(user)
  } catch (e) {
    console.error(error);
  }
});

Então, basta informar ao Rollup o arquivo de entrada, um plug-in necessário para carregar arquivos de nó @rollup/plugin-node-resolve e o nome da saída arquivo que está gerando.

npx rollup --input main.js --plugin '@rollup/plugin-node-resolve' --file compiled.js

Ao executar esse comando em uma janela de terminal, você vai receber uma versão gerada do nosso arquivo main.js, todos compilados em um único arquivo chamado compiled.js.

A consolidação pode ser simples, mas também é muito configurável. Você pode adicionar todos os tipos de lógica e configuração complexas, basta conferir a documentação deles. Adicionar ferramentas de build como essa resultará em um código menor e mais eficiente, e, neste caso, corrige nosso problema de código hospedado remotamente.

Como editar arquivos automaticamente

Uma forma cada vez mais comum de o código hospedado remotamente entrar na sua base de código é como uma subdependência da biblioteca que você está incluindo. Se a biblioteca X quiser Y da biblioteca import de uma CDN, ainda vai ser necessário fazer a atualização dela ele é carregado de uma fonte local. Com sistemas de build modernos, é possível criar para extrair uma referência remota e inseri-la diretamente no código.

Isso significa que o código é parecido com este:

import moment from "https://unpkg.com/moment@2.29.4/moment.js"
console.log(moment())

Você pode fazer um pequeno plug-in de consolidação.

import { existsSync } from 'fs';
import fetch from 'node-fetch';

export default {
  plugins: [{
    load: async function transform(id, options, outputOptions) {
      // this code runs over all of out javascript, so we check every import
      // to see if it resolves as a local file, if that fails, we grab it from
      // the network using fetch, and return the contents of that file directly inline
      if (!existsSync(id)) {
        const response = await fetch(id);
        const code = await response.text();

        return code
      }
      return null
    }
  }]
};

Depois de executar o build com o novo plug-in, cada URL import remoto é independentemente de ter sido ou não nosso código, uma subdependência, ou em qualquer outro lugar.

npx rollup --input main.js --config ./rollup.config.mjs --file compiled.js

Edição manual de arquivos

A opção mais simples é excluir o código que está causando o RHC. Abrir no o editor de texto de sua preferência e excluir as linhas que violam as políticas. Isso geralmente é não isso é recomendável, porque é frágil e pode ser esquecido. Faz manter seu projeto mais difícil quando um arquivo chamado "library.min.js" não é na verdade, library.min.js. Em vez de editar os arquivos brutos, um pouco mais sustentável é usar uma ferramenta como o patch-package. Este é um super opção eficiente que permite salvar modificações em um arquivo, em vez de do arquivo em si. Ele é baseado em arquivos de patch, o mesmo tipo que alimentam sistemas de controle de versões, como Git ou Subversion. Você só precisa para modificar manualmente o código violador, salvar o arquivo de diferença e configurar patch-package com as mudanças que você quer aplicar. Confira um tutorial completo no leiame do projeto. Se você estiver aplicando patches a um projeto, nós realmente incentivam você a entrar em contato com o projeto para solicitar que alterações sejam feitas upstream. Embora o patch-package facilite o gerenciamento de patches, nada para corrigir é ainda melhor.

O que fazer se o código não estiver sendo usado

À medida que as bases de código aumentam, as dependências (ou dependência de uma dependência ou dependência) de...) pode manter caminhos de código que não são mais usados. Se uma dessas seções incluir código para carregar ou executar o RHC, ele precisará ser removido. Ela não importa se ele está morto ou não é usado. Se ele não estiver sendo usado, deve ser foram removidos, seja com o tree shaking ou a correção de um patch na biblioteca.

Existe alguma solução alternativa?

De modo geral, não. O RHC não é permitido. No entanto, há um pequeno número de casos em que é permitido. Esses são quase sempre em que é impossível para nenhuma outra opção.

API User Scripts

Scripts de usuário são pequenos snippets de código geralmente fornecidos pelo voltado a gerenciadores de scripts de usuário, como TamperMonkey e Um macaco violento. Esses gerentes não conseguem agrupar códigos que é escrito por usuários, e a API User Script apresenta uma maneira de executar o código fornecidas pelo usuário. Isso não substitui chrome.scripting.executeScript ou outros ambientes de execução de código. Os usuários precisam ativar o modo de desenvolvedor para executar qualquer coisa. Se o navegador da Web A equipe de avaliação da loja acredita que isso está sendo usado de outra maneira (ou seja, código fornecido pelo usuário), ele pode ser rejeitado ou listagem removida da loja.

chrome.debugger

A API chrome.debugger permite que as extensões interajam com pelo protocolo Chrome Devtools. Esse é o mesmo protocolo usado para o Devtools do Chrome e várias outras ferramentas. Com ele, uma pode solicitar e executar código remoto. Assim como os scripts de usuário, ele não é que substitui o chrome.scripting, e oferece uma experiência de usuário muito mais notável. Enquanto ele estiver sendo usado, o usuário verá uma barra de aviso no topo do janela. Se o banner for fechado ou dispensado, a sessão de depuração será encerrado.

Captura de tela da barra de endereço no Chrome com a mensagem "A extensão do depurador começou a depurar este navegador"

Iframes no modo sandbox

Se você precisar avaliar uma string como código e estiver em um ambiente DOM (por exemplo, um script de conteúdo, em vez de um service worker de extensão), outra opção é usar um iframe em sandbox. As extensões não oferecem suporte a recursos como eval() por padrão como uma precaução de segurança. Código malicioso pode colocar a segurança do usuário e a segurança em risco. No entanto, quando o código só é executado em um sistema ambiente, como um iframe que foi colocado em sandbox do resto da Web, esses riscos serão bastante reduzidos. Nesse contexto, a equipe de Segurança de conteúdo A política que bloqueia o uso de avaliação pode ser suspensa, permitindo que você execute qualquer código JavaScript válido.

Se você tiver um caso de uso que não foi abordado, fique à vontade para entrar em contato com a equipe usando a lista de e-mails chromium-extensions para receber feedback ou abra uma nova tíquete para solicitar orientação do suporte completo

O que fazer se você discordar de um veredito

A aplicação de políticas pode ter nuances, e a revisão envolve entrada manual, o que significa a equipe da Chrome Web Store pode, às vezes, concordar em alterar uma decisão de avaliação. Se você acredita que um erro foi cometido durante a análise, conteste a rejeição usando o suporte único