安全なコーディングの実践
クロスサイトスクリプティング（XSS）やデータ漏えいなど、一般的な脆弱性を防ぐためのセキュリティ原則を実装します。
「安全なコーディングの実践」はCoddyKit上の無料Browser Extensions Development (Chrome & Edge)レッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはBrowser Extensions Development (Chrome & Edge)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
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
textContentfor 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.
よくある質問
「安全なコーディングの実践」レッスンは無料ですか？
はい。「安全なコーディングの実践」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Browser Extensions Development (Chrome & Edge)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。
「安全なコーディングの実践」で何を学びますか？
クロスサイトスクリプティング（XSS）やデータ漏えいなど、一般的な脆弱性を防ぐためのセキュリティ原則を実装します。 ブラウザで直接実行するハンズオンコードでBrowser Extensions Development (Chrome & Edge)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Browser Extensions Development (Chrome & Edge)を始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのBrowser Extensions Development (Chrome & Edge)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「安全なコーディングの実践」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このBrowser Extensions Development (Chrome & Edge)レッスンでコードを書いて実行できますか？
はい。すべてのBrowser Extensions Development (Chrome & Edge)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。