diff --git a/src/guide/best-practices/security.md b/src/guide/best-practices/security.md index 1c87dbcd..d5faf79a 100644 --- a/src/guide/best-practices/security.md +++ b/src/guide/best-practices/security.md @@ -1,28 +1,28 @@ # Segurança {#security} -## Reportando Vulnerabilidades {#reporting-vulnerabilities} +## Relatório de Vulnerabilidades {#reporting-vulnerabilities} -Quando uma vulnerabilidade é reportada, ela torna-se imediatamente a nossa máxima preocupação, com um colaborar em tempo integral largando tudo para trabalhar sobre ela. Para reportar uma vulnerabilidade, envie um correio-eletrónico para [security@vuejs.org](mailto:security@vuejs.org). +Quando uma vulnerabilidade é reportada, ela imediatamente se torna nossa principal preocupação, com um colaborar em tempo integral largando tudo para trabalhar nela. Para relatar uma vulnerabilidade, envie um e-mail para [security@vuejs.org](mailto:security@vuejs.org). -Embora a descoberta de novas vulnerabilidades seja rara, também recomendamos sempre usar as versões mais recentes da Vue e suas bibliotecas acompanhantes oficiais para assegurar que a tua aplicação continue a mais segura possível. +Embora a descoberta de novas vulnerabilidades seja rara, também recomendamos sempre usar as versões mais recentes do Vue e suas bibliotecas oficiais para garatinr que sua aplicação permaneça a mais segura possível. ## Regra Nº1: Nunca Usar Modelos de Marcação Duvidosos {#rule-no-1-never-use-non-trusted-templates} -A regra de segurança mais fundamental quando estiveres a usar a Vue é **nunca usar conteúdo duvidoso como modelo de marcação do teu componente**. Fazer isto é equivalente a permitir a execução de JavaScript arbitrário na tua aplicação - e pior, poderia levar à servir brechas se o código for executado durante a interpretação no lado do servidor. Um exemplo de tal uso seria: +A regra de segurança mais fundamental ao usar o Vue é **nunca usar conteúdo não confiável como modelo de marcação do componente**. Fazer isso equivale a permitir a execução arbitrária de JavaScript na sua aplicação - e pior, pode levar a violações se o código for executado durante a renderização no lado do servidor. Um exemplo desse uso: ```js Vue.createApp({ - template: `
` + userProvidedString + `
` // NUNCA FAZER ISTO + template: `
` + userProvidedString + `
` // NUNCA FAÇA ISTO }).mount('#app') ``` -Os modelos de marcação de Vue são compilados para JavaScript, e as expressões dentro dos modelos de marcação serão executadas como parte do processo de interpretação. Embora as expressões sejam avaliadas contra um contexto de interpretação específico, por causa da complexidade dos potenciais ambientes de execução global, é inviável para uma abstração como a Vue proteger-te completamente da potencial execução de código malicioso sem sofrer com as despesas gerais de desempenho irrealistas. A maneira mais direta de evitar esta categoria de problemas no conjunto é certificar-se de que os conteúdos dos teus modelos de marcação da Vue sejam sempre de confiança e inteiramente controlados por ti. +Os modelos de marcação Vue são compilados em JavaScript, e as expressões dentro dos modelos de marcação serão executadas como parte do processo de renderização. Embora as expressões sejam avaliadas em relação a um contexto de renderização específico, devido à complexidade dos potenciais ambientes de execução global, é inviável para uma estrutura como o Vue protegê-lo completamente da possível execução de código malicioso sem sofrer com as despesas gerais de desempenho irrealistas. A maneira mais direta de evitar essa categoria de problemas é garantir que o conteúdo dos seus modelos Vue seja sempre confiável e totalmente controlado por você. -## O Que a Vue Faz Para Proteger-te {#what-vue-does-to-protect-you} +## O Que Vue Faz Para Proteger-te {#what-vue-does-to-protect-you} -### Conteúdo de HTML {#html-content} +### Conteúdo HTML {#html-content} -Quer estejas usando os modelos de marcação ou funções de interpretação, o conteúdo é escapado automaticamente. Isto significa que neste modelo de marcação: +Seja usando os modelos de marcação ou funções de renderização, o conteúdo é escapado automaticamente. Isto significa que neste modelo: ```vue-html

{{ userProvidedString }}

@@ -40,9 +40,9 @@ Então seria escapado para o seguinte HTML: <script>alert("hi")</script> ``` -Assim evitando a injeção de programa. Este escapamento é feito usando as APIs nativas do navegador, como `textContent`, assim uma vulnerabilidade apenas pode existir se o próprio navegador estiver vulnerável. +Assim evitando a injeção de script. Este escapamento é feito usando as APIs nativas do navegador, como `textContent`, assim uma vulnerabilidade apenas pode existir se o próprio navegador estiver vulnerável. -### Vínculos de Atributos {#attribute-bindings} +### Vínculação de Atributos {#attribute-bindings} Similarmente, os vínculos de atributos dinâmicos também são escapados automaticamente. Isto significa que neste modelo de marcação: @@ -66,15 +66,15 @@ Então seria escapado para o seguinte HTML: Assim evitando o fechamento do atributo `title` para injetar HTML novo e arbitrário. Este escapamento é feito usando as APIs nativas do navegador, como `setAttribute`, assim uma vulnerabilidade apenas pode existir se o próprio navegador estiver vulnerável. -## Possíveis Perigos {#potential-dangers} +## Perigos Potenciais {#potential-dangers} -Em qualquer aplicação de web, permitir conteúdo não desinfetado, fornecido pelo utilizador ser executado como HTML, CSS, ou JavaScript é potencialmente perigoso, então deve ser evitado onde quer que for possível. Mas existem momentos quando o risco pode ser aceitável. +Em qualquer aplicação web, permitir conteúdo não desinfetado, fornecido pelo usuário ser executado como HTML, CSS, ou JavaScript é potencialmente perigoso, então deve ser evitado onde quer que for possível. Há momentos em que algum risco pode ser aceitável. -Por exemplo, serviços como CodePen e JSFiddle permitem que o conteúdo fornecido pelo utilizador seja executado, mas está em um contexto onde este é esperado e isolado em uma caixa de areia para alguma extensão dentro de elementos de `iframe`. Nestes casos onde uma funcionalidade importante inerentemente requer algum nível de vulnerabilidade, está sobre à tua equipa pesar a importância da funcionalidade contra os cenários de piores caso que a vulnerabilidade possibilita. +Por exemplo, serviços como CodePen e JSFiddle permitem que o conteúdo fornecido pelo usuário seja executado, mas está em um contexto onde este é esperado e isolado em uma área restrita até certo ponto dentro de `iframe`. Nestes casos onde uma funcionalidade importante exige inerentemente algum nível de vulnerabilidade, está sobre o seu time avaliar a importância do recurso em relação aos piores cenários que a vulnerabilidade permite. ### Injeção de HTML {#html-injection} -Conforme aprendeste anteriormente, a Vue escapa automaticamente o conteúdo de HTML, impedindo-te de acidentalmente injetar HTML executável para dentro da tua aplicação. No entanto, **em casos onde sabes que o HTML é seguro**, podes explicitamente interpretar o conteúdo do HTML: +Conforme foi aprendido anteriormente, no Vue escapa automaticamente o conteúdo HTML, evitando de acidentalmente injetar HTML executável para dentro da sua aplicação. No entanto, **em casos onde é sabido que o HTML é seguro**, pode explicitamente renderizar o conteúdo HTML: - Usando um modelo de marcação: @@ -82,7 +82,7 @@ Conforme aprendeste anteriormente, a Vue escapa automaticamente o conteúdo de H
``` -- Usando uma função de interpretação: +- Usando uma função de renderização: ```js h('div', { @@ -90,19 +90,19 @@ Conforme aprendeste anteriormente, a Vue escapa automaticamente o conteúdo de H }) ``` -- Usando uma função de interpretação com JSX: +- Usando uma função de renderização com JSX: ```jsx
``` :::warning AVISO -O HTML fornecido pelo utilizador nunca pode ser considerado 100% seguro a menos que seja um `iframe` isolado em uma caixa de areia ou em uma parte da aplicação onde apenas o utilizador que escreveu aquele HTML pode sempre ser exposto à ele. Adicionalmente, permitir que os utilizadores escrevam seus próprios modelos de marcação de Vue atrai perigos parecidos. +O HTML fornecido pelo usuário nunca pode ser considerado 100% seguro a menos que seja um `iframe` isolado em uma área restrita ou em uma parte da aplicação onde apenas o usuário que escreveu aquele HTML pode sempre ser exposto à ele. Adicionalmente, permitir que os usuárioes escrevam seus próprios modelos de marcação de Vue atrai perigos parecidos. ::: ### Injeção de URL {#url-injection} -Numa URL como esta: +Em uma URL como esta: ```vue-html @@ -110,11 +110,11 @@ Numa URL como esta: ``` -Existe um possível problema de segurança se a URL não tiver sido "desinfetada" para evitar a execução de JavaScript usando `javascript:`. Existem bibliotecas tais como [`sanitize-url`](https://www.npmjs.com/package/@braintree/sanitize-url) para ajudar com isto, mas nota: se estiveres sempre a fazer a desinfeção no frontend, já tens um problema de segurança. **As URLs fornecidas pelo utilizador deveriam sempre ser desinfetadas no teu backend antes mesmo de serem guardadas em uma base de dados.** Portanto o problema é evitado para _todos_ os clientes conectando-se à tua API, incluindo aplicações móveis nativas. Também nota que mesmo com URLs desinfetadas, a Vue não pode ajudar-te a garantir que conduzam para destinos seguros. +Há um possível problema de segurança se a URL não tiver sido "desinfetada" para evitar a execução de JavaScript usando `javascript:`. Existem bibliotecas como [`sanitize-url`](https://www.npmjs.com/package/@braintree/sanitize-url) para ajudar com isto, mas observe: se estiver fazendo a desinfeção de URL no frontend, já existe um problema de segurança. **URLs fornecidas pelo usuário devem sempre ser desinfetadas no seu backend antes mesmo de serem salvas em uma base de dados.** Portanto o problema é evitado para _todos_ os clientes conectados à sua API, incluindo aplicações móveis nativas. Observe também que mesmo com URLs desinfetadas, o Vue não pode ajudar a garantir que eles levem para destinos seguros. ### Injeção de Estilo {#style-injection} -Olhando neste exemplo: +Olhando para este exemplo: ```vue-html ``` -Suponhamos que `sanitizedUrl` foi desinfetada, para que seja definitivamente uma URL verdadeira e não JavaScript. Com a `userProvidedStyles`, utilizadores maliciosos poderiam continuar a fornecer CSS para "sequestrar o clique", por exemplo estilizando a ligação para um caixa transparente sobre o botão "Log In" (iniciar em Português). Então se `https://user-controlled-website.com/` estiver construída para parecer-se com a página de inicialização da tua aplicação, podem já ter capturado uma informação de inicialização verdadeira do utilizador. +Suponhamos que `sanitizedUrl` tenha sido desinfetada, para que seja definitivamente uma URL verdadeira e não JavaScript. Com a `userProvidedStyles`, usuárioes maliciosos poderiam continuar a fornecer CSS para "sequestrar o clique", por exemplo estilizando a ligação para um caixa transparente sobre o botão "Log In" (iniciar em Português). Então se `https://user-controlled-website.com/` for criado para se parecer com a página de login do seu aplicativo, eles poderão ter capturado apenas as informações reais de login de um usuário. -Tu podes ser capaz de imaginar como permitir que o conteúdo fornecido pelo utilizador para um elemento ` ``` -Para manter os teus utilizadores completamente seguros sequestro de clique, recomendados apenas permitir o controlo completo sobre a CSS dentro de um `iframe` isolado em caixa de areia. Alternativamente, quando estiveres fornecendo controlo de utilizador através de um vínculo de estilo, recomendamos usar a sua [sintaxe de objeto](/guide/essentials/class-and-style#binding-to-objects-1) e permitir apenas que os utilizadores forneçam valores para propriedades específicas que sejam seguros para eles controlarem, como esta: +Para manter seus usuários totalmente seguros de 'sequestro de clique', recomendados permitir apenas o controle completo sobre CSS dentro de um `iframe` isolado em uma àrea restritta. Alternativamente, ao fornecer controle ao usuário por meio de um vínculo de estilo, recomendamos usar a [sintaxe de objeto](/guide/essentials/class-and-style#binding-to-objects-1) e permitir que os usuários forneçam apenas valores para propriedades específicas que sejam seguros para eles controlarem, como este: ```vue-html ` com a Vue, já que os modelos de marcação e funções de interpretação nunca deveriam ter efeitos colaterais. No entanto, isto não é a única maneira de incluir sequências de caracteres que seriam avaliadas como JavaScript em tempo de execução. +Nós sempre discordamos fortemente de interpretar um elemento `