Content Security Policy (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.

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!

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.

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!).

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.

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:

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!

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).

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.

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?

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!