From 04faf5ba32304591190486302f0bc4e6a892cba1 Mon Sep 17 00:00:00 2001 From: JarielGFox Date: Wed, 9 Aug 2023 21:59:39 +0200 Subject: [PATCH 1/6] traduzione di production-deployment.md --- .../best-practices/production-deployment.md | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/src/guide/best-practices/production-deployment.md b/src/guide/best-practices/production-deployment.md index 3948d4ab..ffe7bd13 100644 --- a/src/guide/best-practices/production-deployment.md +++ b/src/guide/best-practices/production-deployment.md @@ -1,44 +1,44 @@ -# Production Deployment {#production-deployment} +# Rilascio in produzione {#rilascio-produzione} -## Development vs. Production {#development-vs-production} +## Sviluppo vs. Produzione {#sviluppo-vs-produzione} -During development, Vue provides a number of features to improve the development experience: +Durante lo sviluppo, Vue mette a disposizione un numero di funzionalità per migliorare l'esperienza di sviluppo nella sua interezza: -- Warning for common errors and pitfalls -- Props / events validation -- [Reactivity debugging hooks](/guide/extras/reactivity-in-depth#reactivity-debugging) -- Devtools integration +- Avvisi per errori comuni ed incidenti di percorso +- Props / validazione degli eventi +- [hooks per la reattività del debugging](/guide/extras/reactivity-in-depth#reactivity-debugging) +- Integrazione degli strumenti di sviluppo -However, these features become useless in production. Some of the warning checks can also incur a small amount of performance overhead. When deploying to production, we should drop all the unused, development-only code branches for smaller payload size and better performance. +Tuttavia, alcune di queste funzionalità diventano inutili in produzione. Alcuni avvisi di controllo possono andare incontro a piccoli costi riguardo le performance. Quando ci si prepara per il rilascio in produzione dovremmo abbandonare tutti i branch di solo sviluppo non utilizzati, affinchè si ottenga un carico delle suddette performance minore, per migliorarne la qualità. -## Without Build Tools {#without-build-tools} +## Senza strumenti di versionamento {#senza-strumenti-di-versione} -If you are using Vue without a build tool by loading it from a CDN or self-hosted script, make sure to use the production build (dist files that end in `.prod.js`) when deploying to production. Production builds are pre-minified with all development-only code branches removed. +Se ci si trova ad usare Vue senza strumenti di versionamento, ossia caricandolo da una CDN o da uno script autosufficiente, ci si raccomanda di usare il versionamento di produzione (file dist con nomenclatura `.prod.js`) in fase di rilascio. Le versioni di produzione sono pre-compresse (minified) con tutti i branch di sviluppo rimossi. -- If using global build (accessing via the `Vue` global): use `vue.global.prod.js`. -- If using ESM build (accessing via native ESM imports): use `vue.esm-browser.prod.js`. +- Se si decide di usare il versionamento globale (accedendovi tramite la `Vue` global): usare `vue.global.prod.js`. +- Se si decide di usare il versionamento ESM (accedendovi tramite gli import nativi ESM): utilizzare `vue.esm-browser.prod.js`. -Consult the [dist file guide](https://github.com/vuejs/core/tree/main/packages/vue#which-dist-file-to-use) for more details. +Consultare la [guida ai file dist](https://github.com/vuejs/core/tree/main/packages/vue#which-dist-file-to-use) per maggiori dettagli. -## With Build Tools {#with-build-tools} +## Con strumenti di versionamento {#con-strumenti-di-versione} -Projects scaffolded via `create-vue` (based on Vite) or Vue CLI (based on webpack) are pre-configured for production builds. +Progetti montati tramite `create-vue` (basati su Vite) o Vue CLI (basato su webpack) sono pre-configurati per versionamenti di produzione. -If using a custom setup, make sure that: +Se invece ci si trova a dover usare un'installazione personalizzata, si raccomanda di: -1. `vue` resolves to `vue.runtime.esm-bundler.js`. -2. The [compile time feature flags](https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags) are properly configured. -3. process.env.NODE_ENV is replaced with `"production"` during build. +1. `vue` si trasforma in `vue.runtime.esm-bundler.js`. +2. I [flag di funzionalità](https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags) sono correttamente configurati. +3. process.env.NODE_ENV è sostituito con `"production"` durante il versionamento. -Additional references: +Fonti addizionali: -- [Vite production build guide](https://vitejs.dev/guide/build.html) -- [Vite deployment guide](https://vitejs.dev/guide/static-deploy.html) -- [Vue CLI deployment guide](https://cli.vuejs.org/guide/deployment.html) +- [guida al versionamento in produzione di Vite](https://vitejs.dev/guide/build.html) +- [guida di Vite riguardante il rilascio](https://vitejs.dev/guide/static-deploy.html) +- [guida di Vue CLI riguardante il rilascio](https://cli.vuejs.org/guide/deployment.html) -## Tracking Runtime Errors {#tracking-runtime-errors} +## Seguire gli errori di runtime {#seguire-errori-runtime} -The [app-level error handler](/api/application#app-config-errorhandler) can be used to report errors to tracking services: +Lo strumento [gestore degli errori a livello di app](/api/application#app-config-errorhandler) può essere utilizzato per riferire suddetti errori agli assistenti al monitoraggio (degli errori): ```js import { createApp } from 'vue' @@ -46,8 +46,8 @@ import { createApp } from 'vue' const app = createApp(...) app.config.errorHandler = (err, instance, info) => { - // report error to tracking services + // riporta l'errore agli assistenti al monitoraggio errori } ``` -Services such as [Sentry](https://docs.sentry.io/platforms/javascript/guides/vue/) and [Bugsnag](https://docs.bugsnag.com/platforms/javascript/vue/) also provide official integrations for Vue. +Tra questi assisenti di monitoraggio dell'errore abbiamo [Sentry](https://docs.sentry.io/platforms/javascript/guides/vue/) e [Bugsnag](https://docs.bugsnag.com/platforms/javascript/vue/) che a sua volta dispone di integrazione ufficiale per Vue. From baee959aa2369451be2aff4ac7f2ac1b89bde435 Mon Sep 17 00:00:00 2001 From: JarielGFox Date: Fri, 11 Aug 2023 21:02:58 +0200 Subject: [PATCH 2/6] test branch-18 push --- src/guide/best-practices/production-deployment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/best-practices/production-deployment.md b/src/guide/best-practices/production-deployment.md index ffe7bd13..67fcd586 100644 --- a/src/guide/best-practices/production-deployment.md +++ b/src/guide/best-practices/production-deployment.md @@ -50,4 +50,4 @@ app.config.errorHandler = (err, instance, info) => { } ``` -Tra questi assisenti di monitoraggio dell'errore abbiamo [Sentry](https://docs.sentry.io/platforms/javascript/guides/vue/) e [Bugsnag](https://docs.bugsnag.com/platforms/javascript/vue/) che a sua volta dispone di integrazione ufficiale per Vue. +Tra questi assisenti di monitoraggio dell'errore abbiamo [Sentry](https://docs.sentry.io/platforms/javascript/guides/vue/) e [Bugsnag](https://docs.bugsnag.com/platforms/javascript/vue/) che a sua volta dispone di integrazione ufficiale per Vue.. From d959a6919d7622c4c2e2a07bade87dcbac466e84 Mon Sep 17 00:00:00 2001 From: JarielGFox Date: Fri, 11 Aug 2023 21:29:33 +0200 Subject: [PATCH 3/6] =?UTF-8?q?corretti=20gli=20anchor=20tra=20le=20graffe?= =?UTF-8?q?,=20sostituito=20versionamento=20con=20build=20e=20migliorata?= =?UTF-8?q?=20la=20leggibilit=C3=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../best-practices/production-deployment.md | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/guide/best-practices/production-deployment.md b/src/guide/best-practices/production-deployment.md index 67fcd586..d8ba9c4e 100644 --- a/src/guide/best-practices/production-deployment.md +++ b/src/guide/best-practices/production-deployment.md @@ -1,6 +1,6 @@ -# Rilascio in produzione {#rilascio-produzione} +# Rilascio in produzione {#production-deployment} -## Sviluppo vs. Produzione {#sviluppo-vs-produzione} +## Sviluppo vs. Produzione {#development-vs-production} Durante lo sviluppo, Vue mette a disposizione un numero di funzionalità per migliorare l'esperienza di sviluppo nella sua interezza: @@ -9,36 +9,36 @@ Durante lo sviluppo, Vue mette a disposizione un numero di funzionalità per mig - [hooks per la reattività del debugging](/guide/extras/reactivity-in-depth#reactivity-debugging) - Integrazione degli strumenti di sviluppo -Tuttavia, alcune di queste funzionalità diventano inutili in produzione. Alcuni avvisi di controllo possono andare incontro a piccoli costi riguardo le performance. Quando ci si prepara per il rilascio in produzione dovremmo abbandonare tutti i branch di solo sviluppo non utilizzati, affinchè si ottenga un carico delle suddette performance minore, per migliorarne la qualità. +Alcune di queste funzionalità diventano inutili in produzione. Diversi avvisi di controllo possono andare incontro ad alcuni costi di performance. Quando ci si prepara per il rilascio in produzione, dovremmo abbandonare tutti i branch di solo sviluppo non utilizzati, affinchè si ottenga un carico minore delle suddette performance, per migliorarne la qualità. -## Senza strumenti di versionamento {#senza-strumenti-di-versione} +## Senza strumenti di build {#without-build-tools} -Se ci si trova ad usare Vue senza strumenti di versionamento, ossia caricandolo da una CDN o da uno script autosufficiente, ci si raccomanda di usare il versionamento di produzione (file dist con nomenclatura `.prod.js`) in fase di rilascio. Le versioni di produzione sono pre-compresse (minified) con tutti i branch di sviluppo rimossi. +Se ci si trova ad usare Vue senza strumenti di build, ossia caricandolo da una CDN o da uno script autosufficiente, ci si raccomanda di usare il build di produzione (file dist con nomenclatura `.prod.js`) in fase di rilascio. Le versioni di produzione sono pre-compresse (minified) con tutti i branch di sviluppo rimossi. -- Se si decide di usare il versionamento globale (accedendovi tramite la `Vue` global): usare `vue.global.prod.js`. -- Se si decide di usare il versionamento ESM (accedendovi tramite gli import nativi ESM): utilizzare `vue.esm-browser.prod.js`. +- Se si decide di usare il build globale (accedendovi tramite la `Vue` global): usare `vue.global.prod.js`. +- Se si decide di usare il build ESM (accedendovi tramite gli import nativi ESM): utilizzare `vue.esm-browser.prod.js`. Consultare la [guida ai file dist](https://github.com/vuejs/core/tree/main/packages/vue#which-dist-file-to-use) per maggiori dettagli. -## Con strumenti di versionamento {#con-strumenti-di-versione} +## Con strumenti di build {#with-build-tools} -Progetti montati tramite `create-vue` (basati su Vite) o Vue CLI (basato su webpack) sono pre-configurati per versionamenti di produzione. +Progetti montati tramite `create-vue` (basati su Vite) o Vue CLI (basato su webpack) sono pre-configurati per build di produzione. Se invece ci si trova a dover usare un'installazione personalizzata, si raccomanda di: 1. `vue` si trasforma in `vue.runtime.esm-bundler.js`. 2. I [flag di funzionalità](https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags) sono correttamente configurati. -3. process.env.NODE_ENV è sostituito con `"production"` durante il versionamento. +3. process.env.NODE_ENV è sostituito con `"production"` durante il build. Fonti addizionali: -- [guida al versionamento in produzione di Vite](https://vitejs.dev/guide/build.html) +- [guida di Vite al build in produzione](https://vitejs.dev/guide/build.html) - [guida di Vite riguardante il rilascio](https://vitejs.dev/guide/static-deploy.html) - [guida di Vue CLI riguardante il rilascio](https://cli.vuejs.org/guide/deployment.html) -## Seguire gli errori di runtime {#seguire-errori-runtime} +## Seguire gli errori di runtime {#tracking-runtime-errors} -Lo strumento [gestore degli errori a livello di app](/api/application#app-config-errorhandler) può essere utilizzato per riferire suddetti errori agli assistenti al monitoraggio (degli errori): +Lo strumento [gestore degli errori a livello di app](/api/application#app-config-errorhandler) può essere utilizzato per riportare suddetti errori agli assistenti al monitoraggio: ```js import { createApp } from 'vue' @@ -46,8 +46,8 @@ import { createApp } from 'vue' const app = createApp(...) app.config.errorHandler = (err, instance, info) => { - // riporta l'errore agli assistenti al monitoraggio errori + // riporta l'errore agli assistenti al monitoraggio } ``` -Tra questi assisenti di monitoraggio dell'errore abbiamo [Sentry](https://docs.sentry.io/platforms/javascript/guides/vue/) e [Bugsnag](https://docs.bugsnag.com/platforms/javascript/vue/) che a sua volta dispone di integrazione ufficiale per Vue.. +Tra questi assisenti di monitoraggio (dell'errore) abbiamo [Sentry](https://docs.sentry.io/platforms/javascript/guides/vue/) e [Bugsnag](https://docs.bugsnag.com/platforms/javascript/vue/) che a sua volta dispone di integrazione ufficiale per Vue. From 5beeaec139357af992d69328a4a74f6a6c998d93 Mon Sep 17 00:00:00 2001 From: Giovanni Crudele Date: Thu, 17 Aug 2023 17:35:47 +0200 Subject: [PATCH 4/6] rivisto production-deployment e tradotto la prima versione di security.md --- .../best-practices/production-deployment.md | 24 ++-- src/guide/best-practices/security.md | 110 +++++++++--------- 2 files changed, 67 insertions(+), 67 deletions(-) diff --git a/src/guide/best-practices/production-deployment.md b/src/guide/best-practices/production-deployment.md index d8ba9c4e..f19905dc 100644 --- a/src/guide/best-practices/production-deployment.md +++ b/src/guide/best-practices/production-deployment.md @@ -13,32 +13,32 @@ Alcune di queste funzionalità diventano inutili in produzione. Diversi avvisi d ## Senza strumenti di build {#without-build-tools} -Se ci si trova ad usare Vue senza strumenti di build, ossia caricandolo da una CDN o da uno script autosufficiente, ci si raccomanda di usare il build di produzione (file dist con nomenclatura `.prod.js`) in fase di rilascio. Le versioni di produzione sono pre-compresse (minified) con tutti i branch di sviluppo rimossi. +Se ci si trova ad usare Vue senza strumenti di build, ossia caricandolo da una CDN o da uno script hostato privatamente, ci si raccomanda di usare la build di produzione (file dist con nomenclatura `.prod.js`) in fase di rilascio. Le versioni di produzione sono pre-compresse (minified) con tutti i branch di sviluppo rimossi. -- Se si decide di usare il build globale (accedendovi tramite la `Vue` global): usare `vue.global.prod.js`. -- Se si decide di usare il build ESM (accedendovi tramite gli import nativi ESM): utilizzare `vue.esm-browser.prod.js`. +- Se si decide di usare la build globale (accedendovi tramite la `Vue` global): usare `vue.global.prod.js`. +- Se si decide di usare la build ESM (accedendovi tramite gli import nativi ESM): utilizzare `vue.esm-browser.prod.js`. Consultare la [guida ai file dist](https://github.com/vuejs/core/tree/main/packages/vue#which-dist-file-to-use) per maggiori dettagli. ## Con strumenti di build {#with-build-tools} -Progetti montati tramite `create-vue` (basati su Vite) o Vue CLI (basato su webpack) sono pre-configurati per build di produzione. +Progetti montati tramite `create-vue` (basati su Vite) o Vue CLI (basato su webpack) sono pre-configurati per le build di produzione. Se invece ci si trova a dover usare un'installazione personalizzata, si raccomanda di: 1. `vue` si trasforma in `vue.runtime.esm-bundler.js`. -2. I [flag di funzionalità](https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags) sono correttamente configurati. -3. process.env.NODE_ENV è sostituito con `"production"` durante il build. +2. I [flag di funzionalità alla compilazione](https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags) (bundler build feature flags) sono correttamente configurati. +3. process.env.NODE_ENV è sostituito con `"production"` durante la build. Fonti addizionali: -- [guida di Vite al build in produzione](https://vitejs.dev/guide/build.html) -- [guida di Vite riguardante il rilascio](https://vitejs.dev/guide/static-deploy.html) -- [guida di Vue CLI riguardante il rilascio](https://cli.vuejs.org/guide/deployment.html) +- [guila alla build di produzione con Vite](https://vitejs.dev/guide/build.html) +- [guida al rilascio con Vite](https://vitejs.dev/guide/static-deploy.html) +- [guida al rilascio con VueCLI](https://cli.vuejs.org/guide/deployment.html) ## Seguire gli errori di runtime {#tracking-runtime-errors} -Lo strumento [gestore degli errori a livello di app](/api/application#app-config-errorhandler) può essere utilizzato per riportare suddetti errori agli assistenti al monitoraggio: +Lo strumento [handler di errori a livello di app](/api/application#app-config-errorhandler) può essere utilizzato per riportare suddetti errori ai servizi di tracciamento: ```js import { createApp } from 'vue' @@ -46,8 +46,8 @@ import { createApp } from 'vue' const app = createApp(...) app.config.errorHandler = (err, instance, info) => { - // riporta l'errore agli assistenti al monitoraggio + // riporta l'errore ai servizi di tracciamento } ``` -Tra questi assisenti di monitoraggio (dell'errore) abbiamo [Sentry](https://docs.sentry.io/platforms/javascript/guides/vue/) e [Bugsnag](https://docs.bugsnag.com/platforms/javascript/vue/) che a sua volta dispone di integrazione ufficiale per Vue. +Tra questi servizi di tracciamento (dell'errore) abbiamo [Sentry](https://docs.sentry.io/platforms/javascript/guides/vue/) e [Bugsnag](https://docs.bugsnag.com/platforms/javascript/vue/) che fornisce anche un'integrazione ufficiale per Vue. diff --git a/src/guide/best-practices/security.md b/src/guide/best-practices/security.md index 7bc62b0d..b1b9e9ae 100644 --- a/src/guide/best-practices/security.md +++ b/src/guide/best-practices/security.md @@ -1,50 +1,50 @@ -# Security {#security} +# Sicurezza {#security} -## Reporting Vulnerabilities {#reporting-vulnerabilities} +## Report delle vulnerabilità {#reporting-vulnerabilities} -When a vulnerability is reported, it immediately becomes our top concern, with a full-time contributor dropping everything to work on it. To report a vulnerability, please email [security@vuejs.org](mailto:security@vuejs.org). +Quando una vulnerabilità viene riportata, diventa immediatamente una alta priorità, dedicandovi un collaboratore a tempo pieno. Per riportare una vulnerabilità, basta scrivere una mail a [security@vuejs.org](mailto:security@vuejs.org). -While the discovery of new vulnerabilities is rare, we also recommend always using the latest versions of Vue and its official companion libraries to ensure your application remains as secure as possible. +Nonostante la scoperta di nuove vulnerabilità sia rara, ci si raccomanda sempre di utilizzare l'ultima versione di Vue e le librerie e pacchetti ufficiali, per assicurare che la propria applicazione rimanga il più sicura possibile. -## Rule No.1: Never Use Non-trusted Templates {#rule-no-1-never-use-non-trusted-templates} +## Regola Numero 1: Mai usare template di terze parti {#rule-no-1-never-use-non-trusted-templates} -The most fundamental security rule when using Vue is **never use non-trusted content as your component template**. Doing so is equivalent to allowing arbitrary JavaScript execution in your application - and worse, could lead to server breaches if the code is executed during server-side rendering. An example of such usage: +La regola fondamentale quando si utilizza Vue è **mai utilizzare contenuto di terze parti come componente per il proprio template**. Fare ciò può causare l'esecuzione casuale di JavaScript nella propria applicazione o peggio, se il codice viene eseguito server side può anche portare a violazioni di questo tipo. Un esempio di tale uso, qui di seguito: ```js Vue.createApp({ - template: `
` + userProvidedString + `
` // NEVER DO THIS + template: `
` + userProvidedString + `
` // DA NON FARE }).mount('#app') ``` -Vue templates are compiled into JavaScript, and expressions inside templates will be executed as part of the rendering process. Although the expressions are evaluated against a specific rendering context, due to the complexity of potential global execution environments, it is impractical for a framework like Vue to completely shield you from potential malicious code execution without incurring unrealistic performance overhead. The most straightforward way to avoid this category of problems altogether is to make sure the contents of your Vue templates are always trusted and entirely controlled by you. +I template di Vue sono compilati in JavaScript e le espressioni dentro i template verranno eseguite come parte del processo di rendering. Nonostante le espressioni sono misurate secondo uno specifico contesto di rendering, a causa della potenziale complessità di un ambiente di esecuzione globale, è impraticabile per un framework come Vue proteggersi totalmente dall'esecuzione di codice malevolo senza incappare in visibili costi di performance. La pratica migliore per tenersi lontani da questo tipo di complicazioni, è mantenere il contesto delle proprie applicazioni Vue, con contenuti totalmente sicuri e controllati in autonomia. -## What Vue Does to Protect You {#what-vue-does-to-protect-you} +## Cosa fa Vue per garantirti sicurezza {#what-vue-does-to-protect-you} -### HTML content {#html-content} +### Contenuto HTML {#html-content} -Whether using templates or render functions, content is automatically escaped. That means in this template: +Usando template o funzioni di render, il contenuto è automaticamente al sicuro tramite escaping. Ad esempio in questo template: ```vue-html

{{ userProvidedString }}

``` -if `userProvidedString` contained: +se `userProvidedString` contenesse: ```js '' ``` -then it would be escaped to the following HTML: +si rende sicuro con escaping come nell'esempio seguente in HTML: ```vue-html <script>alert("hi")</script> ``` -thus preventing the script injection. This escaping is done using native browser APIs, like `textContent`, so a vulnerability can only exist if the browser itself is vulnerable. +prevenendo quindi iniezioni di script. Questa tecnica di sicurezza (escaping) viene fatta utilizzando una API nativa del browser come `textContent`, quindi una vulnerabilità può esistere solo nel browser se vulnerabile. -### Attribute bindings {#attribute-bindings} +### Binding degli attributi {#attribute-bindings} -Similarly, dynamic attribute bindings are also automatically escaped. That means in this template: +In maniera simile, il binding degli attributi sono anch'essi protetti da escaping. Possiamo vedere nel seguente template: ```vue-html

@@ -52,37 +52,37 @@ Similarly, dynamic attribute bindings are also automatically escaped. That means

``` -if `userProvidedString` contained: +se `userProvidedString` contenesse: ```js '" onclick="alert(\'hi\')' ``` -then it would be escaped to the following HTML: +sarebbe protetto con l'escaping tramite il seguente HTML: ```vue-html " onclick="alert('hi') ``` -thus preventing the close of the `title` attribute to inject new, arbitrary HTML. This escaping is done using native browser APIs, like `setAttribute`, so a vulnerability can only exist if the browser itself is vulnerable. +perciò preveniamo la chiusura dell'attributo `title` per iniettare nuovo HTML casuale. Questo escaping viene fatto utilizzando l'API nativa del browser: `setAttribute`, così una vulnerabilità può esistere solo se il browser è vulnerabile. -## Potential Dangers {#potential-dangers} +## Potenziali Pericoli {#potential-dangers} -In any web application, allowing unsanitized, user-provided content to be executed as HTML, CSS, or JavaScript is potentially dangerous, so it should be avoided wherever possible. There are times when some risk may be acceptable, though. +In ogni applicazione web, permettere l'uso di contenuti di terze parti eseguito tramite HTML, CSS e JavaScript è potenzialmente dannoso, quindi andrebbe evitato ovunque possibile. Alcune volte però il rischio è accettabile. -For example, services like CodePen and JSFiddle allow user-provided content to be executed, but it's in a context where this is expected and sandboxed to some extent inside iframes. In the cases when an important feature inherently requires some level of vulnerability, it's up to your team to weigh the importance of the feature against the worst-case scenarios the vulnerability enables. +Ad esempio, servizi come CodePen e JSFiddle permettono di eseguire contenuti forniti dagli utenti, ma è in un contesto sia previsto che reso come sandbox all'interno di iframes. Nei casi in cui una feature importante richieda per forza di cose un livello accettabile di vulnerabilità, spetta al team di sviluppo soppesare l'importanza della feature contro i casi peggiori in cui la vulnerabilità si possa presentare. -### HTML Injection {#html-injection} +### Iniezione di HTML {#html-injection} -As you learned earlier, Vue automatically escapes HTML content, preventing you from accidentally injecting executable HTML into your application. However, **in cases where you know the HTML is safe**, you can explicitly render HTML content: +Come abbiamo detto sopra, Vue automaticamente mette al sicuro con escaping il contenuto HTML, evitando di iniettare accidentalmente codice HTML nella propria applicazione. Però, **in casi in cui si sa che l'HTML è sicuro**, si può esplicitamente prestare contenuto HTML: -- Using a template: +- Usando un template: ```vue-html
``` -- Using a render function: +- Usando una funzione di render: ```js h('div', { @@ -90,50 +90,50 @@ As you learned earlier, Vue automatically escapes HTML content, preventing you f }) ``` -- Using a render function with JSX: +- Usando una funzione di render con JSX: ```jsx
``` -:::warning -User-provided HTML can never be considered 100% safe unless it's in a sandboxed iframe or in a part of the app where only the user who wrote that HTML can ever be exposed to it. Additionally, allowing users to write their own Vue templates brings similar dangers. +:::attenzione +Il contenuto HTML fornito da qualsiasi utente non può mai essere considerato al 100% sicuro a meno che non è inserito in un iframe di sandbox oppure in una parte dell'applicazione in cui solo l'utente che ha scritto quel codice HTML può esservi esposto. In maniera addizionale, permettere agli utenti di scrivere i loro template Vue può portare vulnerabilità simili. ::: -### URL Injection {#url-injection} +### Iniezione tramite URL {#url-injection} -In a URL like this: +In un URL come questo: ```vue-html - click me + cliccami ``` -There's a potential security issue if the URL has not been "sanitized" to prevent JavaScript execution using `javascript:`. There are libraries such as [sanitize-url](https://www.npmjs.com/package/@braintree/sanitize-url) to help with this, but note: if you're ever doing URL sanitization on the frontend, you already have a security issue. **User-provided URLs should always be sanitized by your backend before even being saved to a database.** Then the problem is avoided for _every_ client connecting to your API, including native mobile apps. Also note that even with sanitized URLs, Vue cannot help you guarantee that they lead to safe destinations. +Ci può essere un potenziale problema di sicurezza se l'URL non è stato "disinfettato" in maniera da prevenire l'esecuzione tramite JavaScript. Ci sono librerie come [sanitize-url](https://www.npmjs.com/package/@braintree/sanitize-url) che servono a tale scopo, ma attenzione: se ci si trova a fare una pulizia degli URL sul frontend, si ha già un problema di sicurezza. **url che provengono lato utente devono essere sempre controllati ed approvati dal proprio backend prima anche solo di essere memorizzati su un database.** In seguito il problema viene evitato per _ogni_ client che si collega al proprio API, ciò include anche le mobile app native. Da notare bene che anche con URL puliti, Vue non può garantire che direzioneranno ad un indirizzo sicuro. -### Style Injection {#style-injection} +### Iniezioni nello stile {#style-injection} -Looking at this example: +Guardando questo esempio: ```vue-html - click me + cliccami ``` -Let's assume that `sanitizedUrl` has been sanitized, so that it's definitely a real URL and not JavaScript. With the `userProvidedStyles`, malicious users could still provide CSS to "click jack", e.g. styling the link into a transparent box over the "Log in" button. Then if `https://user-controlled-website.com/` is built to resemble the login page of your application, they might have just captured a user's real login information. +Diamo per scontato che `sanitizedUrl` è stato pulito, quindi è definitivamente un URL reale e non codice JavaScript. Con `userProvidedStyles`, utenti malevoli potrebbero utilizzare CSS per fare "click jack", ad esempio stilizzare un link in un box trasparente al di sopra del bottone di "Log In". Quindi, se `https://user-controlled-website.com/` è montato per raffigurare la pagina di login della propria applicazione, (gli utenti malevoli) potrebbero aver intercettato le reali informazioni di login di un ignaro utente. -You may be able to imagine how allowing user-provided content for a ` ``` -To keep your users fully safe from clickjacking, we recommend only allowing full control over CSS inside a sandboxed iframe. Alternatively, when providing user control through a style binding, we recommend using its [object syntax](/guide/essentials/class-and-style#binding-to-objects-1) and only allowing users to provide values for specific properties it's safe for them to control, like this: +Per mettere in sicurezza totalmente gli utenti e proteggergli dal "clickjacking", ci si raccomanda di permettere il totale controllo del CSS solo all'interno di un iframe in ambiente di sandbox. In alternativa, quando si permette il controllo all'utente tramite un bind di stile, si raccomanda l'uso della [object syntax](/guide/essentials/class-and-style#binding-to-objects-1) e permettere soltanto agli utenti di fornire valori per specifiche proprietà che per loro è sicuro da controllare, ad esempio così: ```vue-html - click me + cliccami ``` -### JavaScript Injection {#javascript-injection} +### Iniezione tramite JavaScript {#javascript-injection} -We strongly discourage ever rendering a `