I'm trying to write an app using Sencha Touch that ultimately targets iOS and Android. It's supposed to log into the corporate web server and then retrieve and parse some JSON data. It should be very simple. However I'm very new to both Sencha and Javascript, so I'm having a hard time doing this sort of client-side authentication. I can't even seem to make it authenticate from a web browser on my dev machine.
I used this link to help create my login page:
http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application/
But when I attempt to log in I seem to get the following error message and a null object:
XMLHttpRequest cannot load https://www.server.com/index.html?=_dc1234567890123
Origin http://localhost:8000 is not allowed by Access-Control-Allow-Origin.
Does anyone have any advice or good resources on getting this app to log in? Any help would be greatly appreciated!
Steve, the "is not allowed" error is returned because your login request violates the browser's same-origin policy (essentially it states that all XhrHttpRequests must go to the same domain the page was initially loaded from).
Some browsers offer ways of disabling this error temporarily (which might be fine for short-term development purposes), but for the long-term you'll either need to host your application in the same domain as your backend server, or look into using CORS or JSONP for your requests.
Your AJAX request violates the Same-Origin-Policy. That's why you are getting the error message. If you are using chrome for debugging u can disable the cross-domain Javascript security by doing the following :
For Windows:
1) Create a shortcut to Chrome on your desktop. Right-click on the shortcut and choose Properties, then switch to “Shortcut” tab.
2) In the “Target” field, append the following: –args –disable-web-security
For Mac, Open a terminal window and run this from command-line:
open ~/Applications/Google\ Chrome.app/ –args –disable-web-security
For Ubuntu, Open a terminal window and run this form command line:
open /usr/bin/ and execute ./google-chrome --disable-web-security
There is extension for chrome that does the work:
Allow-Control-Allow-Origin.
If you want to active it when the browser started, you have to press on the icon.
Related
What I want to do
Make a simple socket connection to a server on the browser. I want to not send any header information with the socket connection.
The Problem
It looks like I am unable to make a socket connection with javascript that does not send header data (Is there a way to do a tcp connection to an IP with javascript?).
I thought maybe I could make a connection with a chrome extension, however it looks like the socket API is only available for chrome apps (Google Chrome Socket API in extensions).
I am thinking that I might need to make a native application that will make socket connections through requests made by the browser using Native Messaging.
Is there anyway I can achieve this or am I out of luck?
Raw socket connections through the browser are wrapped up in security concerns. Users can be easily manipulated to allow things to run that shouldn't.
TCP and UDP Socket API
W3C Editor's Draft 20 January 2016
is located here.
http://raw-sockets.sysapps.org/
Mozilla's API information here: https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/API/TCPSocket "This API is available on Firefox OS for privileged or certified applications only."
If you work with raw TCP connections. I would suggest
(1) downloading PHP onto the local computer. PHP has a developer web host build in so you can run whatever application you want on PHP using the browser as your GUI.
(2) download node.js.
You are not out of luck you just need to achieve it with the understanding that you are working outside the box for normal browser based scripting created from security concerns, and that means the user/client needs to install something manually.
If you must use chrome browser on the client side, you will need to make an -extension- correction webapp. You can as a developer make one that you can use on your own computers.
https://developer.chrome.com/extensions/getstarted
https://developer.chrome.com/apps/first_app
Load the extension#
Extensions that you download from the Chrome Web
Store are packaged up as .crx files, which is great for distribution,
but not so great for development. Recognizing this, Chrome gives you a
quick way of loading up your working directory for testing. Let's do
that now.
Visit chrome://extensions in your browser (or open up the Chrome menu
by clicking the icon to the far right of the Omnibox: The menu's icon
is three horizontal bars. and select Extensions under the Tools menu
to get to the same place).
Ensure that the Developer mode checkbox in the top right-hand corner
is checked.
Click Load unpacked extension… to pop up a file-selection dialog.
Navigate to the directory in which your extension files live, and
select it.
Alternatively, you can drag and drop the directory where your
extension files live onto chrome://extensions in your browser to load
it.
If the extension is valid, it'll be loaded up and active right away!
If it's invalid, an error message will be displayed at the top of the
page. Correct the error, and try again.
This insures that non developers don't load an extension which does not comply with the normal security concerns.
Communicating between with the script on the web page to the extension.
Can be done with message passing ... https://developer.chrome.com/extensions/messaging
The extension can add content directly to the web page which is available to the script on the web page. If for example the extension replaced the web cam image with a static image when the webcam script reads what it believes is the webcam it gets the static image instead, which explains why I look like an alien from space on the webcam. Although I did not create an extension to do that, I merely modified an existing extension to replace the function that gets the webcam image with a function to get a static image.
You can use SignalR, it is javascript library (JQuery Plugin) and it enables you to open web sockets from the browser to a server. Please check the following links:
https://blog.3d-logic.com/2015/03/29/signalr-on-the-wire-an-informal-description-of-the-signalr-protocol/
http://blog.teamtreehouse.com/an-introduction-to-websockets
https://github.com/SignalR/SignalR
I've been prototyping a few pages that use webkitspeechrecognition. I learned quickly that you cannot load these from a file, you have to serve them from a webserver. I'm using osx so I just moved my files to the local apache that was already running and enabled. This worked fine for quite a while.
For some reason, none of my pages that were working fine will prompt me to deny/allow the microphone usage. I even copied an existing working page from another webserver and if I load it from http://localhost/speech.html it will not prompt. It skips the prompt and goes to my recognition.onerror handler and logs "not-allowed"
However, if I load the same page (or any of my other prototypes) from http://127.0.0.1/speech.html it works fine. This made me think I had accidentally cached a response like "always deny" or something. I think I cleared/reset all my chrome settings but I'm still getting the same behavior. 127.0.0.1 will properly prompt, but localhost will not prompt at all.
Where might chrome be storing some additional settings that I need to clear?
Your microphone settings might be stored at chrome://settings/contentExceptions#media-stream-mic. You can view the websites that have permissions saved there.
getUserMedia permissions requesting in chrome currently works something like:
If you have a request by http, getUserMedia will only remember the permissions for that session. If you go back to the same page. it asks again.
If you do the same request by https, once you set the permissions, you always have permissions.
My memory is that an exception is granted for http://localhost/... for debugging purposes. In this case, you don't need to repeatedly grant
permissions.
If you use http and 127.0.0.1/, I think no exception is made.
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
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.
We are trying to figure out how something works on the web (for web scraping/automation) and one of the web pages we are working on issues a popup to do some of the work. One of our most commonly used debug tools is the Chrome network tab in Developer Tools, hit "record" do some work, and then examine what was done and then replicate the work done "offline".
However the Developer Tools (in Chrome, Safari and Firefox - all work the same) do not follow requests across a popup, even if you hit "record".
Is there some configuration value I'm missing, or some way to record all network events? We can't use tcpdump/wireshark for this because it's all done over SSL. One option we've considered is a man-in-the-middle https proxy, but I can't find anything pre-written so we'd have to create one ourselves.
I don't know of any way to follow the requests across pop-ups, as each window has its own Web Inspector, however you can use Fiddler to inspect HTTPS requests. It will MITM, and subsequently throw a certificate error, which should allow you to inspect all requests in the order that they happened.
You can use Charles Web Debugging Proxy, which is an app that lets you see all the traffic and even replace some responses with your own. Of course that may break HTTPS so you have to accept the certificate errors, but that's usually a minor problem. It works on Win, Mac and even Linux.
The object inspector cannot inspect what isn't in the current page. Therefore, you will need to open the inspector inside the popup url with same parameters in order to see what it does.
As a tool, you can use a web sniffer to see exactly which url were called during the process.
In a Chrome Extension, I'm trying to get gmail compose body content.
An error jumps out sporadically, and does not prevents it from working.
This is being run as a content script. I believe permissions are not the issue here, because when there is a permission missing, the error is different and the operation is blocked by Chrome, definitely not the case.
Error comes out in this line:
encodeURIComponent($canvas.find('iframe').contents().find('body').text());
where
var $canvas = $('#canvas_frame').contents();
Any information on this error and a possible turnaround?
You can not read cross site content using javascript. XSS Auditor of Google Chorme will never allow this.
Please have a look at http://en.wikipedia.org/wiki/Same_origin_policy
UPDATE 1 -
There is support for cross site communication using window.postMessage() in Chrome 2+. Please have a look at this documentation https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
To give a good answer, we need more information:
where exactly you are running this code, is it in the web page, the extension's content script or the etension's background script?
Also, what does your manifest.json file look like? Which sites have you asked for permission to run on.
I suspect this is a case of a badly-written error message and really it is saying: your extension does not have permission to run on apis.google.com. In that case, simply add permissions for apis.google.com. More details are in the Chrome extensions docs: http://developer.chrome.com/extensions/manifest.html#permissions