bingyi/vscode-extension-samples
1
0
Fork 0
mirror of https://github.com/microsoft/vscode-extension-samples.git synced 2026-04-27 16:55:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update for api changes and to use nonce

Browse Source
This commit is contained in:
Matt Bierner
2018-04-25 23:13:13 -07:00
parent 99bdcd043a
commit 50e23a2acd
2 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
webview-sample/media/main.js
View File

@ -1,30 +1,33 @@
// This script will be run within the webview itself
// It cannot access VS Code apis directly.
// It cannot access the main VS Code APIs directly.
(function () {
const vscode = acquireVsCodeApi();
const counter = document.getElementById('lines-of-code-counter');
const counter = document.getElementById('lines-of-code-counter');
let currentCount = 0;
let currentCount = 0;
setInterval(() => {
counter.textContent = currentCount++;
setInterval(() => {
counter.textContent = currentCount++;
// Alert the extension when the cat introduces a bug
if (Math.random() < Math.min(0.001 * currentCount, 0.05)) {
// Send a message back to the extension
window.parent.postMessage({
command: 'alert', text: '🐛 on line ' + currentCount },
'*')
}
}, 100);
// Alert the extension when the cat introduces a bug
if (Math.random() < Math.min(0.001 * currentCount, 0.05)) {
// Send a message back to the extension
vscode.postMessage({
command: 'alert',
text: '🐛 on line ' + currentCount
});
}
}, 100);
// Handle messages sent from the extension to the webview inside the webview
window.addEventListener('message', event => {
const message = event.data; // The json data the extension sent
switch (message.command)
{
case 'refactor':
currentCount = Math.ceil(currentCount * 0.5);
counter.textContent = currentCount;
break;
}
});
// Handle messages sent from the extension to the webview inside the webview
window.addEventListener('message', event => {
const message = event.data; // The json data the extension sent
switch (message.command) {
case 'refactor':
currentCount = Math.ceil(currentCount * 0.5);
counter.textContent = currentCount;
break;
}
});
}());

23
webview-sample/src/extension.ts
View File

@ -1,5 +1,5 @@
import * as vscode from 'vscode';
import * as path from 'path';
import * as vscode from 'vscode';
const cats = {
'Coding Cat': 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif',
@ -136,13 +136,19 @@ class CatCodingPanel {
// And the uri we use to load this script in the webview
const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' });
// Use a nonce to whitelist which scripts can be run
const nonce = getNonce();
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Use a content security policy to only allow -->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src vscode-resource:; style-src vscode-resource:;">
<!--
Use a content security policy to allow loading images from https or from our extension directory,
and only allow scripts that have a specific nonce.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Coding</title>
@ -151,8 +157,17 @@ class CatCodingPanel {
<img src="${catGif}" width="300" />
<h1 id="lines-of-code-counter">0</h1>
<script src="${scriptUri}"></script>
<script nonce="${nonce}" src="${scriptUri}"></script>
</body>
</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;
}