secure webview resources.
This commit is contained in:
Peng Lyu
parent
33007b4bae
commit
8f429963e4
@ -1,159 +1,117 @@
|
||||
import * as path from 'path';
|
||||
import * as vscode from 'vscode';
|
||||
|
||||
const cats = {
|
||||
'Coding Cat': 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif',
|
||||
'Compiling Cat': 'https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif',
|
||||
'Testing Cat': 'https://media.giphy.com/media/3oriO0OEd9QIDdllqo/giphy.gif'
|
||||
};
|
||||
|
||||
export function activate(context: vscode.ExtensionContext) {
|
||||
|
||||
context.subscriptions.push(vscode.commands.registerCommand('catCoding.start', () => {
|
||||
CatCodingPanel.createOrShow(context.extensionPath);
|
||||
}));
|
||||
|
||||
context.subscriptions.push(vscode.commands.registerCommand('catCoding.doRefactor', () => {
|
||||
if (CatCodingPanel.currentPanel) {
|
||||
CatCodingPanel.currentPanel.doRefactor();
|
||||
}
|
||||
}));
|
||||
context.subscriptions.push(vscode.commands.registerCommand('react-webview.start', () => {
|
||||
ReactPanel.createOrShow(context.extensionPath);
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Manages cat coding webview panels
|
||||
* Manages react webview panels
|
||||
*/
|
||||
class CatCodingPanel {
|
||||
/**
|
||||
* Track the currently panel. Only allow a single panel to exist at a time.
|
||||
*/
|
||||
public static currentPanel: CatCodingPanel | undefined;
|
||||
class ReactPanel {
|
||||
/**
|
||||
* Track the currently panel. Only allow a single panel to exist at a time.
|
||||
*/
|
||||
public static currentPanel: ReactPanel | undefined;
|
||||
|
||||
private static readonly viewType = 'catCoding';
|
||||
private static readonly viewType = 'react';
|
||||
|
||||
private readonly _panel: vscode.WebviewPanel;
|
||||
private readonly _extensionPath: string;
|
||||
private _disposables: vscode.Disposable[] = [];
|
||||
private readonly _panel: vscode.WebviewPanel;
|
||||
private readonly _extensionPath: string;
|
||||
private _disposables: vscode.Disposable[] = [];
|
||||
|
||||
public static createOrShow(extensionPath: string) {
|
||||
const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined;
|
||||
public static createOrShow(extensionPath: string) {
|
||||
const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined;
|
||||
|
||||
// If we already have a panel, show it.
|
||||
// Otherwise, create a new panel.
|
||||
if (CatCodingPanel.currentPanel) {
|
||||
CatCodingPanel.currentPanel._panel.reveal(column);
|
||||
} else {
|
||||
CatCodingPanel.currentPanel = new CatCodingPanel(extensionPath, column || vscode.ViewColumn.One);
|
||||
}
|
||||
}
|
||||
// If we already have a panel, show it.
|
||||
// Otherwise, create a new panel.
|
||||
if (ReactPanel.currentPanel) {
|
||||
ReactPanel.currentPanel._panel.reveal(column);
|
||||
} else {
|
||||
ReactPanel.currentPanel = new ReactPanel(extensionPath, column || vscode.ViewColumn.One);
|
||||
}
|
||||
}
|
||||
|
||||
private constructor(extensionPath: string, column: vscode.ViewColumn) {
|
||||
this._extensionPath = extensionPath;
|
||||
private constructor(extensionPath: string, column: vscode.ViewColumn) {
|
||||
this._extensionPath = extensionPath;
|
||||
|
||||
// Create and show a new webview panel
|
||||
this._panel = vscode.window.createWebviewPanel(CatCodingPanel.viewType, "Cat Coding", column, {
|
||||
// Enable javascript in the webview
|
||||
enableScripts: true,
|
||||
// Create and show a new webview panel
|
||||
this._panel = vscode.window.createWebviewPanel(ReactPanel.viewType, "React", column, {
|
||||
// Enable javascript in the webview
|
||||
enableScripts: true,
|
||||
|
||||
// And restric the webview to only loading content from our extension's `media` directory.
|
||||
localResourceRoots: [
|
||||
vscode.Uri.file(path.join(this._extensionPath, 'media')),
|
||||
// And restric the webview to only loading content from our extension's `media` directory.
|
||||
localResourceRoots: [
|
||||
vscode.Uri.file(path.join(this._extensionPath, 'build'))
|
||||
]
|
||||
});
|
||||
]
|
||||
});
|
||||
|
||||
// Set the webview's initial html content
|
||||
this._update();
|
||||
// Set the webview's initial html content
|
||||
this._panel.webview.html = this._getHtmlForWebview();
|
||||
|
||||
// Listen for when the panel is disposed
|
||||
// This happens when the user closes the panel or when the panel is closed programatically
|
||||
this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
|
||||
// Listen for when the panel is disposed
|
||||
// This happens when the user closes the panel or when the panel is closed programatically
|
||||
this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
|
||||
|
||||
// Update the content based on view changes
|
||||
this._panel.onDidChangeViewState(e => {
|
||||
if (this._panel.visible) {
|
||||
this._update()
|
||||
}
|
||||
}, null, this._disposables);
|
||||
// Handle messages from the webview
|
||||
this._panel.webview.onDidReceiveMessage(message => {
|
||||
switch (message.command) {
|
||||
case 'alert':
|
||||
vscode.window.showErrorMessage(message.text);
|
||||
return;
|
||||
}
|
||||
}, null, this._disposables);
|
||||
}
|
||||
|
||||
// Handle messages from the webview
|
||||
this._panel.webview.onDidReceiveMessage(message => {
|
||||
switch (message.command) {
|
||||
case 'alert':
|
||||
vscode.window.showErrorMessage(message.text);
|
||||
return;
|
||||
}
|
||||
}, null, this._disposables);
|
||||
}
|
||||
public doRefactor() {
|
||||
// Send a message to the webview webview.
|
||||
// You can send any JSON serializable data.
|
||||
this._panel.webview.postMessage({ command: 'refactor' });
|
||||
}
|
||||
|
||||
public doRefactor() {
|
||||
// Send a message to the webview webview.
|
||||
// You can send any JSON serializable data.
|
||||
this._panel.webview.postMessage({ command: 'refactor' });
|
||||
}
|
||||
public dispose() {
|
||||
ReactPanel.currentPanel = undefined;
|
||||
|
||||
public dispose() {
|
||||
CatCodingPanel.currentPanel = undefined;
|
||||
// Clean up our resources
|
||||
this._panel.dispose();
|
||||
|
||||
// Clean up our resources
|
||||
this._panel.dispose();
|
||||
while (this._disposables.length) {
|
||||
const x = this._disposables.pop();
|
||||
if (x) {
|
||||
x.dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
while (this._disposables.length) {
|
||||
const x = this._disposables.pop();
|
||||
if (x) {
|
||||
x.dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
private _getHtmlForWebview() {
|
||||
|
||||
private _update() {
|
||||
// Vary the webview's content based on where it is located in the editor.
|
||||
switch (this._panel.viewColumn) {
|
||||
case vscode.ViewColumn.Two:
|
||||
this._updateForCat('Compiling Cat');
|
||||
return;
|
||||
// Local path to main script run in the webview
|
||||
const scriptPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', 'static', 'js', 'main.6883c34d.js'));
|
||||
|
||||
case vscode.ViewColumn.Three:
|
||||
this._updateForCat('Testing Cat');
|
||||
return;
|
||||
|
||||
case vscode.ViewColumn.One:
|
||||
default:
|
||||
this._updateForCat('Coding Cat');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
private _updateForCat(catName: keyof typeof cats) {
|
||||
this._panel.title = catName;
|
||||
this._panel.webview.html = this._getHtmlForWebview(cats[catName]);
|
||||
}
|
||||
|
||||
private _getHtmlForWebview(catGif: string) {
|
||||
|
||||
// Local path to main script run in the webview
|
||||
const scriptPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', 'static', 'js', 'main.6883c34d.js'));
|
||||
|
||||
// And the uri we use to load this script in the webview
|
||||
// And the uri we use to load this script in the webview
|
||||
const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' });
|
||||
|
||||
const stylePathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', 'static', 'css', 'main.29266132.css'));
|
||||
const stylePathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', 'static', 'css', 'main.29266132.css'));
|
||||
|
||||
// And the uri we use to load this style in the webview
|
||||
const styleUri = stylePathOnDisk.with({ scheme: 'vscode-resource' });
|
||||
// And the uri we use to load this style in the webview
|
||||
const styleUri = stylePathOnDisk.with({ scheme: 'vscode-resource' });
|
||||
const baseStyles = `<link rel="stylesheet" type="text/css" href="${styleUri}">`;
|
||||
|
||||
// Use a nonce to whitelist which scripts can be run
|
||||
// const nonce = getNonce();
|
||||
// Use a nonce to whitelist which scripts can be run
|
||||
const nonce = getNonce();
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<title>React App</title>
|
||||
${baseStyles}
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';style-src vscode-resource: 'unsafe-inline' http: https: data:;">
|
||||
<base href="${vscode.Uri.file(path.join(this._extensionPath, 'build')).with({ scheme: 'vscode-resource' })}/">
|
||||
</head>
|
||||
|
||||
@ -161,17 +119,17 @@ class CatCodingPanel {
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
|
||||
<script src="${scriptUri}"></script>
|
||||
<script nonce="${nonce}" src="${scriptUri}"></script>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
</html>`;
|
||||
}
|
||||
}
|
||||
|
||||
// function getNonce() {
|
||||
// let text = "";
|
||||
// const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
// for (let i = 0; i < 32; i++) {
|
||||
// text += possible.charAt(Math.floor(Math.random() * possible.length));
|
||||
// }
|
||||
// return text;
|
||||
// }
|
||||
function getNonce() {
|
||||
let text = "";
|
||||
const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
for (let i = 0; i < 32; i++) {
|
||||
text += possible.charAt(Math.floor(Math.random() * possible.length));
|
||||
}
|
||||
return text;
|
||||
}
|
||||
14
package.json
14
package.json
@ -6,21 +6,15 @@
|
||||
},
|
||||
"publisher": "rebornix",
|
||||
"activationEvents": [
|
||||
"onCommand:catCoding.start",
|
||||
"onCommand:catCoding.doRefactor"
|
||||
"onCommand:react-webview.start"
|
||||
],
|
||||
"main": "./ext-src/extension.js",
|
||||
"contributes": {
|
||||
"commands": [
|
||||
{
|
||||
"command": "catCoding.start",
|
||||
"title": "Start cat coding session",
|
||||
"category": "Cat Coding"
|
||||
},
|
||||
{
|
||||
"command": "catCoding.doRefactor",
|
||||
"title": "Do some refactoring",
|
||||
"category": "Cat Coding"
|
||||
"command": "react-webview.start",
|
||||
"title": "Start react webview",
|
||||
"category": "React"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user