Angular Content Security Policy (CSP) and Ingress Configuration

Content Security Policy (CSP) is a security feature that helps prevent attacks such as Cross-Site Scripting (XSS) and data injection by restricting the sources of content that can be loaded by a web application. When deploying Angular applications behind an ingress controller, it’s crucial to configure CSP correctly.

This tutorial will guide you through the following steps:

Setting up CSP in an Angular application.
Configuring CSP with an ingress controller.
Examples of common CSP directives.

Install and Setup CSP in Angular

Step 1: Install Angular if not already done

If you don’t have Angular CLI installed, install it globally:

npm install -g @angular/cli

Step 2: Create or Build an Angular Application

Create a new Angular application or use an existing one:

ng new my-angular-app
cd my-angular-app

Build the application for production:

ng build --prod

This generates the production-ready files in the dist/my-angular-app directory.

Step 3: Add a CSP Header in `index.html`

Modify the index.html file in the dist/my-angular-app directory to include a CSP meta tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Angular App</title>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://apis.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' https://images.example.com; connect-src 'self' https://api.example.com;">
</head>
<body>
  <app-root></app-root>
</body>
</html>

2. Running Angular Application with Ingress

Ingress controllers manage external access to services running in a Kubernetes cluster. Follow these steps to deploy your Angular application behind an ingress controller:

Step 1: Create a Docker Image of the Application

Write a Dockerfile in the root of your project:

FROM nginx:alpine
COPY dist/my-angular-app /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and tag the Docker image:

docker build -t my-angular-app:latest .

Push the image to a container registry:

docker tag my-angular-app:latest <your_registry>/my-angular-app:latest
docker push <your_registry>/my-angular-app:latest

Step 2: Create Kubernetes Resources

Deployment:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: angular-app
spec:
  replicas: 2
  selector:
    matchLabels:
      app: angular-app
  template:
    metadata:
      labels:
        app: angular-app
    spec:
      containers:
      - name: angular-app
        image: <your_registry>/my-angular-app:latest
        ports:
        - containerPort: 80

Service:

apiVersion: v1
kind: Service
metadata:
  name: angular-app-service
spec:
  selector:
    app: angular-app
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80
  type: ClusterIP

Ingress:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: angular-app-ingress
  annotations:
    nginx.ingress.kubernetes.io/configuration-snippet: |
      add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://apis.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' https://images.example.com; connect-src 'self' https://api.example.com" always;
spec:
  rules:
  - host: angular.example.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: angular-app-service
            port:
              number: 80

Apply the resources to your Kubernetes cluster:

kubectl apply -f deployment.yaml
kubectl apply -f service.yaml
kubectl apply -f ingress.yaml

Step 3: Access the Application

Ensure your ingress controller is configured, and access the application via http://angular.example.com.

3. Common CSP Directive Examples

default-src: Defines default policy for all resources.
```
default-src 'self';
```

script-src: Restricts JavaScript sources.

script-src 'self' https://apis.example.com;

style-src: Limits stylesheets, allowing inline styles.
```
style-src 'self' 'unsafe-inline';
```

img-src: Specifies allowed image sources.

img-src 'self' https://images.example.com;

connect-src: Controls which URIs the application can fetch data from (e.g., APIs).
```
connect-src 'self' https://api.example.com;
```

font-src: Defines allowed font sources.

font-src 'self' https://fonts.example.com;

frame-src: Controls iframe sources.
```
frame-src 'none';
```

With these configurations, your Angular application can be securely deployed with CSP headers enforced by an ingress controller. Tailor the CSP directives based on your application's needs. I prefer to use more detailed check CSP Evaluator With Google