Hoje, a nova funcionalidade do segurança do template language torna a linguagem de modelo mais segura do que nunca. Diversos recursos úteis e novas integrações se combinam para criar um ótimo resultado, reduzindo os riscos de ações indesejadas no aplicativo. A versão 2.2.5 foi fruto de um trabalho cuidadoso, que agora renderá bons frutos em termos de qualidade e confiabilidade do módulo.
Integração com DOMPurify
Um dos maiores problemas ao trabalhar com um servidor são os ataques XSS, onde um script indesejado pode ser executado no cliente. No melhor dos casos, seus dados são roubados; no pior, todo o aplicativo da web é desativado.
Para aumentar a segurança do template language, o DOMPurify foi integrado para remover scripts e iframes desnecessários, fornecendo HTML seguro para trabalhar.
Se você usa uma API não controlada, não sabe o que esperar dela, abrindo brechas para ataques. Ou, se você tem uma textarea onde pode inserir HTML, controla a API, mas um usuário pode inserir um script malicioso se o processamento for feito incorretamente.
Vejamos como esse problema foi resolvido em HMPL:
uncontrolled-external-api
const htmlResponse = "HTML from server";
res.type("text/html");
res.send(htmlResponse);
main.js
import { compile } from "hmpl-js";
const templateFn = compile(
`
{
{
src: "/uncontrolled-external-api",
after: "click:.getHTML",
sanitize: true,
indicators: [
{
trigger: "pending",
content: "
"
}
]
}
}
`
);
const wrapper = document.getElementById("wrapper");
const elementObj = templateFn();
wrapper.appendChild(elementObj.response);
Aqui, definimos a propriedade sanitize como true para ativar o modo de segurança. Agora, podemos dizer que o aplicativo web está seguro! Em versões futuras, o tratamento de configuração para DOMPurify será adicionado.
Removendo Tags Manualmente
Se a sanitização total de HTML não for adequada, você pode especificar as tags que serão removidas.
{
{
src: "/controlled-external-api",
after: "click:.getHTML",
disallowedTags: ["iframe"]
}
}
Com a nova propriedade disallowedTags, basta especificar um array com as tags para obter um resultado limitado. Isso é útil, por exemplo, quando temos uma API controlada que implementa publicidade através de um iframe, necessário em um site, mas não no nosso.
Testado Exaustivamente
A cobertura de teste de todo o módulo é de 100%, garantindo que essa funcionalidade tenha o mínimo de bugs possível.
Você pode ver o relatório com os testes no Codecov e os testes em si na pasta test.
Pronto para usar os novos recursos do módulo?
* Node Package Manager: Você pode baixá-lo via npm usando o comando npm i hmpl-js.
* Content Delivery Network: Você pode incluir um arquivo com uma dependência via CDN usando o seguinte código:
* Localmente: Baixe o arquivo para sua máquina local.
* Projeto inicial: Use o comando npx degit hmpl-language/hello-hmpl-starter my-project.
Você pode compartilhar suas opiniões sobre os novos recursos nos comentários ou usar o canal temático no Discord para perguntas e sugestões.
Este projeto é de código aberto, permitindo que você participe e o utilize para fins comerciais.
* Repositório: https://github.com/hmpl-language/hmpl
* Website: https://hmpl-lang.dev
Primeira: Este conteúdo foi auxiliado por Inteligência Artificiado, mas escrito e revisado por um humano.
Segunda: Via Dev.to