Add content security policies to all sample extensions

[hawkticehurst]

Extension/feature description

All sample extensions are currently lacking any form of CSP for resources. This needs to be changed.

Use case

Extension security is a really important part of extension development and it should be well demonstrated and documented in our samples.

[mike-lischke]

@hawkticehurst Seems that task is incomplete. I get these errors when running the gallery example:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://*.vscode-cdn.net". Either the 'unsafe-inline' keyword, a hash ('sha256-lBQK0LXAhq9U2zTjlvX1Nt59wyhI0FakuXn5Pv4ySx8='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

create @ webview.js:1015

[hawkticehurst]

Ooh interesting. Thank you for the heads up @mike-lischke! I'm about to drop for the weekend, but I'll take a look at this next week.

[dohyung4934]

It seems like an inline <style> element is being inserted from within Javascript. The script checks for a csp-nonce value in meta tags, and if it finds one, it adds the nonce to the <style> element. So I updated the CSP configuration like below:

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

and it fixed the errors. (${nonce} is the generated nonce) Is it fine to do it this way?