# Security SRI / CSP

In integrating our scripts into your website, you can choose between two main types of JavaScript scripts entrypoints and two Service Worker deployment strategies. This document explains their differences, advantages, drawbacks, and how to implement a secure setup using CSP and SRI.

***

### 📦 Script Types Comparison

| Script Type          | Size                                         | Dynamic Loading                            | CSP Compatibility       | SRI (Integrity) Support            | Self-hostable |
| -------------------- | -------------------------------------------- | ------------------------------------------ | ----------------------- | ---------------------------------- | ------------- |
| **Chunked**          | \~14 KB + \~140 KB of dynamic loaded modules | ✅ Loads from `/scripts/{version}/ppg-*.js` | ❌ Harder (many sources) | ❌ Not supported for dynamic chunks | ❌ No          |
| **All-in-One (AIO)** | \~140 KB                                     | ❌ No dynamic loading                       | ✅ Simple                | ✅ Fully supported                  | ✅ Yes         |

***

#### ✅ All-in-One (AIO)

**Advantages:**

* Simpler CSP (`script-src` with hash or `'self'`)
* Full SRI support (`integrity` attribute)
* Can be self-hosted (e.g., from your CDN) 
* Single HTTP request

**Disadvantages:**

* Larger file (\~140 KB)
* Slower perceived performance (everything loads upfront)

**Example with SRI:**

```html
<script
  charset="UTF-8"
  src="https://s-eu-1.pushpushgo.com/js/{projectId}/aio.js"
  integrity="sha384-<YOUR_HASH>"
  crossorigin="anonymous"
  async="async">
</script>
```

***

#### 🚀 Chunked Scripts (Dynamic)

**Advantages:**

* Smaller entrypoint (\~14 KB)
* Dynamic module loading as needed
* Better time-to-interactive (TTI)

**Disadvantages:**

* CSP setup is harder due to multiple dynamic sources
* No SRI support for dynamically loaded scripts
* Cannot self-host dependent scripts

**Example:**

```html
<script
  charset="UTF-8"
  src="https://s-eu-1.pushpushgo.com/js/{projectId}.js"
  async="async">
</script>
```

***

### 🧩 Service Worker Strategies

PushPushGo integration also requires a Service Worker. You have two main options:

| Approach          | Uses `importScripts` | CSP-compatible (`worker-src 'self'`) | SRI Support | Self-hostable |
| ----------------- | -------------------- | ------------------------------------ | ----------- | ------------- |
| **ImportScripts** | ✅ Yes                | ❌ No                                 | ❌ No        | ❌ No          |
| **Downloaded**    | ❌ No                 | ✅ Yes                                | ✅ (N/A)     | ✅ Yes         |

***

#### ✅ Recommended for better security: Downloaded Worker (`sw.js`)

**Benefits:**

* Allows full control over CSP (`worker-src 'self'`)
* Self-hostable and auditable

**How to fetch:**

```bash
wget https://s-eu-1.pushpushgo.com/{projectId}/worker.js -O sw.js
```

**HTML CSP Example:**

```html
<meta http-equiv="Content-Security-Policy" content="
  script-src 'self' 'sha384-<HASH>';
  worker-src 'self';
">
```

***

### ❄️ Freeze Mode Explained

PushPushGo offers a feature called **Freeze**. When enabled:

> The project configuration is locked. Any future changes made in the dashboard (e.g., selectors, feature toggles, popup forms) **will not propagate** to production environments.

This is especially useful when you:

* **Host AIO scripts or workers from our CDN and want to control, audit our "changes"**
* Want **stable script versions** without unexpected changes
* Need to ensure **CSP and SRI hashes remain valid**

**How to enable Freeze:**

* Go to: `Project > Settings > Integration > Web push integration`
* Enable the `Freeze` option
* Wait 2–3 minutes for CDN cache to sync

***

### ✅ Recommended for secure setup (All-in-One)

* Use `aio.js`
* Calculate SHA-384 hash (update {projectId} before execute):

```bash
curl -s https://s-eu-1.pushpushgo.com/js/{projectId}/aio.js | openssl dgst -sha384 -binary | openssl base64
```

* Update `<script>` tag with SRI
* Download and host `sw.js` locally

**Final CSP example:**

```html
<meta http-equiv="Content-Security-Policy" content="
  script-src 'self' https://s-eu-1.pushpushgo.com/js/{projectId}/aio.js 'sha384-<HASH>';
  worker-src 'self';
">
```

***

### 🔁 Update Checklist (AIO mode)

1. Fetch new version of `aio.js`
2. Recalculate SHA-384 SRI hash
3. Update `script` tag in HTML
4. Update CSP meta tag with new `'sha384-...'`
5. Update local `sw.js`

Stay secure! if you have any questions please contact with our customer support