0Pricing
Browser Extensions Development (Chrome & Edge) · Урок

Политика безопасности содержимого (CSP)

Настройте и применяйте надёжную политику безопасности содержимого, чтобы снизить риск атак с внедрением и контролировать загрузку ресурсов.

«Политика безопасности содержимого (CSP)» — бесплатный урок Browser Extensions Development (Chrome & Edge) на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Browser Extensions Development (Chrome & Edge), и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

What is CSP?

Welcome to Content Security Policy (CSP)! This powerful security feature helps protect your browser extensions and web pages from dangerous attacks like Cross-Site Scripting (XSS).

Think of CSP as a bouncer for your extension. It tells the browser exactly which sources are allowed to load scripts, styles, images, and other resources.

How CSP Works

CSP operates by defining a set of "directives" in your extension's manifest.json file. Each directive specifies valid sources for a particular type of resource.

  • Scripts: Where JavaScript can load from.
  • Styles: Where CSS can come from.
  • Images: Allowed sources for images.
  • Frames: Which URLs can be embedded in iframes.

If a resource tries to load from an unapproved source, the browser blocks it!

MV3's Default CSP

For Manifest V3 extensions, Chrome and Edge automatically apply a very strict default Content Security Policy. This helps ensure a baseline level of security.

You can customize or override this default CSP using the content_security_policy key within your manifest.json file. This is crucial when your extension needs to load resources from specific external domains.

`default-src`: The Catch-All

The default-src directive is your CSP's fallback. If you don't specify a directive for a particular resource type (like script-src or img-src), the browser will use the rules defined in default-src.

Common values:

  • 'self': Allows resources only from the extension's own origin.
  • https://example.com: Allows resources from a specific HTTPS domain.
  • *: Allows resources from any origin (use with extreme caution!).

Restricting JavaScript (`script-src`)

The script-src directive is vital for preventing Cross-Site Scripting (XSS). It dictates where your extension can load JavaScript code from.

For extensions, always avoid using 'unsafe-inline' or 'unsafe-eval'. These directives allow inline scripts and eval(), which are major security risks. Load scripts from your extension's package or explicitly whitelisted safe domains.

Manifest with CSP

Here's how you'd define a basic CSP in your manifest.json to allow scripts only from your extension's package and images from any source:

{
  "name": "My Secure Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; img-src *"
  }
}

Styles, Images & More

Just like with scripts, you can control other resource types:

  • style-src: Defines valid sources for CSS stylesheets. Use 'self' or specific HTTPS URLs.
  • img-src: Specifies allowed sources for images. You might use 'self', data: (for base64 images), or specific image CDNs.

Always be as restrictive as possible to enhance security!

Beyond Basic Directives

CSP offers many more directives for fine-grained control:

  • object-src: Restricts sources for plugins like <object>, <embed>.
  • frame-src: Controls which URLs can be loaded into <frame>, <iframe>, etc.
  • connect-src: Limits where your extension can make network requests (e.g., fetch(), XMLHttpRequest).

Principle of Least Privilege

When defining your CSP, always follow the "Principle of Least Privilege". This means only allowing exactly what your extension needs and nothing more.

  • Start with the strictest possible CSP.
  • Gradually add directives and sources as required.
  • Avoid wildcards (*) unless absolutely necessary and justified.
  • Regularly review your CSP as your extension evolves.

CSP Rule Check

You are building an extension and want to allow scripts only from your extension's own files, and images from any external HTTPS source. Which of the following CSP configurations would achieve this for extension_pages?

Recap: Secure with CSP

Great job! You've learned how Content Security Policy (CSP) is a critical defense mechanism for your browser extensions.

  • CSP helps prevent XSS and other injection attacks.
  • It works by whitelisting trusted sources for resources.
  • Manifest V3 enforces a strict default CSP.
  • Use directives like default-src, script-src, style-src, and img-src to control content.
  • Always apply the Principle of Least Privilege when defining your CSP.

A well-configured CSP is key to building secure and robust extensions!

Часто задаваемые вопросы

Урок «Политика безопасности содержимого (CSP)» бесплатный?

Да — полный текст урока «Политика безопасности содержимого (CSP)» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Browser Extensions Development (Chrome & Edge), подпишись на CoddyKit PRO. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.

Чему я научусь в уроке «Политика безопасности содержимого (CSP)»?

Настройте и применяйте надёжную политику безопасности содержимого, чтобы снизить риск атак с внедрением и контролировать загрузку ресурсов. Ты практикуешь Browser Extensions Development (Chrome & Edge) с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Browser Extensions Development (Chrome & Edge)?

Предыдущий опыт не требуется. Browser Extensions Development (Chrome & Edge) на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Политика безопасности содержимого (CSP)»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Browser Extensions Development (Chrome & Edge)?

Да. Каждый урок Browser Extensions Development (Chrome & Edge) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Расширенные разрешения
  2. Методы безопасного программирования
  3. Политика безопасности содержимого (CSP)
  4. Необязательные разрешения и запросы во время выполнения
← Назад к Browser Extensions Development (Chrome & Edge)