안전한 코딩 관행
사이트 간 스크립팅(XSS)과 데이터 유출 같은 일반적인 취약점을 방지하는 보안 원칙을 구현합니다.
안전한 코딩 관행은(는) CoddyKit의 무료 Browser Extensions Development (Chrome & Edge) 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 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/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Browser Extensions Development (Chrome & Edge) 강의 전체를 잠금 해제할 수 있습니다. Browser Extensions Development (Chrome & Edge) 강의에는 총 4개의 강의가 포함되어 있습니다.
“안전한 코딩 관행”에서 뭘 배우나요?
사이트 간 스크립팅(XSS)과 데이터 유출 같은 일반적인 취약점을 방지하는 보안 원칙을 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 Browser Extensions Development (Chrome & Edge)을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Browser Extensions Development (Chrome & Edge)을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Browser Extensions Development (Chrome & Edge)은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“안전한 코딩 관행” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Browser Extensions Development (Chrome & Edge) 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Browser Extensions Development (Chrome & Edge) 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.