Im developing my first vscode extension. trying to create webview and open a webpage inside vscode editor.
Case 1 :
Im using iframe with sandbox attributes. when i tried loading http site which runs locally, i can see js content not getting loaded in webview.
const panel = vscode.window.createWebviewPanel(
'Editor',
'Editor',
vscode.ViewColumn.One,
{
enableScripts: true
}
);
panel.webview.html = getWebviewContent();
function getWebviewContent() {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<iframe src="http://localhost:8988" sandbox="allow-scripts" width="100%" height="400px"></iframe>
</body>
</html>`;
}
Case 2 :
I also tried opening https site, https://cssgradient.io/. In that site also js content is not getting loaded.
Note : No error logs in console.
Can you please let me know if im missing something?
If you can check on the console logs (by using the command: Open Webview Developer Tools), you may can see some security errors as follows.
Refused to frame 'http://127.0.0.1:3000/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors *
Refused to display document because display forbidden by X-Frame-Options.
Therefore you need to change specific Content Security Policies in-order to load your domain in an iframe.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
In my case, it works after update frame-src CSP policy.
Related
I can’t figure out what the problem is .__.
Liveserver extension does not react on html/css changes
This line in html is present `
<meta charset="UTF-8">
Here is my settings (cant post image):
{
"files.autoSave": "afterDelay",
"liveServer.settings.AdvanceCustomBrowserCmdLine": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
"liveServer.settings.useWebExt": true,
"liveServer.settings.fullReload": true,
"liveServer.settings.ChromeDebuggingAttachment": false,
"liveServer.settings.wait": 3,
"liveServer.settings.CustomBrowser": "chrome",
}
here is markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
test
</body>
</html>
Updated question shows complete HTML example that should work with default preferences. Presumably the problem lies in the
"liveServer.settings.useWebExt": true,
preference: if the browser you are starting does not have installed required Live Server - Web Extension and if your preferences do not adhere to Setup Documentation, then reloads will not be triggered according docs.
Frankly, I was not able to set it up to work with web extension so I've either missed some detail there or it is a bug probably.
Plus, Preferences documentation tells that Web Extension approach should even work with head- and body-less documents.
liveServer.settings.useWebExt: : If it is true, Live Reload will be fully controled by the Live Server Web Extension. And also, it does not matter if your HTML have <body> tag or not, Live Reload will work for every file. :smile:
Default is false
Original question included just first the HTML example (and I've missed aforementioned documentation part) so it seemed that problem might be that uch empty file does not work with the Live Server (ritwickdey.LiveServer) extension's "Live Reload" feature, and it even warns you about that in a notification bubble:
Live Reload is not possible without a head or body tag.
I understand, don't show again
So use more complete HTML skeleton with those optional <head> and <body> tags if you want to see it live-reloaded upon save with this extension.
I have applied for Google AdSense for my website gulzari.in. I added the AdSense code between the <head> and </head> tags of .ejs file. After two weeks, I am getting the error "Connect your site to AdSense" even though I added the AdSense code between <head> and </head> tags of .ejs file.
I created the website using node js, express, MongoDB, .ejs, CSS and javascript.
Please help me! Where I am going wrong? Can I add Google Adsense code between the <head> and </head> in the .ejs file (https://ejs.co/) file? If not, what should I do to connect AdSense to my website created using nodejs, express, MongoDB, EJS, CSS and Javascript?
I am currently integrating a HTML5 app into Facebook and testing the iFrame mechanism. I am self-hosting the game content however when I point the Facebook app system to the content, the page is not being displayed.
My hosted page is a simple Hello World app for now as illustrated below, and can be found at: https://bluebeck.space/alienz/fb/
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>Alienz</title>
</head>
<body>
<div><p>Hello, World!</p></div>
</body>
</html>
The app configuration in the Facebook app developer console appears as:
I have used the following HTTPS url which has a valid SSL certificate as required:
The app page contents are empty and upon inspection of the Facebook app page DOM, it is apparent that the iframe contents have been stripped from the hosted page:
My expected result would be that the contents of the self-hosted webpage would be visible in the Facebook app page. The actual result is that the contents are empty and the DOM contains an iframe tag with empty head and body tags.
Thanks to #cbroe I was able to pin this down to an X-Frame-Options error. My solution has been to include the following php headers to the page:
<?php
header('X-Frame-Options: ALLOW-FROM https://apps.facebook.com/');
header('Content-Security-Policy: frame-ancestors https://apps.facebook.com/');
?>
This question is of type: What is your suggestion? If it does not respect SO guideline, I am sorry.
I am developing a RESTful application that will be available in Facebook Pages. The backend is developed in PHP using CodeIgniter with RESTful library for it.
The frontend is developed using BrunchIO in CoffeeScript.
The starting point of the application is home.php, a CodeIgniter controller, which loads a view looking like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>fBoutik - Shop</title>
<meta name="viewport" content="width=device-width">
<script>
require('initialise');
</script>
</head>
<body>
</body>
</html>
(Left out other data).
When initialise file is loaded, some stuff is executed. including initialising a User Marionette (Backbone) model.
A users logs in with Facebook on the frontend and a POST is made to the server to a controller, where I set some data on SESSION.
This is a little cumbersome, because every time the app is loaded, the Facebook login dialog appears (which goes away in a moment) and a POST is made on the server.
Is there a better way to sync the user data between frontend and backend ?
If you need more details, I'll update this post.
I'm experiencing problems adding a like button to an iFrame based page within my FB fan pages tabs. I'm using the JavaScript SDK and the Open Graph to specify the page I'd like the user to "like" (which is the current page within my FB pages).
The page is iFrame based, is an app in FB, and is accessed via the FB Page tabs of my FB Page. The problem is that Facebook is assigning the Like to my FB Page itself (my FB page homepage if you will) rather than the page In question (my test page – it’s set up as an app and appears in my FB Pages tabs under the name “og test”).
I’ve tried running the target page for the iFrame through the FB linter and its giving a strange error saying I’ve supplied the Open Graph Type of “Other” (I haven’t, I’ve supplied “website” in my META tag) see below:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.airport-parking-quote.co.uk%2Ffacebook%2Fog-test.php
Also, from looking at the debug page it seems that Facebook is either ignoring the QueryString in my “og:url” value and therefore only seeing my FB page’s vanity URL, or there is some kind of block on being able to Like iFrame based app pages.
Can anyone shed any light on this? I thought from this article it would be possible to achieve what I am trying to do:
http://www.insidefacebook.com/2010/09/09/like-buttons-app-content/
The code for the iFrame target page is:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Test Like</title>
<meta property="og:title" content="OG Test"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://www.facebook.com/EssentialTravel?sk=app_275969292428556"/>
<meta property="og:image" content=""/>
<meta property="og:site_name" content=""/>
<meta property="fb:admins" content="100002424161307"/>
<meta property="fb:app_id" content="275969292428556"/>
<meta property="og:description" content="OG test through canvas page"/>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '275969292428556',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true // enable OAuth 2.0
});
</script>
Test Page<br>
<script src="http://connect.facebook.net/en_US/all.js#appId=156081301143077&xfbml=1"></script><fb:like href="https://www.facebook.com/EssentialTravel?sk=app_275969292428556" send="false" width="450" show_faces="false" action="recommend" font=""></fb:like>
</body>
</html>
Anybody have any ideas?
Thanks,
Pjordanna
Unfortunately you can't set up a like button for an actual tab on a page.
As you have found out, trying to make a like button using a url such as https://www.facebook.com/EssentialTravel?sk=app_275969292428556 will just make a like button for the page not the individual tab.
The best way to make a like button for that specific tab would be to just use the URL of the app sitting on your server eg. http://YOURDOMAIN.com/YourAppDirectory