Vscode: Help webview extensions add a Content Security Policy

Created on 17 Aug 2019  ·  21Comments  ·  Source: microsoft/vscode

Many webview extensions do not currently set a content security policy. All webviews (even very simple ones) should set a content security policy. This is not a immediate security problem but a content security policy helps to limit the potential impact of content injections and is generally a good measure for defense in depth.

I've put together this initial list of extensions that create webviews that seem not to have a content security policy (there may be false positives). If you are feeling like a security hero, consider helping these extensions out by submitting a PR that adds a restrictive content security policy to their webviews. Here's our documentation to help you get started.

Let me know if an extension has been fixed or was incorrectly flagged

Key

  • ❗️- Confirmed and issue opened
  • ✔️ - Fixed
  • ❓ - Can't confirm in current code in github master?
  • Blank - Unconfirmed

Extensions

good first issue help wanted webview
Source
picture mjbvz
👍4

All 21 comments

I'll pick this up. Will start with code settings sync extension.

ParkourKarthik picture ParkourKarthik on 22 Aug 2019

I worked on vitaliymaz.vscode-svg-previewer. It did have a CSP, which was not the most restrictive so maybe it was a false positive or maybe not.

utsavm9 picture utsavm9 on 30 Aug 2019

@mjbvz I believe janisdd.vscode-edit-csv is a false positive as CSP exists in the extension. Is it here because it has unsafe-inline for its scripts and style as that is not restrictive?

utsavm9 picture utsavm9 on 30 Aug 2019
👀1

We've just added a csp to the python extension, but we're still getting the warning? Does it have to be strict in order to not get the warning?

Here's our current CSP:

<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 'unsafe-eval' vscode-resource: data: https: http:;">

rchiodo picture rchiodo on 5 Sep 2019

What file or files is the CSP usually included in?

So if you click on any of the repos with confirmed and open issues and take a look at the project files, what files should usually contain a CSP? All HTML files?

TantumErgo picture TantumErgo on 5 Sep 2019

Is the declared CSP actually enforced?

We use a webview that relies upon inline CSS and base64-encoded images, and it loads correctly with a default-src 'none'; CSP.

Sure, it removes the warning. But I'm a bit worried that we'll have to push a bugfix release in a rush when our users start reporting that the webview is broken after an update to Code.

jblievremont picture jblievremont on 12 Sep 2019
👍1

@jblievremont Can you share a link to an example extension

mjbvz picture mjbvz on 14 Sep 2019

@mjbvz see SonarSource/sonarlint-vscode#53

jblievremont picture jblievremont on 16 Sep 2019
👍1

Hi, I'm from the ms-mssql.mssql team. We added a CSP to our webview here. Is there anything more we need to do?

abist picture abist on 16 Sep 2019

@abist Looks good. Thanks

mjbvz picture mjbvz on 16 Sep 2019
👍1

✔️James-Yu.latex-workshop James-Yu/LaTeX-Workshop/pull/1676

tamuratak picture tamuratak on 30 Sep 2019
👍1

mike-lischke.vscode-antlr4 uses webviews too and while working on adding CSPs to them I stumbled across a problem: I get the missing CSP warning even though I have added a CSP. The generated code is:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>

            <meta http-equiv="Content-Security-Policy" content="default-src 'self';
            script-src vscode-resource: 'self' 'unsafe-inline' 'unsafe-eval' https:;
            style-src vscode-resource: 'self' 'unsafe-inline';
            img-src vscode-resource: 'self' "/>

            <link rel="stylesheet" type="text/css" href="vscode-resource://file///Volumes/Extern/Work/projects/vscode-antlr4/misc/light.css">
<link rel="stylesheet" type="text/css" href="vscode-resource://file///Volumes/Extern/Work/projects/vscode-antlr4/misc/dark.css">
            <base target="_blank" />

</head>

Why's that not accepted?

mike-lischke picture mike-lischke on 10 Nov 2019

@mike-lischke I just tried that html in a webview with VSCode 1.41.0-insider (Commit: 0d728c31ebdf03869d2687d9be0b017667c9ff37) but could not reproduce the issue. Can you please share an example extension?

mjbvz picture mjbvz on 13 Nov 2019

@mjbvz I assumed that mike-lischke.vscode-antlr4 would give you a hint, but the current release has no CSP at all. The original code is at Github. It should run out of the box. For the effect to see you have to open an ANTLR4 grammar file. There are a few in the tests/background folder (.g4). Once you opened it right click on a rule to show the context menu in the editor pane.

Bildschirmfoto 2019-11-13 um 09 14 08

Select the Railroad diagram, which will show a webview. This one does not bring up the warning. Then try Show ATN Graph for Rule. That also opens a webview, but this time the warning mike-lischke.vscode-antlr4 created a webview without a content security policy: https://aka.ms/vscode-webview-missing-csp comes up in the debug console. This is particularly odd because both views share the same backend, with the same CSP code. Note also that the CSP code seems to be ok, since all graphics and CSS is used as expected.

mike-lischke picture mike-lischke on 13 Nov 2019

@mike-lischke I can't repo this in VS Code insiders.

Are you 100% sure your webview html always has a content security policy. For example, this line looks suspicious: https://github.com/mike-lischke/vscode-antlr4/blob/b6b065c09494e947259617661ab9f1bcb6c2a148/src/frontend/ATNGraphProvider.ts#L41

mjbvz picture mjbvz on 15 Nov 2019

Many thanks for looking into that @mjbvz. Unfortunately this function is not the culprit here. It definitely needs a change to include a CSP, but it is not called when you have a grammar rule selected (which is the case in this example).

I tried to debug further to see where the missing csp message is generated, but that went to nowhere (I found the place where it is printed, but not the location where vscode determines if this message is needed). My (vague) assumption is that something in the generated HTML code is keeping vscode to think the csp is still missing (even though it is there).

mike-lischke picture mike-lischke on 15 Nov 2019

@mjbvz Orta.vscode-jest is a test tool. and they uses webview to see html snapshot.
they escapes all html tag, and encloses with <pre> tag. it seems false positive, or may add csp tag dynamically?

seongwon-kang picture seongwon-kang on 19 Feb 2020

@seongwon-kang Can you link the the code that does this? All html used in webviews (even html that properly escapes its content) should have a content security policy

mjbvz picture mjbvz on 26 Feb 2020

@mjbvz this will add csp tag dynamically, but I doubt this csp is correctly configured.

seongwon-kang picture seongwon-kang on 26 Feb 2020

image

@mjbvz it seems vscode already attach CSP metatag when webview renders to workbench. is any other path to see webview?

seongwon-kang picture seongwon-kang on 26 Feb 2020

Closing this since we've done work on the VS Code side to make these errors more obvious to extension authors.

mjbvz picture mjbvz on 3 Oct 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ryan-wong picture ryan-wong  ·  3Comments
villiv picture villiv  ·  3Comments
trstringer picture trstringer  ·  3Comments
vsccarl picture vsccarl  ·  3Comments
NikosEfthias picture NikosEfthias  ·  3Comments