Use DOMParser instead of string templating for webviews

[tjcouch-sil]

We are currently injecting a script tag into the head of the webview iframe using string templating. This can easily be fooled by making html comments that look like a head tag. The script we want to run is essential to proper webview functionality.

We should use DOMParser to interpret the DOM, inject the script tag as high as possible, and do a few other things (see checklist below) like VSCode does:

• Inject script tag at the top of the head tag
• Restrict meta http-equiv tags available to the webview iframe (like VSCode does) - we particularly don't want refresh
• Merge our iframe CSP (in WebViewService.ts) with the html webview provided CSP so they can provide their own nonces and we don't have to use 'unsafe-inline' anymore. BUT make sure to remove their report-uri and report-to because that could give them internet access
  • Only do the following changes. Do not merge in any other way. Our CSP is very specific.
    • If script-src or script-src-elem is present in the webview CSP, grab any directives starting with 'nonce-, 'sha256-, 'sha384-, or 'sha512- and put them at the end of our script-src-elem. Remove 'unsafe-inline' from our script-src-elem. Or if theirs is 'none', use that instead
    • Same with style-src except we can leave 'unsafe-inline' if they did not specify. And we should replace style-src with style-src-elem and/or style-src-attr if they specify those instead of style-src.
• Provide React webviews a way to add their own CSP that we merge in with our own
  • Add a property to WebViewDefinitionReact - contentSecurityPolicy or something - that is their content security policy. We merge it into our csp the same way as mentioned above. Make sure it is deleted on SavedWebViewDefinition like allowSameOrigin and other properties