Security SRI / CSP

How to self-host or use SRI / CSP with our scripts

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:

<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:

<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:

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

HTML CSP Example:

<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):

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:

<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