Réduisez la surface d'attaque DOM XSS de votre application.
Sûr et sécurisé
Pourquoi devriez-vous vous en soucier?
La secuencia de comandos de sitios cruzados basada en DOM (DOM XSS) es una de las vulnerabilidades de seguridad la toile más comunes, y es muy fácil introducirla en su aplicación. Types de confiance
Brindarle las herramientas para escribir, revisar la seguridad y mantener aplicaciones libres de vulnerabilidades DOM XSS al hacer que las peligrosas funciones de la API web sean seguras de manera predeterminada. Los tipos de confianza son compatibles con Chrome 83 y polyfill está disponible para otros navigateurs. Regarder Compatibilité du navigateur pour obtenir des informations à jour sur la compatibilité entre navigateurs.
Terme clé:
Las secuencias de comandos entre sitios basadas en DOM ocurren cuando los datos de un Nom d'utilisateur controlan
Fontaine (como el nombre de usuario o la URL de redireccionamiento tomada del fragmento de URL) alcanza un couler, qui est une fonction comme eval ()
ou un créateur de propriété comme
.innerHTML
, que puede ejecutar código JavaScript arbitrario.
Antécédents
Pendant de nombreuses années DOM XSS
il s'agit de l'une des vulnérabilités de sécurité Web les plus fréquentes et les plus dangereuses.
Hay dos grupos distintos de secuencias de comandos entre sitios. Algunas vulnerabilidades XSS son causadas por el código del lado del serveur que crea de manera insegura el código HTML que forma el sitio web. Otros tienen una causa raíz en el client, donde el código JavaScript llama a funciones peligrosas con Contenu controlado por el usuario.
À éviter XSS côté serveurVeuillez ne pas générer de HTML par concaténation de chaînes et utiliser des bibliothèques de modèles sécurisées avec échappement automatique contextuel. Utiliser un Politique de sécurité du contenu non basée sur la sécurité pour une atténuation supplémentaire contre les erreurs qui se produisent inévitablement.
Ahora, un le navigateur también puede ayudar a prevenir los XSS del lado del cliente (también conocidos como basados en DOM) con Types de confiance.
Introduction à l'API
Les types d'approbation fonctionnent en bloquant les fonctions de puits de risque suivantes. Vous pouvez déjà reconnaître certains d'entre eux, tels que les fournisseurs de navigateurs et cadres Web vous empêche déjà d'utiliser ces fonctionnalités pour des raisons de sécurité.
-
Manipulation de script:
et configurer le contenu textuel de
éléments.
-
Générer du HTML à partir d'une chaîne:
innerHTML
,externeHTML
,insertAdjacentHTML
,
,
document.write
,document.writeln
yDOMParser.parseFromString
-
Compilation du code JavaScript au moment de l'exécution:
évaluer
,setTimeout
,setInterval
,nouvelle fonction ()
Les types de confiance nécessitent que vous traitiez les données avant de les transmettre aux fonctions de récepteur ci-dessus. Le simple fait d'utiliser une chaîne échouera, car le navigateur ne sait pas si les données sont fiables:
Pas
anElement.innerHTML = location.href;
Lorsque les types approuvés sont activés, le navigateur lance un Faute de frappe et évitez d'utiliser un récepteur DOM XSS avec une chaîne.
Pour indiquer que les données ont été traitées de manière sécurisée, créez un objet spécial: un type de confiance.
Faire
anElement.innerHTML = aTrustedHTML;
Lorsque les types de confiance sont activés, le navigateur accepte un TrustedHTML
objet pour les écouteurs qui attendent des extraits de code HTML. Il y a aussi TrustedScript
y TrustedScriptURL
Objets pour autres puits sensibles.
Les types de confiance réduisent considérablement le DOM XSS surface d'attaque
de votre application. Il simplifie les contrôles de sécurité et vous permet d'appliquer des contrôles de sécurité basés sur le type qui sont effectués lors de la compilation, de la liaison ou de l'empaquetage de votre code au moment de l'exécution, dans le navigateur.
Comment utiliser les types d'approbation
Préparer les rapports de violation de politique de sécurité du contenu
Puede implementar un recopilador de informes (como el de Open source go-csp-collector) ou utilisez l'un des équivalents commerciaux. Vous pouvez également déboguer les violations dans le navigateur:
la fenêtre.addEventListener('securitypolicyviolation',
console.Erreur.bind(console));
Agregue el siguiente encabezado de respuesta HTTP a los documentos que desea migrar a tipos de confianza.
Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example
Désormais, toutes les violations sont signalées à //my-csp-endpoint.example
, mais le site Web fonctionne toujours. La section suivante explique comment //my-csp-endpoint.example
emplois.
Mise en garde:
Les types d'approbation ne sont disponibles que dans contexte sûr
Quoi HTTPS y localhost
.
Identifier les violations de type de confiance
Désormais, chaque fois que Trusted Types détecte une violation, un rapport est envoyé à un rapport-uri
. Par exemple, lorsque votre application transmet une chaîne à innerHTML
, le navigateur envoie le rapport suivant:
{
"csp-report": {
"document-uri": "https://my.url.example",
"violated-directive": "require-trusted-types-for",
"disposition": "report",
"blocked-uri": "trusted-types-sink",
"line-number": 39,
"column-number": 12,
"source-file": "https://my.url.example/script.js",
"status-code": 0,
"script-sample": "Element innerHTML <img src=x"
}
}
Cela dit que dans https://my.url.example/script.js
en ligne 39 innerHTML
a été appelé avec la chaîne commençant par <img src=x
. Ces informations devraient vous aider à déterminer quelles parties de votre code peuvent introduire DOM XSS et devraient changer.
La plupart des violations comme celle-ci peuvent également être détectées en exécutant un linter de code ou vérificateurs de code statiques
dans votre base de code. Cela permet d'identifier rapidement un grand nombre de violations.
Cela dit, vous devez également examiner les violations de CSP car elles sont déclenchées lorsque du code non conforme s'exécute.
Corrigez les infractions
Il existe plusieurs options pour corriger une violation de type d'approbation. Vous pouvez supprimer le code incriminé, utiliser une bibliothèque, créer une stratégie de type d'approbation ou, en dernier recours, créer une stratégie par défaut.
Réécrire le code incriminé
¿Quizás la funcionalidad no conforme ya no être necesaria o se pueda reescribir de una manera moderna sin usar las funciones propensas a errores?
Pas
il.innerHTML = '<img src=xyz.jpg>';
Faire
il.textContent = '';
const img = document.createElement('img');
img.src = 'xyz.jpg';
il.appendChild(img);
Utiliser une bibliothèque
Certaines bibliothèques génèrent déjà des types de confiance que vous pouvez transmettre aux fonctions du récepteur. Par exemple, vous pouvez utiliser
DOMPurifier pour nettoyer un extrait de code HTML, en supprimant les charges utiles XSS.
importer DOMPurifier desde 'dompurify';
il.innerHTML = DOMPurifier.sanitize(html, {RETURN_TRUSTED_TYPE: vrai);
DOMPurifier prend en charge les types de confiance et il renverra du HTML nettoyé enveloppé dans un TrustedHTML
objet afin que le navigateur ne génère pas de violation.
Mise en garde:
Si la logique de nettoyage dans DOMPurify est boguée, votre application peut toujours avoir une vulnérabilité DOM XSS. Les types de confiance vous obligent à traiter une valeur en quelque sorte, mais ne définissez pas encore quelles sont les règles de traitement exactes et si elles sont sécurisées.
Créer une stratégie de type d'approbation
Parfois, il n'est pas possible de supprimer la fonctionnalité et il n'y a pas de bibliothèque pour nettoyer la valeur et créer un type de confiance pour vous. Dans ces cas, créez vous-même un objet Trusted Type.
Pour cela, créez d'abord un politique. Les politiques sont des usines de types de confiance qui imposent certaines règles de sécurité à leur entrée:
si (la fenêtre.trustedTypes && trustedTypes.createPolicy) {
const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
createHTML: string => string.replace(/</g, '<')
});
}
Ce code crée une stratégie appelée myEscapePolicy
ce qui peut produire TrustedHTML
objets à travers leur createHTML ()
une fonction. Les règles définies échapperont au HTML <
caractères pour éviter de créer de nouveaux éléments HTML.
Utilisez la politique comme ceci:
const escaped = escapeHTMLPolicy.createHTML('<img src=x onerror=alert(1)>');
console.Journal(escaped instanceof TrustedHTML);
il.innerHTML = escaped;
Alors que la fonction JavaScript est arrivée à TrustedTypes.createPolicy ()
Quoi
createHTML ()
renvoie une chaîne, createPolicy ()
renvoie un objet de stratégie qui encapsule la valeur de retour dans un type correct, dans ce cas TrustedHTML
.
Utiliser une politique par défaut
Parfois, le code incriminé ne peut pas être modifié. Par exemple, c'est le cas si vous chargez une bibliothèque tierce à partir d'un CDN. Dans ce cas, utilisez un
politique par défaut:
si (la fenêtre.trustedTypes && trustedTypes.createPolicy) {
trustedTypes.createPolicy('default', {
createHTML: (string, sink) => DOMPurifier.sanitize(string, {RETURN_TRUSTED_TYPE: vrai});
});
}
La politique avec nom défaut
il est utilisé chaque fois qu'une chaîne est utilisée dans un récepteur qui n'accepte que le type de confiance.
Utilisez la stratégie par défaut avec parcimonie et préférez refactoriser votre application pour utiliser à la place des stratégies régulières. Cela encourage les conceptions où les règles de sécurité sont proches des données qu'elles traitent, où vous avez le plus de contexte pour nettoyer correctement la valeur.
Changement pour appliquer la politique de sécurité du contenu
Lorsque votre application ne viole plus, vous pouvez commencer à appliquer les types d'approbation:
Content-Security-Policy: exigent-des-types-approuvés-pour 'script'; report-uri //my-csp-endpoint.example
Voila! Maintenant, quelle que soit la complexité de votre application Web, la seule chose qui peut introduire une vulnérabilité DOM XSS est le code dans l'une de vos politiques, et vous pouvez la bloquer encore plus si limiter l'élaboration des politiques.
Autres lectures