CSP & iframe Issues

This page covers Content Security Policy errors that prevent the Pexelize editor iframe from loading or communicating with your page.

frame-src blocks the editor iframe

What you see: Browser console shows:

Refused to frame 'https://editor.pexelize.com/' because it violates the following
Content Security Policy directive: "frame-src 'self'"

Why it happens: Your page's CSP frame-src directive doesn't include the Pexelize editor origin.

Fix: Add https://editor.pexelize.com to frame-src.

Content-Security-Policy: frame-src 'self' https://editor.pexelize.com;

---

connect-src blocks API calls from the editor

What you see: The iframe loads but content blocks and assets fail to appear. The console inside the iframe (accessible via DevTools > iframe context) shows connect-src violations.

Why it happens: The editor iframe makes API calls to https://api.pexelize.com and loads assets from https://cdn.pexelize.com. If your CSP propagates to child frames, these requests are blocked.

Fix: Add both domains to connect-src and img-src.

Content-Security-Policy:
  frame-src 'self' https://editor.pexelize.com;
  connect-src 'self' https://api.pexelize.com;
  img-src 'self' https://cdn.pexelize.com data: blob:;

---

frame-ancestors prevents embedding your page

What you see: This is the reverse situation -- if your page is itself embedded in an iframe and sets frame-ancestors 'none', the outer page cannot embed you (and by extension the editor within you).

Why it happens: frame-ancestors controls who can embed your page, not what your page can embed. This is unrelated to the Pexelize SDK but often confused with frame-src.

Fix: Ensure frame-ancestors on your page allows the parent domain:

Content-Security-Policy: frame-ancestors 'self' https://parent-app.com;

---

Required CSP headers -- full example

Here is a complete, minimal CSP that works with Pexelize:

Content-Security-Policy:
  default-src 'self';
  frame-src 'self' https://editor.pexelize.com;
  connect-src 'self' https://api.pexelize.com https://your-api.com;
  img-src 'self' https://cdn.pexelize.com https://your-cdn.com data: blob:;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;
  script-src 'self' https://cdn.pexelize.com;

Express middleware

const helmet = require('helmet');

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      frameSrc: ["'self'", 'https://editor.pexelize.com'],
      connectSrc: ["'self'", 'https://api.pexelize.com'],
      imgSrc: ["'self'", 'https://cdn.pexelize.com', 'data:', 'blob:'],
      styleSrc: ["'self'", "'unsafe-inline'", 'https://fonts.googleapis.com'],
      fontSrc: ["'self'", 'https://fonts.gstatic.com'],
      scriptSrc: ["'self'", 'https://cdn.pexelize.com'],
    },
  })
);

Nginx

add_header Content-Security-Policy
  "default-src 'self'; frame-src 'self' https://editor.pexelize.com; connect-src 'self' https://api.pexelize.com; img-src 'self' https://cdn.pexelize.com data: blob:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; script-src 'self' https://cdn.pexelize.com;"
  always;

Next.js (next.config.js)

const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: [
      "default-src 'self'",
      "frame-src 'self' https://editor.pexelize.com",
      "connect-src 'self' https://api.pexelize.com",
      "img-src 'self' https://cdn.pexelize.com data: blob:",
      "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
      "font-src 'self' https://fonts.gstatic.com",
      "script-src 'self' https://cdn.pexelize.com",
    ].join('; '),
  },
];

module.exports = {
  async headers() {
    return [{ source: '/(.*)', headers: securityHeaders }];
  },
};

---

Debugging CSP issues

1. Open DevTools > Console and look for Refused to messages.
2. Each message tells you which directive is blocking and which URL was blocked.
3. Add the blocked origin to the correct directive.
4. Reload and repeat until no violations remain.

Use Content-Security-Policy-Report-Only during development to log violations without blocking:

Content-Security-Policy-Report-Only: frame-src 'self' https://editor.pexelize.com;

---

Quick checklist

CSP Directive	Required Pexelize origins
frame-src	https://editor.pexelize.com
connect-src	https://api.pexelize.com
img-src	https://cdn.pexelize.com data: blob:
script-src	https://cdn.pexelize.com
style-src	'unsafe-inline' (for editor inline styles)
font-src	https://fonts.gstatic.com (if using Google Fonts)