0Pricing
Browser Extensions Development (Chrome & Edge) · Leçon

Bonnes pratiques de programmation sécurisée

Mettez en œuvre des principes de sécurité pour prévenir les vulnérabilités courantes, comme les scripts intersites (XSS) et les fuites de données.

Bonnes pratiques de programmation sécurisée est une leçon Browser Extensions Development (Chrome & Edge) gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Browser Extensions Development (Chrome & Edge), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Why Security Matters for Extensions

Browser extensions operate with significant privileges, interacting closely with user data and browsing sessions. This makes secure coding practices absolutely critical.

Poor security can lead to serious vulnerabilities like Cross-Site Scripting (XSS) and data leakage, compromising user privacy and system integrity.

Understanding XSS Vulnerabilities

Cross-Site Scripting (XSS) occurs when an attacker injects malicious scripts into a trusted web application, or in our case, into your extension's UI or content scripts.

These scripts can steal sensitive data, hijack user sessions, or even deface websites, all within the context of your extension's permissions.

The Danger of `innerHTML`

One of the most common causes of XSS in web development, and thus in extensions, is using innerHTML with untrusted input.

If you take text directly from a user (e.g., from a form field, a URL parameter, or even a web page's content) and inject it into the DOM using innerHTML, any embedded scripts will execute.

Safe DOM Manipulation: `textContent`

To prevent XSS when displaying untrusted plain text, always use the textContent property instead of innerHTML.

textContent treats all input as raw text, preventing any HTML tags or scripts from being parsed and executed by the browser. It's your first line of defense.

Using `textContent` in Practice

Try running this simple JavaScript example. Notice how textContent safely renders the script as plain text, while innerHTML would dangerously attempt to execute it.

const userInput = "<script>alert('XSS!');</script>";

// Simulate a DOM element
const divSafe = { textContent: '' };
const divUnsafe = { innerHTML: '' };

// Safe way: Using textContent
divSafe.textContent = userInput;
console.log("Safe (textContent):", divSafe.textContent);

// Unsafe way: Using innerHTML (DO NOT DO THIS!)
divUnsafe.innerHTML = userInput;
console.log("Unsafe (innerHTML):", divUnsafe.innerHTML);

Sanitizing HTML When Needed

What if you genuinely need to allow *some* HTML (like bold or italic) from user input? In these cases, textContent isn't enough.

You must use a robust, well-maintained HTML sanitization library (e.g., DOMPurify). These libraries parse HTML, remove malicious tags/attributes, and return safe HTML. Never build your own HTML sanitizer.

Avoiding Dynamic Code Execution

Functions like eval(), new Function(), setTimeout(string), and setInterval(string) execute JavaScript code from a string.

This is a significant security risk. If an attacker can control the string argument, they can execute arbitrary code within your extension's context, potentially bypassing other security measures.

Protecting Against Data Leakage

Data leakage occurs when sensitive user data is unintentionally or maliciously exposed to unauthorized third parties. This is a critical concern for extensions.

Be extremely cautious when sending data from your extension to external servers. Always verify the destination, use secure protocols (HTTPS), and encrypt sensitive information if necessary.

Principle of Least Privilege

When declaring permissions in your extension's manifest.json, always adhere to the Principle of Least Privilege.

Request only the absolute minimum permissions required for your extension's functionality. Overly broad permissions increase the attack surface and the potential for data leakage if your extension is compromised.

Security Best Practices Check

Which of the following are recommended secure coding practices for browser extensions?

Recap: Keeping Extensions Secure

You've learned crucial secure coding practices for building robust browser extensions:

  • Sanitize All Input: Use textContent for plain text; use robust libraries like DOMPurify for HTML.
  • Avoid Dynamic Code: Never execute code from untrusted strings using functions like eval().
  • Least Privilege: Request only the essential permissions your extension needs.
  • Prevent Data Leakage: Be cautious when transmitting user data, ensuring secure destinations and protocols.

By integrating these practices, you build more trustworthy extensions that protect user privacy and security.

Questions Fréquemment Posées

La leçon « Bonnes pratiques de programmation sécurisée » est-elle gratuite ?

Oui — le texte complet de « Bonnes pratiques de programmation sécurisée » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Browser Extensions Development (Chrome & Edge), passe à CoddyKit PRO. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Bonnes pratiques de programmation sécurisée » ?

Mettez en œuvre des principes de sécurité pour prévenir les vulnérabilités courantes, comme les scripts intersites (XSS) et les fuites de données. Tu pratiques Browser Extensions Development (Chrome & Edge) avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Browser Extensions Development (Chrome & Edge) ?

Aucune expérience préalable n'est requise. Browser Extensions Development (Chrome & Edge) sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Bonnes pratiques de programmation sécurisée » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Browser Extensions Development (Chrome & Edge) ?

Oui. Chaque leçon Browser Extensions Development (Chrome & Edge) inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Comprendre les autorisations avancées
  2. Bonnes pratiques de programmation sécurisée
  3. Politique de sécurité du contenu (CSP)
  4. Autorisations facultatives et demandes à l’exécution
← Retour à Browser Extensions Development (Chrome & Edge)