How do I configure Content-Security-Policy (CSP) filters?

Issue

What are some examples of how to set the "Additional Ignored Sources" field in my projects CSP settings?

Resolution

Common use cases:

// 1. Common web URLs
"https://api.example.com:443 (https://api.example.com/)" -> SchemeDomainPort {
    scheme: Some("https"),
    domain: Some("api.example.com"),
    port: Some("443")
}

// 2. URLs with paths (paths are ignored)
"https://api.example.com/v1/users" -> SchemeDomainPort {
    scheme: Some("https"),
    domain: Some("api.example.com"),
    port: None
}

// 3. IP Addresses
"http://192.168.1.1:3000 (http://192.168.1.1:3000/)" -> SchemeDomainPort {
    scheme: Some("http"),
    domain: Some("192.168.1.1"),
    port: Some("3000")
}

// 4. IPv6 Addresses (must be in brackets)
"http://[2001:db8::1]:8080" -> SchemeDomainPort {
    scheme: Some("http"),
    domain: Some("[2001:db8::1]"),
    port: Some("8080")
}

// 5. Wildcard Patterns
"*://*.example.com:*" -> SchemeDomainPort {
    scheme: None,        // Any scheme
    domain: Some("*.example.com"),
    port: None          // Any port
}

// 6. Domain-only patterns
"evil.com" -> SchemeDomainPort {
    scheme: None,
    domain: Some("evil.com"),
    port: None
}

// 7. Port-only patterns
"*:8080" -> SchemeDomainPort {
    scheme: None,
    domain: None,
    port: Some("8080")
}

// 8. Scheme-only patterns
"chrome://*" -> SchemeDomainPort {
    scheme: Some("chrome"),
    domain: None,
    port: None
}

// 9. Browser-specific URLs
"chrome-extension://abcdef123456 (chrome-extension://abcdef123456/)" -> SchemeDomainPort {
    scheme: Some("chrome-extension"),
    domain: Some("abcdef123456"),
    port: None
}

// 10. Local development URLs
"localhost:3000" -> SchemeDomainPort {
    scheme: None,
    domain: Some("localhost"),
    port: Some("3000")
}

// 11. Multiple wildcards in domain
"*.*.example.com" -> SchemeDomainPort {
    scheme: None,
    domain: Some("*.*.example.com"),
    port: None
}

// 12. Special schemes
"about:blank" -> SchemeDomainPort {
    scheme: Some("about"),
    domain: Some("blank"),
    port: None
}

Examples of matching syntax:

// Example usage:
let disallowed = vec![
    "*.evil.com",
    "http://*.example.com:8080",
    "*://cdn.*.com:*",
    "localhost",
];

// Example 1: Simple domain matching
"https://sub.evil.com:443 (https://sub.evil.com/)" -> true  // Matches "*.evil.com"
"https://evil.com (https://evil.com/)" -> true          // Matches "*.evil.com"
"https://notevil.com (https://notevil.com/)" -> false      // Doesn't match any pattern

// Example 2: Scheme + domain + port matching
"http://api.example.com:8080 (http://api.example.com:8080/)" -> true   // Matches "http://*.example.com:8080"
"https://api.example.com:8080 (https://api.example.com:8080/)" -> false  // Scheme doesn't match
"http://api.example.com:9090 (http://api.example.com:9090/)" -> false   // Port doesn't match

// Example 3: Wildcard matching
"https://cdn.fonts.com:443 (https://cdn.fonts.com/)" -> true  // Matches "*://cdn.*.com:*"
"http://cdn.images.com:80 (http://cdn.images.com/)" -> true   // Matches "*://cdn.*.com:*"
"https://static.cdn.com (https://static.cdn.com/)" -> false    // 'cdn.' must be at start

// Example 4: Local development
"http://localhost:3000 (http://localhost:3000/)" -> true      // Matches "localhost"
"https://localhost (https://localhost/)" -> true          // Matches "localhost"
"http://localhost.com (http://localhost.com/)" -> false      // Doesn't match "localhost"