Developer Security

Developer Security Guide

This guide covers security topics that ChurchCRM developers need to understand when writing code and contributing to the project.

Content Security Policy (CSP)

What is CSP?

Content Security Policy is a browser security feature that prevents code injection attacks by controlling what scripts, stylesheets, and other content can be loaded and executed.

In simple terms: CSP is like a bouncer that checks every piece of code before the browser runs it, only allowing code from trusted sources.

Why CSP Matters

• Prevents XSS attacks: Stops malicious scripts from being injected
• Protects user data: Restricts unauthorized data exfiltration
• Limits damage: Even if an attacker finds a vulnerability, CSP limits what they can do

Current CSP Implementation

ChurchCRM implements CSP with the following directives:

- script-src: Controls JavaScript execution sources
- style-src: Controls stylesheet sources
- img-src: Controls image sources
- connect-src: Controls what APIs can be called

For Developers: What You Need to Know

✅ DO:

• Use <script> tags with src attributes pointing to external files
• Use <link> tags for stylesheets
• Avoid inline <style> tags - use external stylesheets instead
• Use external script files instead of inline <script> content
• Use JavaScript event listeners instead of HTML event attributes

❌ DON'T:

• Use eval() or Function() constructors
• Write inline JavaScript with onclick, onload, etc.
• Use inline styles with style attributes (use CSS classes instead)
• Dynamically construct scripts with string concatenation
• Load scripts from untrusted external sources

Examples

❌ Bad - Violates CSP:

// Don't use eval
eval("var x = 5");

// Don't use inline styles
document.getElementById('myDiv').style.color = 'red';

// Don't use inline event handlers
<button onclick="doSomething()">Click me</button>

✅ Good - CSP Compliant:

// Use external script
// In your HTML: <script src="/path/to/script.js"></script>

// Use CSS classes for styling
// In your CSS: .red-text { color: red; }
document.getElementById('myDiv').classList.add('red-text');

// Use event listeners
document.getElementById('myBtn').addEventListener('click', doSomething);

Common CSP Issues and Fixes

Issue	Problem	Solution
eval() usage	Blocks dynamic code execution	Refactor to use data structures instead
Inline styles	style attributes blocked	Use CSS classes with classList
Inline event handlers	onclick, onload attributes blocked	Use addEventListener()
Third-party scripts	External script sources must be approved	Add domain to CSP directive

Related Documentation

For more security information, see:

• Security Guide - General security practices
• Code Conventions - Code style and best practices

Questions?

If you encounter CSP violations during development:

1. Check browser console for CSP violation warnings
2. Review the violation to identify what needs to be refactored
3. Use the solutions above to fix the issue
4. Test thoroughly in both development and production environments