Problems with my Firefox addon and cross domain https - javascript

I have an addon for Firefox which modifies a page at http://target.com with data from http://data.com. It does this by making an XMLHttpRequest() in the addon javascript and modifying the webpage accordingly. Neither the target nor the source servers are under my control.
This all worked fine until the target.com website changed to using https. As I was loading data from an http: address I got the following error:
Blocked loading mixed active content
Fortunately data.com also supports https, so I changed the data lookup address to https://data.com, and then I got
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://data.com
I read here that I could add the following to my package.json
"permissions": {
"cross-domain-content": ["https://data.com"]
}
And now I don't get any errors, but the Developer Tools Network page doesn't show any connections being made.
Have I hit a dead end? I understand that CORS requires server support but I assumed that as it worked prior to the target server moving to https it would still work now.
Cheers
Rich

That is one of the issues with using libraries (and not Firefox API)
Try using the native Firefox API eg: Connecting to Remote Content
Native Firefox API runs in the browser scope so there is no CORS to consider.

Related

Why is Application Insights blocked on Firefox as CORS?

I am using the Application Insights JavaScript SDK on my website and Firefox is blocking the requests back to Azure. It is however working on Chrome.
The website is running on https and Application Insights works correctly on Chrome.
On the Console in Firefox I see the following warning:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dc.services.visualstudio.com/v2/track. (Reason: CORS request did not succeed).
Why is Firefox identifying the request as a blocked CORS request, but Chrome doesn't?
I would like the Application Insights request to succeed from Firefox as well.
Did you installed an ad blocker extension (i.e. uBlock origin)?
If yes, try to disable it.
Couple of points to look at:
Which version are you using for AI. Try upgrading your package to latest one:
You can go ahead try adding the site to exception and see if it works, it could be because of the firefox exception too:
Firefox 'Cross-Origin Request Blocked' despite headers
Last and most importantly check the headers as mentioned by #Bergi in the comment to see if headers are same for both browser.
Additional reference: https://github.com/Microsoft/ApplicationInsights-node.js/issues/133
http://testingfreak.com/how-to-fix-cross-origin-request-security-cors-error-in-firefox-chrome-and-ie/
Hope it helps.

Chrome not supporting getUserMedia

I have a form in my laravel webapp where the user needs to add a profile picture through webcam. While developing in localhost(secure origin), it was working fine but now when i am trying to access it using my IP address, it doesn't seem to work.
I used "navigator.mediaDevices.getUserMedia" for accessing webcam while developing my project but now when the website is made live(or testing through my IP), chrome says that "getUserMedia() no longer works on insecure origins". I also tried Webcam.js but same came across the same error.
navigator.mediaDevices.getUserMedia(constraints).
then(handleSuccess).catch(handleError);
Error output in console:
[Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
Starting with Chrome 47, getUserMedia() requests are only allowed from secure origins: HTTPS or localhost.
did you check this page? I think you're using HTTP. I'd like to switch to HTTPS and test it.
https://developers.google.com/web/updates/2015/10/chrome-47-webrtc?hl=en
As you can see from the doc, chrome requires a secure context for using it:
So you must switch to https for testing it in chrome

How to use fake object in javascript during development and avoid CORS error

In a web page I load from a REST API some data to display in the page.
But during developing with Visual Studio Code and Live Server I have CORS errors because I'm trying to get data from the production source.
How can I develop and avoid this error?
Thanks!
If this is just a problem during development - Depending on your browser there are extensions available to disable CORS.
If you are using chrome there is one called Allow-Control-Allow-Origin: *.
There is a similar one for firefox, Allow CORS: Access-Control-Allow-Origin.

How do I allow Cross-Origin Requests from greasemonkey scripts in Firefox?

I'm developing a Greasemonkey script that implements a couple of tools onto a webpage. This script makes a request for data from
http://localhost/chess/heartbeat.php
Now currently in Firefox I am getting this console error which totally stops my jQuery AJAX request for data.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
http://localhost/chess/heartbeat.php.
This can be fixed by moving the resource to the same domain or enabling CORS.
I am able to work around this using Google Chrome. When I have it as a simple browser extension for chrome, I'm able to have it do the same thing as Greasemonkey and I can add the following permissions to the manifest file for the plugin which allows me to make the same data request which Firefox blocked:
"permissions": [
"<all_urls>"
]
Anyway, this works on chrome, but I want to achieve the same effect on Firefox. I've been researching this issue and I can't find a simple answer.
Normally XMLHttpRquest, and that includes jQuery's higher-level API around it, does not allow unrestricted cross-site requests but is limited by the same-origin policy and CORS.
As #epascarello already pointed out, you may use GM.xmlHttpRequest which allows you to perform any cross-site XHR even when the server does not implement CORS or allows the origin site. It also comes with some other goodies.
You should add a #grant GM.xmlHttpRequest metadata block to your user script or your script may break in the future.
Since you mentioned Chrome extensions: Firefox extensions can perform cross-site XHR as well. e.g. most user scripts should be easily portable to an SDK add-on using PageMod and enabling certain permissions analog to what you'd do in a Chrome extension.

Avoid SSL certificate when developing

I'm developing a Chrome Extension to add some functionality to Gmail. My problems start when I want to show an Iframe which contains a "non certificated" page (http instead of https). I've tried to publish my page to an IIS 7 server using SSL but the Javascript returns an error because I don't have a SSL certificate.
I've tried to run Chrome with the --allow-running-insecure-content tag, but it isn't work for the javascript security exceptions.
My question is: is it possible to develop without the certificate and buy it later?
Edit: The exact JavaScript error is:
Uncaught SecurityError: Blocked a frame with origin "http://localhost:1851" from accessing a frame with origin "https://mail.google.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
i think you should upload your project on server, you face some security issues when you try to access from your local host
I've found the solution:
I've run my web application in SSL mode, like they say in this link, without using any certificate. When the javascript error appeared in the console, I just copied the url that causes the error (https://localhost/...) and loaded it in a new tab, ignoring the Chrome security warning. Then I've reloaded the Gmail page and, voilĂ , works like a champ.
It is necessary to repeat the proccess every time that Chrome is executed.

Categories