Embedding and web termsUpdated
Content Security Policy (CSP)
Also called: CSP, Content-Security-Policy header, frame-src, script-src
Definition
A Content Security Policy (CSP) is a set of rules a website sends to the browser, usually in a Content-Security-Policy header, saying which sources the page may load scripts, frames, images and other resources from. Anything not allowed is blocked.
Directives that affect embeds
Your policy governs your page. Content inside a cross-origin iframe follows the policy of the page in the frame, so you don't need to allow the widget's own images or API calls.
| Directive | Controls | Matters for |
|---|---|---|
| script-src | Where JavaScript may load from | Embed loaders and widget scripts |
| frame-src | What may load in <iframe> elements; falls back to child-src, then default-src | Embedded posts, videos and widgets |
| default-src | The fallback for any type you haven't listed | Everything without its own rule |
| frame-ancestors | Which sites may put this page in a frame | Set by the embedded site, not by you |
Allowing an embed on a site with a CSP
- 1
Find where the policy is set
It can come from your server, a CDN, a security plugin or a <meta http-equiv> tag.
- 2
Add the embed's domain
Add it to script-src if the embed uses a script, and to frame-src for the iframe. Script-based widgets usually need both.
- 3
Test in report-only mode
Sending the policy as Content-Security-Policy-Report-Only reports violations without blocking anything.
- 4
Check the published page
Reload it with your browser's developer tools open and look for blocked-resource messages.
Common mistakes
- Allowing the script but not the frame, so the loader runs and the widget area stays empty.
- Editing one policy while another is also sent; when there are several, a resource has to pass all of them.
- Opening everything with a wildcard to make an error go away, which removes the protection.
- Relying on a <meta> tag for everything: MDN notes it doesn't support all CSP features, and a report-only policy can't be set that way.
Related terms
- Script tag (async and defer)
- A script tag, <script>, adds JavaScript to a web page. By default an external script pauses HTML parsing while it downloads and runs; the async and defer attributes let the browser keep parsing and run the script later.
- iframe
- An iframe (inline frame) is an HTML element, <iframe>, that displays a separate web page inside the current one. The embedded page loads from its own address and runs as its own document, kept apart from the host page's styles and scripts.
- iframe sandbox attribute
- The sandbox attribute on an <iframe> puts extra restrictions on the embedded page, such as blocking scripts, forms, pop-ups and navigation of the top window. An empty sandbox applies every restriction, and tokens like allow-scripts lift them one at a time.
- Embed code
- Embed code is a snippet of HTML you paste into a web page to display content hosted somewhere else, such as a video, a social media post or a widget. It's usually an iframe tag, a script tag with a placeholder element, or a combination.
Show your LinkedIn on your website
Paste a LinkedIn URL and embed it with one snippet. Free plan, no credit card.
Put your LinkedIn on your website today
Create your first widget in about two minutes. Free plan, no credit card required.