Content Security Policy: What You Need to Know

Imagine your website is like Fort Knox, protecting valuable gold bars (your website information) from intruders. A Content Security Policy (CSP) acts as a vigilant security guard, checking IDs (resource locations) before allowing anything in.

Our widget is fantastic, but it requires special permission to enter Fort Knox because it uses some hidden code embedded within the walls (inline CSS and JS).

Here's the dilemma:

• The Guard's Default Stance: The CSP guard doesn't typically allow hidden code in the walls (unsafe-inline).
• Moving the Code: Extracting all the hidden code and placing it in a separate box (external file) is a massive task, akin to moving all the gold bars.
• Secret Keys: Giving the guard a secret key (nonce) to recognize the hidden code is tricky and can be complicated.

Why Use unsafe-inline?
Using unsafe-inline is like giving the guard a temporary pass to let the hidden code in. It’s quicker than moving everything but isn’t the best for security.

The Optimal Solution

The best approach is to eventually move all the hidden code out of the walls and into separate boxes. This enhances security at Fort Knox! But for now, unsafe-inline serves as a temporary measure.

How to Integrate Our Widget

To use our Loopedin widget, include the following code in your CSP settings:

<meta http-equiv="content-security-policy"
content="

default-src 'self'; 

script-src 'self' *.googletagmanager.com *.productstash.io *.loopedin.io https://cdn.loopedin.io/ *.cloudflare.com cdn.jsdelivr.net 'unsafe-inline';

style-src 'self' *.loopedin.io https://cdn.loopedin.io/ *.cloudflare.com *.googleapis.com/ https://rsms.me cdn.jsdelivr.net 'unsafe-inline'; 

img-src 'self' *.loopedin.io https://cdn.loopedin.io backblaze-proxy.encreva3386.workers.dev cdn.jsdelivr.net *.b-cdn.net  https://f005.backblazeb2.com https://productst333ash-storage.s3.us-east-005.backblazeb23.com 'unsafe-inline'; 

img-src 'self' *.loopedin.io https://cdn.loopedin.io imagedelivery.net https://pub-fad35f0f4bec471e93c626c56c08a9b0.r2.dev backblaze-proxy.encreva3386.workers.dev cdn.jsdelivr.net *.b-cdn.net  https://f005.backblazeb2.com https://productst333ash-storage.s3.us-east-005.backblazeb23.com 'unsafe-inline';

font-src 'self' *.loopedin.io https://*.gstatic.com https://rsms.me  data: 'unsafe-inline';

connect-src 'self' *.loopedin.io https://cdn.loopedin.io 'unsafe-inline';

frame-src 'self' * data:; manifest-src 'self'; object-src 'self'; 

media-src 'self'; 

form-action 'self' *; 

worker-src 'self'; 

child-src 'self'; 

block-all-mixed-content
">

You can also adjust these settings according to your specific needs.