webview angular assets/i18n/en.json access denied

lastnod commented 1 year ago

Describe the bug

en.json is called by main.ts in a webview but access is denied i use angular framework

To reproduce

use standard i18n module

Expected behavior

having status 200 :) on local ressources i tried : but it did'nt worked

Desktop (please complete the following information):

OS Version: _[e.g. windows 11
Toolkit Version: "@vscode/webview-ui-toolkit": "^1.2.2"

Additional context

Add any other context about the problem here.

hawkticehurst commented 1 year ago

Hey @lastnod!

I'd wager this is an issue with the content security policies set up for the webview. If you started your project by using the hello-world angular sample, the CSP is set up to be as minimal as possible (following the security principle of least privilege) –– only styles (CSS) and scripts (JS) are configured to be allowed/loaded.

In the sample extension, CSP is set as a <meta> tag on line 118 in the HelloWorldPanel.ts file.

Would you mind sharing what your CSP looks like?

p.s. this is also likely why the logo.png file is not loading, images are not configured in the hello-world CSP either.

lastnod commented 1 year ago

Hello @hawkticehurst!

Hey @lastnod!

I'd wager this is an issue with the content security policies set up for the webview. If you started your project by using the hello-world angular sample, the CSP is set up to be as minimal as possible (following the security principle of least privilege) –– only styles (CSS) and scripts (JS) are configured to be allowed/loaded.

In the sample extension, CSP is set as a <meta> tag on line 118 in the HelloWorldPanel.ts file.

Would you mind sharing what your CSP looks like?

p.s. this is also likely why the logo.png file is not loading, images are not configured in the hello-world CSP either.

wouaw thanks for this quick reply 👍 but i thought about that too I commented out this line to make sure it's not that

` private _getWebviewContent(webview: Webview, extensionUri: Uri) { // The CSS file from the Angular build output const stylesUri = getUri(webview, extensionUri, ["webview-ui", "build", "styles.css"]); // The JS files from the Angular build output const runtimeUri = getUri(webview, extensionUri, ["webview-ui", "build", "runtime.js"]); const polyfillsUri = getUri(webview, extensionUri, ["webview-ui", "build", "polyfills.js"]); const mainUri = getUri(webview, extensionUri, ["webview-ui", "build", "main.js"]);

const nonce = getNonce();

// Tip: Install the es6-string-html VS Code extension to enable code highlighting below
/*
<meta http-equiv="Content-Security-Policy" 
            content="default-src 'self'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
*/
return /*html*/ `
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" type="text/css" href="${stylesUri}">
      <title>Gael</title>
    </head>
    <body>
      <app-root></app-root>
      <script type="module" nonce="${nonce}" src="${runtimeUri}"></script>
      <script type="module" nonce="${nonce}" src="${polyfillsUri}"></script>
      <script type="module" nonce="${nonce}" src="${mainUri}"></script>
    </body>
  </html>
`;

}`

lastnod commented 1 year ago

in my components.html i sourced my logo.png like this : maybe it is not the right way `<a [routerLink]="['/']">

  </a>`

lastnod commented 1 year ago

i tried with absolute path and it worked but other svg do not load. like from ant design. i looked at many project on the web. Nobody is using asset folder to load images i think it is because their is a massive issue with relative path in webview

hawkticehurst commented 3 months ago

Hi @lastnod!

Back with a final update: I'm very sorry to say that the toolkit is being deprecated and all development on these samples has come to a close.

There was an announcement a few days ago on the main toolkit repo where you can learn more details and leave any questions or comments you may have.

Beyond that, thank you so much filing this issue and apologies for never getting around to addressing it. It means a lot that you contributed to the improvement of this project. I wish you all the best in your future VS Code extension endeavors!

microsoft / vscode-webview-ui-toolkit-samples