Directus: Content Security Policy error - frame-src blocked when embedding a YouTube video
I'm using Directus with editorjs extension and trying to embed a YouTube video, but I'm encountering a Content Security Policy error that is blocking the frame-src. The error message I'm getting is:
"Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)."
I've tried adding the following setting in my .env file:
CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC="array:'self', 'https://www.youtube.com'"
But I'm still encountering the same error.
There is likely a Content Security Policy present on your page, and adding another one can only make it stricter, not loosen any of the directives. First you'll likely need to locate the existing CSP, likely in a response header, find how it is set and modify it.
To fix the inline script violation you will need to add the hash of the inline script (some browsers will tell you the hash), add a nonce to the script, refactor it into a file or resort to adding 'unsafe-inline'. You should add your chosen source to script-src.
You should also add www.youtube.com to frame-src and/or child-src (frame-src will use a fallback to child-src in CSP level 3 and to default-src in CSP level 2.
- How to Fix "String as JavaScript" Errors in FLP? (Async Module Loading)
- Prevent svelte build from including inline script as it violates CSP
- insertBefore and appendChild in font awesome kit (version 5.15.4) causing csp issue only in Firefox Asp.Net Core
- Vite + Vue 3 built project Content-Security-Policy Error (CSP) 'script-src "self"' because of new Function constructor in built files
- Refused to load the script : Content-Security-Policy
- Jenkins Content Security Policy
- Does the Content Security Policy Standard support wildcard paths? If not, why doesn't it?
- What is the difference between CORS and CSPs?
- This document requires 'TrustedScriptURL' assignment
- Electron Content Security Policy error when connecting to my api
- Why are FQDN (ending with a dot) not working in CSP?
- How do I show video content when Content Security Policy is in place?
- Content security policy error when trying to frame Authorize.net hosted payment page
- Html Error: Refused to load the script because it violates the following Content Security Policy directive
- Unrecognized Content-Security-Policy directive 'script-src:'
- adding security headers in wso2am-4.0.0 (sts & csp & referer headers)
- Why would a REST API need a CSP?
- PyQt5: How to download icon for QWebEngineView?
- Stripe js script violates all the unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval' and 'self' directives how it is possible?
- Content Security Policy: "img-src 'self' data:"
- Content Security Policy "data" not working for base64 Images in Chrome 28
- Refused to create a worker from 'blob:https://x/6a...293' because it violates the following Content Security Policy directive
- Content Security Policy - Determine source of blocked resource
- How to detect `eval` calls when addressing UI5 modules at runtime?
- Setup for Helmet and ReportURi?
- Content Security Policy not blocking the loading of third party javascript
- Refused to load the script because it violates the following Content Security Policy directive
- javascript click function causes Content Security Policy error
- CSP with NextJS 'Refused to execute inline script' in production
- Google Chrome extension that I'm working on keeps throwing CSP errors