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

Feature request: Allow localhost access in webview #44695

Closed
octref opened this issue Feb 28, 2018 · 5 comments
Closed

Feature request: Allow localhost access in webview #44695

octref opened this issue Feb 28, 2018 · 5 comments
Assignees
@mjbvz
Labels
feature-request Request for new features or functionality *out-of-scope Posted issue is not in scope of VS Code webview Webview issues

Comments

@octref
Copy link
Contributor

octref commented Feb 28, 2018

#44466

I don't think the current API offers any easy way to preview a localhost address.
There are understandable concerns for allowing webview to access any remote server. However, users should be in control of the localhost servers they are running so it's should be fine.
This opens up a lot of possibility for making powerful development tools, because of the easy bi-directional communication between webview and extension host.
@octref octref added feature-request Request for new features or functionality webview Webview issues labels Feb 28, 2018
@mjbvz mjbvz self-assigned this Mar 1, 2018
@mjbvz
Copy link
Collaborator

mjbvz commented Jul 19, 2018

Note for http: this is already possible using an iframe inside the webview

@stefanstranger
Copy link

I tried to use a iframe inside the webview but I don't see the webpage I'm serving via localhost.

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
function activate(context) {

    // Use the console to output diagnostic information (console.log) and errors (console.error)
    // This line of code will only be executed once when your extension is activated
    console.log('Congratulations, your extension "vscode-ud" is now active!');

    // The command has been defined in the package.json file
    // Now provide the implementation of the command with  registerCommand
    // The commandId parameter must match the command field in package.json

    //let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
    // The code you place here will be executed every time your command is executed

    // Display a message box to the user
    //    vscode.window.showInformationMessage('Hello World!');
    //});

    let disposable = vscode.commands.registerCommand('extension.previewUD', function () {
        // The code you place here will be executed every time your command is executed

        // Display a message box to the user
        //vscode.window.showInformationMessage('Hello World!');

        const panel = vscode.window.createWebviewPanel('previewUD',
            "Preview UD",
            vscode.ViewColumn.One,
            {}
        )
        // And set its HTML content
        panel.webview.html = getWebviewContent();
    });

    context.subscriptions.push(disposable);
}
exports.activate = activate;

// this method is called when your extension is deactivated
function deactivate() {
}
exports.deactivate = deactivate;

// function to show webview content
function getWebviewContent() {
    return `<!DOCTYPE html>
    <html lang="en">
    <body>
        <iframe src="http://localhost:8080"></iframe>
    </body>
    </html>`;
}

result:
https://twitter.com/sstranger/status/1053656372619960321/photo/1

Ignore https reference in screenshot. Changed that to http://localhost:8080 and that also didn't showed the correct result.

What am I missing?

/Stefan

@mjbvz
Copy link
Collaborator

mjbvz commented Oct 22, 2018

I can't repo this. Here's that exact extension code with 8080 running using http-server

screen shot 2018-10-22 at 3 36 01 pm

Can you load localhost:8080 in an iframe on a normal webpage outside of vscode?

@mjbvz mjbvz added the *out-of-scope Posted issue is not in scope of VS Code label Oct 27, 2018
@vscodebot
Copy link

vscodebot bot commented Oct 27, 2018

This issue is being closed to keep the number of issues in our inbox on a manageable level, we are closing issues that are not going to be addressed in the foreseeable future: We look at the number of votes the issue has received and the number of duplicate issues filed. More details here. If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding and happy coding!

@vscodebot vscodebot bot closed this as completed Oct 27, 2018
@stefanstranger
Copy link

My bad I needed to enableScripts property of the WebView to get it working.

Sorry for not responding earlier.

/Stefan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mjbvz mjbvz

Labels
feature-request Request for new features or functionality *out-of-scope Posted issue is not in scope of VS Code webview Webview issues
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@stefanstranger @octref @mjbvz