Content Security Policy
If your site uses a Content Security Policy, you need to add directives to allow the BugPin widget to function properly.
Required Directives
Add these directives to your existing CSP configuration:
script-src 'self' https://your-bugpin-server.com;
connect-src 'self' https://your-bugpin-server.com;
style-src 'self' 'unsafe-inline';
img-src 'self' data:;
media-src 'self' data: blob:;
Directive Breakdown:
script-src: Allows the widget JavaScript to load from your BugPin serverconnect-src: Allows API requests to submit reports and fetch configurationstyle-src: Allows inline styles used by the widget (Shadow DOM encapsulation)img-src: Allows screenshots captured as data URLsmedia-src: Allows video recordings and uploads as data or temporaryblob:URLs
Implementation Methods
You can add CSP directives using either HTTP headers (recommended) or HTML meta tags.
Method 1: HTTP Response Headers (Recommended)
Add the Content-Security-Policy header to your server responses. The implementation varies by server:
Apache (.htaccess or httpd.conf):
Header set Content-Security-Policy "script-src 'self' https://your-bugpin-server.com; connect-src 'self' https://your-bugpin-server.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; media-src 'self' data: blob:;"
Nginx (nginx.conf):
add_header Content-Security-Policy "script-src 'self' https://your-bugpin-server.com; connect-src 'self' https://your-bugpin-server.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; media-src 'self' data: blob:;";
Node.js / Express:
app.use((req, res, next) => {
res.setHeader(
"Content-Security-Policy",
"script-src 'self' https://your-bugpin-server.com; connect-src 'self' https://your-bugpin-server.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; media-src 'self' data: blob:;",
);
next();
});
Next.js (next.config.js):
module.exports = {
async headers() {
return [
{
source: "/:path*",
headers: [
{
key: "Content-Security-Policy",
value:
"script-src 'self' https://your-bugpin-server.com; connect-src 'self' https://your-bugpin-server.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; media-src 'self' data: blob:;",
},
],
},
];
},
};
ASP.NET Core (Startup.cs or Program.cs):
app.Use(async (context, next) =>
{
context.Response.Headers.Add(
"Content-Security-Policy",
"script-src 'self' https://your-bugpin-server.com; connect-src 'self' https://your-bugpin-server.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; media-src 'self' data: blob:;"
);
await next();
});
Django (settings.py with django-csp):
CSP_SCRIPT_SRC = ["'self'", "https://your-bugpin-server.com"]
CSP_CONNECT_SRC = ["'self'", "https://your-bugpin-server.com"]
CSP_STYLE_SRC = ["'self'", "'unsafe-inline'"]
CSP_IMG_SRC = ["'self'", "data:"]
CSP_MEDIA_SRC = ["'self'", "data:", "blob:"]
Method 2: HTML Meta Tag
If you cannot modify server headers, add a <meta> tag to your HTML <head>:
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' https://your-bugpin-server.com;
connect-src 'self' https://your-bugpin-server.com;
style-src 'self' 'unsafe-inline';
img-src 'self' data:;
media-src 'self' data: blob:;"
/>
HTTP headers are preferred over meta tags. Some CSP directives (like frame-ancestors) don't work in meta tags.
Merging with Existing CSP
If you already have a CSP, merge the BugPin directives with your existing ones:
Example - Existing CSP:
script-src 'self' https://cdn.example.com;
img-src 'self' https://images.example.com;
Merged with BugPin:
script-src 'self' https://cdn.example.com https://your-bugpin-server.com;
img-src 'self' https://images.example.com data:;
connect-src 'self' https://your-bugpin-server.com;
style-src 'self' 'unsafe-inline';
media-src 'self' data: blob:;