simplemodal cross domain issue - simplemodal

I am using simplemodal and js is loading from another site so both window.parent.ModalBox.close(); and window.parent.$.ModalBox.close(); not working.
I am getting this javascript error "Uncaught TypeError: Cannot call method 'close' of undefined"
This is working on Firefox but have issue in Chrome.
chrome also showing this error "Unsafe JavaScript attempt to access frame with URL"

The same origin policy doesn't allow accessing DOM properties and methods across different domains. You can use postMessage API for enabling cross-origin communication.

Related

Google Picker refuses to load with error "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided"

I am trying to load Google Picker.
I am using this npm package https://www.npmjs.com/package/google-picker
When loading the picker, the auth windows show up, and I can select my Google account.
After auth is done, it tries to open the Google Picker iframe.
It is at this point the iframe fails to load and I get the error
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin
I have searched this issue and many solutions say make sure to add your domain to the authorized JS origins in google console
I have done this! The domain is definitely in the authorized domains for the client. Google sign in works with my app.. but I just can't seem to get the Picker to work.
I have tried both running from localhost and uploading to the server. But I get the same error.
The server I am using is HTTPS. And the iframe URL for picker is HTTPS too. So this should not be a problem.
What else can I try? I am out of options. I am following the API exactly. I have put in all the right keys.
From this SO post answer, it is cited that the issue is with the target origin which is https.
I believe this is an issue with the target origin being https. I
suspect it is because your iFrame url is using http instead of
https. Try changing the url of the file you are trying to embed to
be https.
For instance:
var id = getId(url);
return '//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
}
to be:
var id = getId(url);
return 'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
}
The reason Google Picker was not showing was actually unrelated to the console error.
Even though the console error appeared, the picker still works.
But I thought it was not working because I was using the pickadate library which had css that conflicts with Google Picker.
More info about that issue here: https://github.com/amsul/pickadate.js/issues/619

Safari: XMLHttpRequest error

This happens only in Safari.
I create XMLHttpRequest and get console error
XMLHttpRequest cannot load 192.168.0.87/cgi/app due to access control checks
The strange thing is, that is I try the same thing second time, it goes through. Is there some difference in Safari from Chrome, IE, Edge and Firefox? It is not cross site scripting case, it loads from the same server as the page itself.

Invalid javascript/JSONP response from Soundcloud API

When I include this url as a <script> in my HTML document, Chrome does not call my callback function, whereas it works perfectly for other urls returned by soundcloud's resolve api.
After a long investigation using Chrome Dev Tools, I finally found out that the javascript returned by that call fires a SyntaxError (cf the screenshot below).
How can I get my callback function to be called as usual for that file?
DevTools actually pinpoint the issue:
There is an unallowed character (\u2028) in the response. SoundCloud messed up sanitizing that. This JSONP response is invalid in all browsers.
To work around it, you can simply fetch the JSON file directly. SoundCloud CORS setup seems to allow that.

Google+ Sign in error in chrome

Uncaught SecurityError: Blocked a frame with origin "http://dev.c.com" from accessing a frame with origin "https://accounts.google.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
Implementing G+ sign in . This error comes in chrome and rest of the browsers - firefox and safari it works fine. Sometimes it works on chrome as well and some times it fails with above error
All in your exception message: "Protocols must match."
I have solved it by setting "https" protocol for my site and binding to Self-signed SSL certificate.
Try clearing your cookies. That worked for me.

What is the path to signalr hubs when using ElmahR?

I am trying to add some custom functionality to ElmahR dashboard page and having some issues. I have started a new project, added ElmahR dashboard NuGet package. Configured all source applications and it is all working fine as expected.
Now I want to add some custom functionality to the dashboard page. As part of this I needed to add some UI to the dashboard page, a new Hub, JavaScript etc. The custom functionality is not related Error Logging. It is completely different. It is something we would like it to add to the dashboard page. I have added new Hub, JavaScript, HTML markups but it doesn't work as expected.
I ran into the following issues:
When i try to access /signalr/hubs, I get 404 Not found error. I searched online for this error and it usually happens if you haven't configured the Hub route. I tried to add RouteTable.Routes.MapHubs() in global.asax file. However it says that A route named 'signalr.hubs' is already in the route collection. Makes sense because I am using ElmahR and because it relies on SingalR, it would have already added it to the route collection. So what is the path to /singalr/hubs in ElmahR application? When using signalR in your standard asp.net application, the usual path to hubs is /signalr/hubs but what path is it when using ElmahR?
I am getting JavaScript error "Uncaught TypeError: Cannot read property 'client' of undefined" at the line where I am trying to access hub.client. I guess it is failing because it is not able to find the new hub that i added.
Everything works fine if I copy the hub, associated JavaScript and HTML to a different ASP.NET MVC project. For some reasons it does not work with the Project that uses ElmahR. I know there is nothing wrong with the code in Hub and JavaScript as it works fine with a standard ASP.NET MVC project. Basically all I want to do is to add a singalR hub to a project that uses ElmahR. Also I can't seem to figure out the URL path to Hubs in an application that uses ElmahR. Usually the path is /signalr/hubs
UPDATE:
After further investigation, I figured the path to hubs in ElmahR dashboard application. It is /signalr101/hubs. However when requesting this, it errors: "Uncaught Error: SignalR: JavaScript Hub Proxy generation has been disabled". It appears that ElmahR would have disabled JavaScript proxies, probably by setting DisableJavaScriptProxies property of the application's IConfigurationManager to true (https://github.com/SignalR/SignalR/pull/1222). I think because of that I am getting "Uncaught TypeError: Cannot read property 'client' of undefined in my JavaScript at the line where it is trying to access hub.client. If the JavaScript proxy is disabled, then is there any extra work I have to do in my JavaScript and Hub so that I don't get this JavaScript error.