How to open third party site in iframe using React JS - reactjs

I want to open office 365 file in iframe of react web app, but it showing error in iframe but it's working propely in browser tab
Error:
Firefox Developer Edition Can’t Open This Page
To protect your security, login.microsoftonline.com will not allow Firefox Developer Edition to display the page if another site has embedded it. To see this page, you need to open it in a new window.

Related

React app not loading in IOS Facebook in-app browser

I have a full stack web application. The backend is built in Django and the front end is built in React. Everything works fine.
But the only problem is when I send that website's link to someone on Facebook/Messenger and when they click on that link, it opens in the Facebook in-app browser but it shows blank page.
But If I copy that same link and paste in Safari or any other browser, it loads without any issue.
What might be the issue? Why doesn't it work on IOS Facebook in-app browser?

Cypress can't load fonts from absolute url while open through its dashboard

I've a simple web server for e2e purposes, built with create react app and react app rewired.
Cypress runs perfectly against this web server, the only issue I am facing is about the fonts.
They are included with an external url.
Since I launch the web server regularly, the react application is able to be fed with the url for the proper fonts.
Once Cypress open the browser with the command cypress open the console log shows this error and fonts indeed are not loaded.
GET https://[URL.EXTENSION]/[FONT.WOFF2] net::ERR_EMPTY_RESPONSE
BEGIN EDIT
I noticed that the issue occurs on my company VPN and not on my regular network configuration, so as I already said, the fonts are not loaded just in the browser of Cypress, if I
view the website from a regular browser
access those fonts url copying them in the browser
any issue is occurring
END EDIT
Where is lying the error? Do I miss something in the configuration?
Thanks

Working interactively with WebExtensions in Firefox

I have a page which leads to other pages that loads mp3 files. I want to download them. All pages and links are build dynamically.
In a past I used Scratchpad but now it is deprecated and new API is here WebExtensions
I can't call browser.tabs.create from console. How can I interactively use WebExtensions in Firefox?
The code that used to be run from the Scratchpad can still be run from the Browser Console. The Browser Console can be open from the Web Developer menu or using Ctrl+Shift+J.

Microsoft Teams - downloading a file from within a tab

I've created a configurable tab app and have side-loaded it into Teams. On the content page, I want to allow the user to download a file. Simply linking to the file doesn't work. When the user clicks the link, the content iframe redirects and goes blank. I've tested this in the web app version of Teams at teams.microsoft.com and it works fine. The file gets downloaded as you would expect.
If it makes any difference, the content page is hosted in SharePoint on a modern page using SPFx.

In Chrome developer tools, under react tab it shows "looking for react" and freezes there

I tried to debug the react application, after running the application and moving to the React tab on Chrome Developer tools, It shows
"Looking for React"
and freezes there, nothing shows up.
But the application executes successfully and I am able to work on it, What can be the problem?
I had a similar problem, only the React tab in the dev tools did work. My solution was to:
Open the Chrome extensions tab, chrome://extensions/
Disable the React dev tool
Go to page where the React is not working
Close devtools
Reload web page and the chrome extension page (I think this checks for updates, not sure)
Turn on React Developer Tools
Re-open the React tool on the web page and it should be working again.
This Happens when you do a server side rendering, So the React code is not available to the browser, try to render it on the client side.
Ex:
in Webpack, If you are running your application in the dev server mode like
webpack-dev-server
you will see "Looking for React" on the React tab of the Chrome Developer tools
change your url from
localhost://8080/webpack-dev-server/
to
localhost://8080/
your React tab loads, I have shown it for webpack, This is common for all run it on the client side.

Resources