Como testar o novo carregador de framework de extensão

Em breve, o framework de extensão do Looker usará um novo mecanismo de carregamento. O novo carregador pode causar comportamentos inesperados e possíveis erros quando as extensões existentes são carregadas. Para que os desenvolvedores possam testar e atualizar as extensões, esta página descreve como testar o novo carregador de framework de extensão antes de ser oficialmente ativada nos ambientes do Looker.

A data de lançamento dessa atualização ainda não foi determinada. Quando isso acontecer, será fornecido um botão para permitir que os clientes desativem temporariamente o novo método de carregamento. No entanto, em algum momento, será necessário ativar a nova técnica de carregamento para corrigir violações da Política de Segurança de Conteúdo (CSP) e usar o <!DOCTYPE html>.

Mudanças que podem afetar as extensões

Veja a seguir uma lista das mudanças no framework de extensões que podem afetar as extensões:

  • Para corrigir violações da CSP, o HTML é gerado para carregar a extensão no servidor, e não no navegador. Essa mudança não afeta as extensões.
  • A tag base é removida, o que pode afetar a divisão do código personalizado. A tag base foi removida porque o uso dela violou a CSP. No entanto, alguns desenvolvedores podem ter implementado técnicas próprias de divisão de código, que dependiam da tag base. Verifique se a divisão de código ainda funciona ou, se necessário, implemente outras técnicas que não dependam da tag base.
  • O novo carregador usa um preamble <!DOCTYPE html>. Isso pode afetar componentes que usam height: 100%;. É possível atenuar isso usando height: 100vh.

Testar extensões com o novo método de carregamento

A nova técnica de carregamento exige que a instância do Looker esteja executando o Looker 22.4 ou posterior. Ela é ativada usando uma opção de inicialização. A opção de inicialização define um URL que será usado para carregar a extensão. A origem deste URL precisa ser diferente da origem do servidor do Looker. Isso é necessário para que a extensão possa ser colocada no sandbox com segurança.

O procedimento a seguir permite testar extensões com o novo método de carregamento para um único usuário, sem afetar os outros usuários do sistema. Isso é feito gravando o URL de carregamento de extensão no armazenamento da sessão do navegador. O novo mecanismo permanece em vigor até que a sessão do usuário seja concluída OU o usuário exclua o valor do armazenamento da sessão. Espera-se que essa técnica seja usada por desenvolvedores experientes.

Como configurar um servidor proxy HTTP

Antes de ativar o novo método de carregamento de extensões, execute um servidor proxy na máquina local que simule o serviço. Verifique se o Node.js está instalado na sua máquina local e execute o comando a seguir:

npx http-server --port 4000 --proxy https://experiment.dev.looker.com --proxy-options.secure false

Substitua https://experiment.dev.looker.com pelo URL da instância do Looker. Também é possível alterar o número da porta, mas confirme se ele não está em conflito com o número da porta que está sendo usada pelo servidor de desenvolvimento de extensões.

Na primeira vez que você executar esse comando, sua permissão para instalar http-server será solicitada.

Como configurar um servidor proxy HTTPs

Alguns ambientes podem impedir conteúdo HTTP e HTTP misto. Neste caso, um servidor proxy HTTPs precisa ser configurado com um certificado. Para configurar um servidor proxy HTTPs, é necessário gerar um certificado autoassinado. Um pré-requisito é que o openssl esteja instalado no sistema. No diretório em que você planeja executar o servidor proxy HTTPs, execute o seguinte comando:

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

Isso gerará dois arquivos, cert.pem e key.pem.

Para executar o servidor proxy HTTPs, verifique se o Node.js está instalado em sua máquina local e execute o seguinte comando:

npx http-server --port 4000 -S -C cert.pem --proxy https://experiment.dev.looker.com --proxy-options.secure false

Antes de usar o servidor proxy, você precisa autorizar o navegador a usar o certificado autoassinado. Abra o navegador e digite https://localhost:4000. No Chrome, você pode ver um link ou um botão para acessar o servidor, ou pode ser necessário digitar thisisunsafe enquanto a janela do navegador está em foco. No último caso, o texto não será exibido, mas permitirá que você prossiga.

Para mais informações sobre como configurar o http-server para usar https, acesse https://www.npmjs.com/package/http-server.

Como iniciar o teste

  • Se você configurar um servidor proxy HTTP, configure o navegador para usar o proxy com o seguinte URL:

        https://experiment.dev.looker.com/extensions/kitchensink::kitchensink/?LOOKER_EXTENSION_LOAD_URL=http://localhost:4000
        

    Em que:

    • https://experiment.dev.looker.com é o URL da instância do Looker.
    • /kitchensink::kitchensink é o ID da extensão que você quer testar.
    • http://localhost:4000 é o servidor proxy. Modifique o número da porta se você o alterou anteriormente neste procedimento.
  • Se você configurar um servidor proxy HTTPs, configure o navegador para usar o proxy com o seguinte URL:

        https://experiment.dev.looker.com/extensions/kitchensink::kitchensink/?LOOKER_EXTENSION_LOAD_URL=https://localhost:4000
        

    Em que:

    • https://experiment.dev.looker.com é o URL da instância do Looker.
    • /kitchensink::kitchensink é o ID da extensão que você quer testar.
    • https://localhost:4000 é o servidor proxy. Modifique o número da porta se você o alterou anteriormente neste procedimento.

O parâmetro LOOKER_EXTENSION_LOAD_URL será removido imediatamente do URL. Como mencionado anteriormente, o URL do servidor proxy é armazenado no armazenamento de sessão e permanecerá ativo durante a sessão.

Como interromper o teste

Para interromper os testes, insira o seguinte URL:

https://experiment.dev.looker.com/extensions/kitchensink::kitchensink/?LOOKER_EXTENSION_LOAD_URL=

Isso removerá o URL do armazenamento da sessão. Novamente, o parâmetro LOOKER_EXTENSION_LOAD_URL será removido do URL.