I want to load some external scripts in a sandbox page and then on event page uses message passing to communicate with the sandbox page to use those scripts. I am basically following these two documentations:
https://developer.chrome.com/extensions/sandboxingEval
https://developer.chrome.com/extensions/manifest/sandbox
This is the manifest.json I use with the sandbox and event page config:
{
"manifest_version": 2,
"name": "Diver",
"description": "Diver",
"version": "0.0.1",
"devtools_page": "devtools.html",
"minimum_chrome_version" : "57",
"background": {
"page": "eventpage.html",
"persistent": false
},
"sandbox": {
"pages": ["sandbox.html"]
}
}
This is the eventpage.html, which loads the sandbox.html in an iframe:
<!doctype html>
<html>
<body>
<iframe id="sandboxFrame" src="sandbox.html"></iframe>
</body>
</html>
This is the sandbox.html, which loads an external script:
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ajv/5.2.3/ajv.min.js"></script>
</head>
<body>
</body>
</html>
When I try it I am getting an error saying the loading of the external script is blocked by content security policy. So looks like this is not allowed according to the doc:
"Starting in version 57, Chrome will no longer allow external web content (including embedded frames and scripts) inside sandboxed pages. Please use a webview instead"
"Also, the CSP you specify may not allow loading external web content inside sandboxed pages."
The doc asks me to use webview but webview is only available in Chrome App. Next I upload sandbox.html into a cdn and replace it in the eventpage.html:
<!doctype html>
<html>
<body>
<iframe id="sandboxFrame" src="https://www.somecdn.com/sandbox.html"></iframe>
</body>
</html>
The external script loads this time, probably because that external page doesn't have the CSP blocking the script.
I don't understand why the same script is blocked when used in sandbox.html in the extension but not when sandbox.html is loaded from an external domain. I know it's because of CSP, but why do Chrome decided to block it this way. I tested it in Chrome 56 and it's not blocked. Only after Chrome 57 it's blocked.
Related
In my web app i allow users to download html files they uploaded.
I want to make this download to be maximum secure.
If users just open a html in new tab, it is insecure, there can be some script to catch cookies or so.
I added the header "Content-Security-Policy: sandbox" for such downloads. And it solves the problem.
But i got the problem with some subgroup of html files, which are "bookmarks". Files contain simple html like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Opening http://example.com</title>
<meta http-equiv="REFRESH" content="0;url=http://example.com">
</HEAD>
<BODY style="font-family:Tahoma;Arial;font-size:12px;padding:20px;color:#aaa">
Opening <b>http://example.com</b>...
</BODY>
</HTML>
After it is opened in new tab, i need a user to be redirected to the host in the file.
It works without the header "Content-Security-Policy: sandbox" , but doen't work with it.
I tried different sandbox modes
Content-Security-Policy: sandbox allow-scripts
Content-Security-Policy: sandbox allow-top-navigation
But nothing allows to execute that redirect.
is there a way to do it?
When i open an swf file, Google Chrome downloads it, when it's already downloaded.
And then says "this kind of file can harm your computer", and it just wont play it.
I'm a sysadmin and today a user brought this to my attention. It seems that Chrome no longer supports the direct opening of these file types. Make sure you have the relevant adobe flash version installed and then use IE11 or Firefox. For more info see here: https://bugs.chromium.org/p/chromium/issues/detail?id=767342
Mike
Imbed the swf files in HTML and then load the html page. Note that you wont be able to directly access the HTML page, put the html folder structure in local tomcat and then access the content and obviously enable the flash player on chrome.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="CaptivateContent">
</div>
<script type="text/javascript">
var so = new SWFObject("viewer.swf", "Captivate", "1025", "810", "10", "#CCCCCC"); //change the swf file name
so.addParam("quality", "high");
so.addParam("name", "Captivate");
so.addParam("id", "Captivate");
so.addParam("wmode", "window");
so.addParam("bgcolor","#f5f4f1");
so.addParam("menu", "false");
so.addParam("AllowScriptAccess","always");
so.addVariable("variable1", "value1");
so.setAttribute("redirectUrl", "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash");
so.write("CaptivateContent");
</script>
<script type="text/javascript">
document.getElementById('Captivate').focus();
document.Captivate.focus();
</script>
</body>
</html>
This is my index.html file
<html>
<head>
<title>VR Sample</title>
<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
</head>
<body>
<div id="vrview">
<iframe width="100%"
height="300px"
allowfullscreen
frameborder="0"
src="http://storage.googleapis.com/vrview/index.html?image=ffff.jpg&is_stereo=true">
</iframe>
</div>
</body>
</html>
And this is the structure of the website folder
I tried hosting it in Webserver for chrome as per the instructions in the google codelabs. But I clicked the 127.0.0.1.8887 url, I got a blank page with no files or folders. Then I tried hosting it on XAMPP and It did work. However, I did not get the panaroma image. Instead I got this error
I took the 360 image with google camera app and converted it to stereo with the google's online converter but got the same error. I also tried downloading the VRView repo from github and modified the code as
src="vrview/index.html?image=ffff.jpg&is_stereo=true"
that too didn't work.
You are using the iframe version of vrview meaning when you request "ffff.jpg", you are actually requesting:
http://storage.googleapis.com/ffff.jpg
Try using the javascript version
Try this:
<html>
<head>
<script src="http://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
<script>
window.addEventListener('load', onVrViewLoad);
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
image: 'http://storage.googleapis.com/vrview/examples/coral.jpg',
is_stereo: true,
width: '100%',
height: 300
});
}
</script>
</head>
<body>
<div id="vrview"></div>
</body>
</html>
Note: chrome cannot access files off a harddrive.
EDIT: This is due to CORS.
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.
Thanks to #Eleanor Zimmermann for noting this.
I wish to wrap my web app inside a Chrome Packaged App.
My ultimate goals are as follows:
Mask the URL to hide my generic (second-tier) domain (e.g., http://my-app.big-company.com).
Mask the browser to give the appearance of a native desktop app.
Leverage whatever mobile conversion that Chrome Apps for Mobile might provide to allow me to use a single codebase and set of web assets (HTML, CSS & JS) to deploy my app to the mobile app stores for Android and iOS.
Here is what I have so far:
manifest.json
{
"name": "Hello World!",
"description": "My first Chrome App",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "icon-16.png", "128": "icon-128.png" }
}
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 400,
'height': 500
}
});
});
window.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="http://example.com/"></iframe>
</body>
</html>
I suspect, at a minimum, there is a problem in the window.html. Specifically, I doubt I should be using an <iframe> to fetch my web app content.
Here is the documentation I have been following.
Please help.
You can do this, but you need another tag; specifically, <webview> tag instead of <iframe>. See linked documentation for all the possibilities of that tag. It also requires the "webview" permission.
Do note that this does not work well with the "should behave like a native app" philosophy, but it is possible.
This documentation suggests the OP's approach will not work and, instead, you need to package and install all the assets locally.
This question already has an answer here:
Chrome Extension With Background Page Not Working With Manifest Version 2
(1 answer)
Closed 7 years ago.
I am trying to use Socket.io in my Chrome extension, but for some reason I can't get it to work. The following is the code I have in my background.html:
<!doctype html>
<html>
<head>
<script src='socket.io.js'></script>
<script>
var socket = io.connect('http://localhost:8080/');
chrome.browserAction.onClicked.addListener(function(tab) {
socket.send('hi');
});
</script>
</head>
<body>
</body>
And my manifest.json I have the following for loading the background page and some permissions:
"permissions": [
"http://*/",
"http://*/*"
],
"background": {
"page": "background.html"
},
This does not work however. When the extension is loaded, it should connect to the Socket.io server, but it doesn't. I am unable to figure out what is causing this. This works perfectly when I simply run the background.html file. Any help is greatly appreciated!
According to the Manifest v2 "migration guidelines" you should "remove JS code contained within tags and place it within an external JS file".
Inline JS is not executed at all, so place it in external JS files and then either import them in background.html or use the scripts attribute of the background attribute in manifest, e.g.:
"background": {
"scripts": [
"socket.io.js",
"background.js"
]
}
Try Using its CDN - https://cdn.socket.io/socket.io-1.0.6.js, and in the manifest.json file add
"content_security_policy": "script-src 'self' https://cdn.socket.io; object-src 'self'"
Worked for me.
socket.io.js isn't a file on the filesystem, it's supposed to be served by the server of your choosing. In your case, localhost:8080.