javascript - Hvorfor lastes ikke JS/CSS i min VSC-utvidelses nettvisning

Jeg skriver en VSC-utvidelse som bruker en webvisning. Selve utvidelsen fungerer bra, men JS og CSS i webvisningen min blir ikke lastet.

Jeg får stadig feil i webview-konsollen som:

VM102 main.js:12 Refused to load the stylesheet 'vscode-resource://file///full/disc/path/to/vsc-extension/resources/css/webview-package.css' because it violates the following Content Security Policy directive: "style-src nonce-LSAOCrvSSPay9prF40mc5JyRJ9BzFUKR". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

(anonymous) @ VM102 main.js:12
VM102 main.js:12 Refused to load the script 'vscode-resource://file///full/disc/path/to/vsc-extension/resources/js/webview-package.js' because it violates the following Content Security Policy directive: "script-src nonce-LSAOCrvSSPay9prF40mc5JyRJ9BzFUKR". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Jeg har følgende CSP-meta-tag i malen min for nettvisningen:

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src nonce-${nonce}; style-src nonce-${nonce};">

Dette er min webvisningsmal:

`<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src nonce-${nonce}; style-src nonce-${nonce};">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>${packageName}</title>
            <link href="${cssUri}" nonce="${nonce}" rel="stylesheet" type="text/css">
        </head>
        <body>
            <h1 id="${EXT}__name">${packageName}</h1>
            <script nonce="${nonce}" src="${scriptUri}"></script>
        </body>
    </html>`

Banene til ressursene opprettes som vist i webvisningsdokumentasjonen:

  const scriptPath = vscode.Uri.file(
    path.join(extensionPath, FS_FOLDER_RESOURCES, FS_FOLDER_JS, FS_WEBVIEW_PACKAGE_JS)
  );
  const cssPath = vscode.Uri.file(
    path.join(extensionPath, FS_FOLDER_RESOURCES, FS_FOLDER_CSS, FS_WEBVIEW_PACKAGE_CSS)
  )

Jeg har eksperimentert med ulike CSP-formater og fortsetter å få feil, koden min lastes bare ikke. Den blir blokkert på grunn av CSP, men jeg forstår ikke hvorfor. Jeg fulgte alle instruksjonene her:

https://code.visualstudio.com/api/extension-guides/webview#content-security-policy

og så på mange eksempler på CSP-tagger koblet til her:

https://github.com/microsoft/vscode/issues/79340

Men fortsatt blir ingenting noen gang lastet.

Her er min CSS:

html,
body {
  background: red;
}

h1 {
  background: blue;
}

JS ser slik ut:

// This script will be run within the webview itself
// It cannot access the main VS Code APIs directly.
(function () {
  console.log('### test);
  alert('### test');
}());

Men jeg tror ikke de er problemet, siden de er blokkert på grunn av CSP.

Svar #1

Jeg hadde en lignende situasjon som deg.

extensionPath er en egenskap til ExtensionContext. Du bør først få tilgang til ExtensionContext til utvidelsen din for å få extensionPath. I dokumentasjonen ExtensionContext,

En forekomst av en ExtensionContext gis som den første parameteren til aktivere-kallet til en utvidelse.

Som standard er aktiveringskallet til utvidelsen din function activate(context). Du kan få tilgang til ExtensionContext ved å bruke parameteren context i dette omfanget. Så hvis du vil få banen til utvidelsen, bør du bruke context.extensionPath.

Og jeg anbefaler sterkt å legge til sikkerhetspolicy i <meta>-taggen og en lokal ressurskontroll i localResourceRoots som vist nedenfor

        vscode.ViewColumn.One,
        {
          // Enable scripts in the webview
          enableScripts: true,
          // Only allow the webview to access resources in our extension's media directory
          localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'media'))]
        }
      );

HTML-tag

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'none'; img-src ${webview.cspSource} https:; script-src ${webview.cspSource}; style-src ${webview.cspSource};"
/>

Sikkerhetspolicy blir ikke aktivert når du ikke skriver <meta http-equiv="Content-Security-Policy">, det betyr å tillate alle ressurser, men det kan oppstå sikkerhetsproblemer.

Svar #2

For de som kommer hit og prøver å finne ut hvorfor deres CSS og JS lastes fint i webview under feilsøking (F5), men ikke vises etter pakking (vsce package), vil jeg gjerne hjelpe.

Jeg plasserte .css- og .js-filene mine i en mappe som inneholdt klassen min som implementerte webview. Noe som /src/components/a/folder/js/some.js og /src/components/a/folder/css/style.css.

Men ting ble rotet til under pakking. Etter mye krangling med webpack flyttet jeg alt til en mediemappe utenfor roten (som i eksemplene). Og problemene ble løst.

Mitt endelige hjem var /media/js/some.js og /medida/css/style.css.

Relaterte artikler