d3 map only works in Firefox - google-chrome

So, I have a map in d3 and it is only working in Firefox. It does not work in chrome. When I run the map from pre-pros, it works - I'm not sure how prepros works but it seems to deploy a faux server on my local machine. So with Prepros, regardless of the browser, everything works correctly. Without running my website on prepros, here are some of the errors- what should I do to ensure cross browser compatibility? Thanks.
//Some of the errors
file:///C:/Users/SXM274/My_Websites/Residents_Website/lib/d3.min.js Failed to load resource: net::ERR_FILE_NOT_FOUND
main2.js:11 initialized
main2.js:37 setting map
d3.v3.js:444 XMLHttpRequest cannot load file:///C:/Users/SXM274/My_Websites/Residents_Website/data/countries.topojson. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.xhr.send # d3.v3.js:444
main2.js:87 callback funtion initialized
main2.js:90 Uncaught TypeError: Cannot read property 'objects' of undefined

You can't load local file system resources using XMLHttpRequest for security reasons. You need to run a web server so that the Access-Control-Allow-Origin header can be sent as a response.
You can get around this locally by passing the --allow-file-access-from-files flag to Chrome.
Windows:
chrome.exe --allow-file-access-from-files
Mac:
open /Applications/Google\ Chrome.app/ --args --allow-file-access-from-files

Related

Problem with content encoding and connecting with DevTools to chrome headless

I am starting a headless chrome instance like that, e.g.
/opt/google/chrome/chrome --headless --disable-gpu --remote-debugging-port=9222 https://www.chromestatus
and want to connect with DevTools to this instance by entering localhost:9222 into a running browser. However, what I see is just some garbled stuff like this here "��TQo�0~ϯ���$���li51����manri̜8�������m::�...", probably because the server process at localhost:9222 sends the response gzipped, but does not include a content-encoding in the response headers (at least, that's my theory why this happens...)
Any idea how I can fix this? I haven't found any option to control this behavior (e.g. to tell the headless chrome instance to not zip the response data...)
BTW: I see the same whether I enter the url in chrome, chromium or firefox or use wget, and also whether I use chrome (Google Chrome 84.0.4147.105) or chromium doesn't make a difference...

selenium + chromedriver hangs at start, because chrome is connectting google server first

I use selenium to drive chrome to get some url, but it hangs for about 15 more seconds.
I found that chrome will try to connect www.googleapis.com, clients2.google.com or www.google.com:443. in my environment, google server is not accessible, so it hangs until the connects to google server all failed. this is disgusting. how can i fix it?
UPDATE:
I finally found a perfect solution, you can write a chrome extension and override newtab with:
"chrome_url_overrides":
{
"newtab": "newtab.html"
}
then set chrome start up page to newtab.
Becasue chrome will automatically disable extentions that is not uploaded to chrome extension store. You'd better use chromium instead.
Why not put www.googleapis.com in /etc/hoses (C:\Windows\System32\Drivers\etc\hosts on windows) and point to 127.0.0.1 so that it fails immediately?
I think this will fix the problem.
I try everything to disable chrome from connecting its servers but failed.
But I found a small trick to solve this problem:go to setting page and you can set a url when chrome starts. I set it to http://127.0.0.1:62333. Just a invalid url that failed immediately. this cannot disable chrome from connection its servers but the selenium does not hang anymore.

After disabling web security I still cannot overcome same origin policy

I am using google chrome version 43.0.2357.81 on OS X and attempting to display a webpage within an iframe.
ie:
I followed this link with instructions to disable web security and found it helpful for displaying local files within iframes but I am still encountering the same origin error when trying to display disparate web pages.
Disable same origin policy in Chrome
I ran the command open -a Google\ Chrome --args --disable-web-security in terminal and received the banner message confirming that it worked:
You are using an unsupported command-line flag: --disable-web-security. Stability and security will suffer.
However when I view my webpage in chrome I still got a same origin error and was unable to view the site within the iframe.
This has nothing to do with Chrome itself; the server you call within the iframe sends back a http header with
X-Frame-Options SAMEORIGIN
setting. Even "chrome.exe --user-data-dir=c:\tmp\chrome2 --allow-file-access-from-files --disable-web-security" does not disable the iframe same origin check in Chrome. The only option you have is to switch the X-Frame-Options of your server to
X-Frame-Options ALLOWALL
(if you can).

Load a local bitmap over file:// in easeljs

I'm trying to add a local jpg to my canvas using easeljs with the following code:
var bitmap = new createjs.Bitmap('img/gallery/1.jpg');
stage.addChild(bitmap);
This puts the image on the canvas. I then want to add an onclick event to the image:
var bitmap = new createjs.Bitmap('img/gallery/1.jpg');
bitmap.addEventListener("click", function(){
alert("CLICKED");
});
stage.addChild(bitmap);
This causes the following error:
Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.
Obviously a cross origin type issue. I noticed the following in the easeljs docs:
Images loaded cross-origin will throw cross-origin security errors when interacted with using a mouse, using methods such as getObjectUnderPoint, or using filters, or caching. You can get around this by setting crossOrigin flags on your images before passing them to EaselJS, eg: img.crossOrigin="Anonymous";
I tried this (following the steps here http://developers.spilgames.com/wiki/Developer_Platform_-_Learning_center_-FAQ-_HTML5_API_CreateJS_cross-domain_error) and then got two errors:
Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'null' is therefore not allowed access.
Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
As the project I'm building is a Cordova/Phonegap project which needs to be able to run offline, getting the images from a web server is not possible, as far as I can see the images must come over file://. Does anybody have any ideas of how I can get around this issue?
To prevent cross origin issues Chrome automatically blocks such images. You can run it in Firefox without causing the trouble.
In order to test these in chrome you have to run the file in local server like Apache tomcat.
Or use the running options run on server from Web storm like IDE.
If you don't have Web storm set up Apache tomcat server and copy your project folder in Apache tomcat/webapps folder. Now start the tomcat server, type http://localhost:8080/pathto your project folder in webapps.
ie if your project is in ../tomcat7/webapps/myproject/game.html
type http://localhost:8080/myproject/game.html
Create a another Chrome shortcut and add --disable-web-security to the /chrome.exe schortcut link. Restart chrome using this link.

Remote Debug "Chrome Mobile" to "PC"

I want to inspect and debug a Chrome Mobile application on my "chrome pc/machine",
so I've followed [this](http:// eveloper.chrome.com/devtools/docs/remote-debugging-legacy
) Google tutorial.
When I acessed localhost:9222, it lists the correct sites opened on my android chrome.
But the following error occurs when I click on "Inspectable pages". The console show the message
Document was loaded from Application Cache with manifest https://chrome-devtools-frontend.appspot.com/serve_rev/#178678/178678.manifest
Application Cache Checking event
[blocked] The page at 'https://chrome-devtools-frontend.appspot.com/serve_rev/#178678/devtools.html?ws=localhost:9222/devtools/page/0' was loaded over HTTPS, but ran insecure content from 'ws://<localhost>:9222/devtools/page/0': this content should also be loaded over HTTPS.
Uncaught SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
I encountered this problem too.
According to this report Chromium Issue 398817, you can add the --allow-running-insecure-content when launching Chrome.
This worked for me on Windows 7.