Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Webview sometimes hitting invalid token error on focus #101321

Closed
jimcottrell opened this issue Jun 29, 2020 · 3 comments
Closed

Webview sometimes hitting invalid token error on focus #101321

jimcottrell opened this issue Jun 29, 2020 · 3 comments
Assignees
@mjbvz
Labels
bug Issue identified by VS Code Team member as probable bug insiders-released Patch has been released in VS Code Insiders verified Verification succeeded webview Webview issues
Milestone
July 2020

Comments

@jimcottrell
Copy link

Version: 1.47.0-insider
Commit: 7923112
Date: 2020-06-29T05:43:37.799Z
Electron: 8.3.3
Chrome: 80.0.3987.165
Node.js: 12.13.0
V8: 8.0.426.27-electron.0
OS: Darwin x64 19.5.0

I originally brought this up in #98746 as seeming related. I've only seen it happen through the Git Graph extension, but the author had investigated in mhutchie/vscode-git-graph#301 and felt that this was a bug in VS Code. I should note that as of a month or two ago, I can trigger this every time from a certain repo, but others do not expose this behavior. So it's possible that's it's something about the extension itself, but mhutchie's investigation seemed thorough. Wherever the issue resides, it seems likely to be a rare confluence of events that I'm just lucky enough to experience.

Steps to Reproduce:

  1. Open a Git Graph tab, which I understand to be a Webview
  2. Change focus to another tab
  3. Come back to Git Graph. Contents are now gone.

As seen in the log, the first error is Invalid or unexpected token though the view contents are seemingly fine before getting back the focus.

Does this issue occur when all extensions are disabled?: I've not yet come across any way to trigger this apart from Git Graph, so no.

Screen Recording

Developer Tools log:

log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): init
log.ts:179 DEBUG WebviewResourceRequestManager(d744cc61-f95a-4326-9d46-e02a52634442): init
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): will set html
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): will update content
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): webview ready
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): will post message on 'styles'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): will post message on 'content'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): will post message on 'focus'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): dom-ready
log.ts:179 DEBUG WebviewResourceRequestManager(d744cc61-f95a-4326-9d46-e02a52634442): did-start-loading
log.ts:179 DEBUG WebviewResourceRequestManager(d744cc61-f95a-4326-9d46-e02a52634442): did register
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): did post message on 'styles'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): did post message on 'content'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): did post message on 'focus'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): will post message on 'focus'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): did post message on 'focus'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): did-set-content
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): will post message on 'message'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): did post message on 'message'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): will post message on 'message'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): did post message on 'message'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): will set html
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): will update content
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): will post message on 'content'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): did post message on 'content'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): will post message on 'focus'
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): did post message on 'focus'
webviewElement.ts:149 [Embedded Page] Uncaught SyntaxError: Invalid or unexpected token
webviewElement.ts:149 [Embedded Page] The Content Security Policy 'default-src 'none'; style-src vscode-webview-resource: 'unsafe-inline'; script-src 'nonce-ZQqKrJxFs0rCyI4HiJlKH9To4iGH4oho'; img-src data:;' was delivered via a <meta> element outside the document's <head>, which is disallowed. The policy has been ignored.
webviewElement.ts:149 [Embedded Page] Uncaught ReferenceError: acquireVsCodeApi is not defined
log.ts:179 DEBUG Webview(d744cc61-f95a-4326-9d46-e02a52634442): did-set-content
@mjbvz
Copy link
Contributor

mjbvz commented Jun 29, 2020

When this happens again, can you run: Developer: Open webview developer tools. In these dev tools, look for where the Uncaught SyntaxError: Invalid or unexpected token error is happening. This should help us track down what is going wrong

@mjbvz mjbvz added info-needed Issue requires more information from poster webview Webview issues labels Jun 29, 2020
@jimcottrell
Copy link
Author

jimcottrell commented Jun 30, 2020 •
edited

Ah, that's helpful. Thanks for letting me know about those separate Webview developer tools. So, I was able to pin down specifically what's triggering it and create a dummy repo with a single commit message: Test commit with </script> tag. The error triggers as follows (JSON string truncated as indicated):

const acquireVsCodeApi = (function() {
				const originalPostMessage = window.parent.postMessage.bind(window.parent);
				const targetOrigin = '*';
				let acquired = false;

				let state = JSON.parse("{\"currentRepo\":\"/Users/jim/temp\", ...TRUNCATED... ,\"date\":1593476449,\"message\":\"Test commit with

Clearly the presence of </script> in that string is cutting off the script parsing prematurely.

@mjbvz mjbvz added bug Issue identified by VS Code Team member as probable bug and removed info-needed Issue requires more information from poster labels Jul 2, 2020
@mjbvz mjbvz added this to the July 2020 milestone Jul 2, 2020
@mjbvz
Copy link
Contributor

mjbvz commented Jul 2, 2020

Thanks for the investigation. The </script> tag definitely explains the issue

@mjbvz mjbvz closed this as completed in 895f03e Jul 6, 2020
gjsjohnmurray pushed a commit to gjsjohnmurray/vscode that referenced this issue Jul 8, 2020
@mjbvz @gjsjohnmurray
Encode webview state when injecting it into the webview
9d00bc6 
Fixes microsoft#101321

This should make sure we handle cases where the state string contains special characters, such as `<`
@JacksonKearl JacksonKearl added verified Verification succeeded and removed verified Verification succeeded labels Aug 6, 2020
@RMacfarlane RMacfarlane added the verified Verification succeeded label Aug 10, 2020
@github-actions github-actions bot locked and limited conversation to collaborators Aug 20, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@mjbvz mjbvz

Labels
bug Issue identified by VS Code Team member as probable bug insiders-released Patch has been released in VS Code Insiders verified Verification succeeded webview Webview issues
Projects
None yet
Milestone
July 2020
Development

No branches or pull requests
5 participants
@jimcottrell @RMacfarlane @JacksonKearl @mjbvz and others