Problem
When my app enforces a Trusted Types CSP in dev, the plugin's overlay crashes on load:
virtual:vue-devtools-path:overlay.js:44 Uncaught TypeError:
Failed to set the 'src' property on 'HTMLScriptElement':
This document requires 'TrustedScriptURL' assignment.
CSP used (meta tag in index.html):
<meta http-equiv="Content-Security-Policy"
content="require-trusted-types-for 'script'; trusted-types default dompurify vue;">
Cause
In src/overlay.js, script.src is assigned a plain string:
const script = document.createElement('script')
script.src = `${overlayDir}/devtools-overlay.mjs`
Under require-trusted-types-for 'script', HTMLScriptElement.src is a Trusted Types sink and requires a TrustedScriptURL, not a string. The plain-string assignment is blocked.
A default trusted-types policy in the consuming app does not help, because the overlay script is injected via injectTo: 'head-prepend' and runs before the app's entry module executes.
Problem
When my app enforces a Trusted Types CSP in dev, the plugin's overlay crashes on load:
CSP used (meta tag in
index.html):Cause
In
src/overlay.js,script.srcis assigned a plain string:Under
require-trusted-types-for 'script',HTMLScriptElement.srcis a Trusted Types sink and requires aTrustedScriptURL, not a string. The plain-string assignment is blocked.A default trusted-types policy in the consuming app does not help, because the overlay script is injected via
injectTo: 'head-prepend'and runs before the app's entry module executes.