I am challenging with my own React Native browser, in that i want to inject my javascript code to iframes in page to discover Resource Timing API. With Main Frame everything is good but with iframes i got "Blocked" by not Same-Origin.
I resolved this by fetch it & add to iframe by srcdoc or access from local file. Some site is running but others are not because it has relative url in its resourses (Ex : image, js, css...). I also try html prop & local file for main frame with baseUrl prop & run ok, but with iframe whether there is anything as baseUrl ?
I think,
The same origin is security check for the site you are trying to access, and it can only be accessed by domain that the site is from, using iframe the origin will be your domain and child site will always block this as requesting domain is different.
If you still want to use the sites which throws same origin error you might need to whitelist your domain at there site first.
Related
I am about to deploy a React app using react-router in our intranet. I am using Kestrel without a reverse proxy.
When I start browsing the site by typing https://myserver/, the page gets served and I can click links which take me to https://myserver/subpage, but subpage does not exist inside wwwroot, only react-router uses this to determine the contents to display. Now if the user presses the browser's reload button, a 404 is returned.
Should I configure Kestrel to serve index.html in case the requested resource is not found? If so, yes? Or is there a more elegant solution?
Modern single page applications use routing mechanisms which don't have to rely on fragments or additional url parameters, but simply leverage the url path. How does the browser know when to ask the server for a resource and when to ask the single page application for a spa-page controlled by a router? Is there a browser API which makes it possible to take over the control of url handing which is then taken over by e.g. the vue-router or another routing spa library?
In Vue Router (and I assume other libraries/frameworks are the same) this is achieved through the HTML5 history API (pushState(), replaceState(), and popstate) which allows you to manipulate the browser's history but won't cause the browser to reload the page or look for a resource, keeping the UI in sync with the URL.
For example, observe what happens to the address bar when you enter this command in your browser's console
history.pushState({urlPath:'/some/page/on/stackoverflow'},"",'/some/page/on/stackoverflow')
The new URL is even added to your browser's history so if you navigate away from the page and come back to it you'll be directed to the new URL.
Of course all these URLs are non-existent on the server. So to avoid the problem of 404 errors when a user tries to directly access a non-existent resource you'd have to add a fallback route that redirects to your index.html page where your app lives.
Vue Router's HTML5 History Mode
React Router's <BrowserRouter>
How does the browser know when to ask the server for a resource and
when to ask the single page application for a spa-page controlled by a
router?
SPA Frameworks use routing libraries.
Suppose your javascript app is already loaded in the browser. When you navigate to a route that is defined in your routes array, the library prevents an http call to the server and handles it internally in your javascript code. Otherwise the call is forwarded to the server as a GET Http request.
here is an answer that discribes this behaviour with a clear scenario
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
We have a CMS that powers over 2000 school websites. The admin sites for each of those websites are all under the same root domain, e.g. *.myadmin.com. We are working on integrating OneDrive File Picker on multiple pages in all of those admin sites.
We have an issue with the Redirect URLs in the API Settings. We tried to set the Root domain field to myadmin.com by setting Redirect URLs: to https://myadmin.com. In JavaScript, we initialize the File Picker like this:
WL.init({
client_id: window.OneDrive.clientId,
redirect_uri: ''
});
WL.fileDialog({
mode: "open",
select: "single"
});
That results in a popup window saying:
We're unable to complete your request. Microsoft account is experiencing technical problems. Please try again later.
In the address bar of the popup window, there's a further error description(url decoded):
error_description=The provided value for the input parameter 'redirect_uri' is not valid. The expected value is 'https://login.live.com/oauth20_desktop.srf' or a URL which matches the redirect URI registered for this client application.
Putting a specific url, like https://subdomain.myadmin.com/homepage, in the API Setting would make the Picker work on that specific page, but not on other pages. Looks like it's looking for an exact match. Obviously it's not practical for us to create a separate app for each page that uses OneDrive.
The problem can be solved by disabling Enhanced redirection security on the API Settings page. That option existed a few weeks ago when we created an app for development, but was marked as deprecated. Today when we created a new app for production, it wasn't there anymore, which I think is now enabled for all new apps.
We had a similar issue with Dropbox Drop-ins Chooser, but we were able to solve the problem by setting myadmin.com as the domain of the app.
Is there any work around for this problem?
Thanks for your help and suggestions.
The only way I could get this to work was
Make sure the exact single web page on a single domain is configured and working for one drive (the url running OneDrive needs to be correctly configured in Microsoft account Developer Center
Then use this page inside an iframe (even if it is a completely different domain)
then use postMessage to pass the data back to the parent iframe to utilise
a working copy (link may be removed at any time )
Testing OneDrive in an iframe
Other pertinent urls
browser support for postMessage
Browser support for postMessage on stackoverflow
postMessage documentation
Some example usage of postMessage
example usage of postMessage
another example of use of postMessage
You can add multiple Redirect URLs as long as all of them are in the same subdomain. Each redirection URL needs to be specified explicitly:
The bug with the Microsoft developer console mention is resolved if you put the root domain you want first, then the 2 sub domains.
Add 3 entires:
1. domain.com
2. sub1.domain.com
3. sub2.domain.com
I am working on Ektron 8.6.0.060 CMS, on admin dashboard I add an custom widget in which I call an iframe for content page, on picking URL from iframe, 404 page not found error occurs. All URL and signs are using correctly still error occurs.
Be sure that you are entering a fully qualified domain name in your IFrame. Unless you are very careful about your paths, relative locations will likely be incorrect. Rather than "/page/item.aspx" or "www.site.com/page/item.aspx" make sure you include your protocol, e.g. "http://www.site.com/page/item.aspx" . This is particularly easy to forget if you are generating this url dynamically.
Also, if you are pointing to ektron content, make sure the content is published and public.