I have a very basic skeleton React project set up.
Created using create-react-app using react-scripts-ts for typescript support. I have added on redux, and react-router. However, I just noticed that there is an iframe that is being injected into my DOM at some point and I cannot figure out why or where it is coming from.
It appears to be some sort of amazon ad iframe.
This is the request made by the browser
curl 'https://s3.amazonaws.com/ym-hosting/faux-ad.htm?advertiserId=78946&brandName=faux' -H 'Connection: keep-alive' -H 'Pragma: no-cache' -H 'Cache-Control: no-cache' -H 'Upgrade-Insecure-Requests: 1' -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36' -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8' -H 'Referer: http://localhost:3000/' -H 'Accept-Encoding: gzip, deflate, br' -H 'Accept-Language: en-US,en;q=0.9' --compressed
Installed Dependencies
"dependencies": {
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-redux": "^5.1.0",
"react-router-dom": "^4.3.1",
"react-scripts-ts": "3.1.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#types/jest": "^23.3.9",
"#types/node": "^10.12.2",
"#types/react": "^16.4.18",
"#types/react-dom": "^16.0.9",
"#types/react-redux": "^6.0.9",
"#types/react-router-dom": "^4.3.1",
"#types/redux": "^3.6.0",
"#types/redux-devtools-extension": "^2.13.2",
"#types/redux-logger": "^3.0.6",
"#types/redux-thunk": "^2.1.0",
"redux-devtools-extension": "^2.13.5",
"typescript": "^3.1.6"
},
Has anyone else seen anything like this before? Is some module quietly injecting this to cash in on easy ad views?
Screenshots:
Network Tools
DOM
EDIT: Turns out this has nothing to do with React or create-react-app but with a browser extension "HoverZoom".
I don't believe it's a React problem, I think it must be a browser extension injecting the iframe. I recently started developing a web app of my own (using F# on ASP.NET Core) and saw the same thing in my app's DOM just yesterday; your question was the only thing that came up when I googled around, so I thought to check other sites and everywhere I go seems to have it.
The iframe doesn't appear to be malicious at first glance (it's a faux ad for a Santa Fe getaway), but who knows if there's tracking code on the other end following our movements. Now to start disabling extensions until I find the culprit...
Edit: Appears to be Hover Zoom? Not sure if you use that one, but disabling it removed the iframe for me, so now it's gone forever.
Related
I would like to download the images downloaded on strapi on fileRobot (Scaleflex). To do this, I completed the installation process (https://market.strapi.io/providers/provider-upload-filerobot#install-now-section).
However, nothing has changed and all my images are still saved on the /upload/ directory and i never see the filerobot API request on the network tab of my browser.
This is my dependencies versions :
"dependencies": {
"#strapi/plugin-i18n": "4.5.6",
"#strapi/plugin-users-permissions": "4.5.6",
"#strapi/strapi": "4.5.6",
"jks-js": "^1.1.0",
"mysql": "^2.18.1",
"provider-upload-filerobot": "^1.0.8"
}
I suppose that my plugins.js file is not used when i start strapi.
Is there an incompatibility ? Can you help me ?
Thanks
I have created a web part using SPFx React. Below is my package
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#microsoft/sp-core-library": "1.14.0",
"#microsoft/sp-lodash-subset": "1.14.0",
"#microsoft/sp-office-ui-fabric-core": "1.14.0",
"#microsoft/sp-property-pane": "1.14.0",
"#microsoft/sp-webpart-base": "1.14.0",
"#mui/x-data-grid": "^4.0.2",
"#pnp/sp": "^2.11.0",
"office-ui-fabric-react": "7.174.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-router-dom": "^5.3.0",
"typescript": "^2.9.1"
This web part is working correctly under the local workbench https://contoso.sharepoint.com/sites/contoso/_layouts/15/workbench.aspx
When I generate a package of that app and add that to the SharePoint page (https://contoso.sharepoint.com/sites/contoso/SitePages/contoso.aspx). It Freezes the Browser and returns the below errors.
not enough memory to open this page
Something went wrong while displaying the webpage
Can anyone help me with the same?
I have a Nuxt application which makes requests to an IIS server running NodeJS as an API. The IIS server is set to only accept requests from the frontend Vue application server (ports 80 and 443).
When I run the below from the command line on the frontend server I get a proper response and can see the request hit the IIS backend server via logs:
//This WORKS
curl --cacert certbundle.crt https://xx.xx.xx.xx/cost/woapprovedqueue
I'm making a seemingly similar request with Axios in my Nuxt application on the same frontend server where I ran the curl request but I don't get any response from the server and the request times out after some time with the error net::ERR_CONNECTION_TIMED_OUT.
When I copy the failed executed request from Chrome DevTools as cURL I get the following:
curl 'https://xx.xx.xx.xx/cost/woapprovedqueue' \
-H 'sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"' \
-H 'Accept: application/json, text/plain, */*' \
-H 'Referer: https://xxx.yyy.com/' \
-H 'DNT: 1' \
-H 'sec-ch-ua-mobile: ?0' \
-H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36' \
--compressed
If I take the above curl command to the frontend again and add my --cacert certbundle.crt, it works.
What do I need to do to make this request work with Nuxt/Axios? Is it an SSL/Certificate issue? I'm leaning towards "no" since I don't get ANY response and nothing shows in the backend API server logs. You'd think we would at least get a cert issue response.
I have a file in plugins/axios.js:
export default function ({ $axios, store, app }) {
$axios.defaults.httpsAgent = new https.Agent({
rejectUnauthorized: false,
});
}
I load the plugin with this in nuxt.config.js: plugins: [ '#/plugins/axios' ]
I have an axios baseURL in nuxt.config.js: axios: { baseURL: 'https://xx.xx.xx.xx' }
On my .vue page I have the following which makes the request:
//This does NOT seem to work. I get no response, timed out, and nothing in server logs.
this.queue = await this.$axios.$get('/cost/woapprovedqueue');
Any and all help will be VERY much appreciated as I've been trying to figure this out for a while now. :)
Update, providing the fetch query copied from Google Chrome Dev Tools:
fetch("https://xx.xx.xx.xx/cost/woapprovedqueue", {
"headers": {
"accept": "application/json, text/plain, */*",
"sec-ch-ua": "\"Google Chrome\";v=\"89\", \"Chromium\";v=\"89\", \";Not A Brand\";v=\"99\"",
"sec-ch-ua-mobile": "?0"
},
"referrer": "https://xxx.yyy.com/",
"referrerPolicy": "strict-origin-when-cross-origin",
"body": null,
"method": "GET",
"mode": "cors",
"credentials": "omit"
});
It turns out the issue was related to HTTPS/SSL. I needed to set up and use a proxy. I was getting a CORS related issue which only showed up when inspecting the network events in Firefox (Chrome did not show this level of detail for some reason). These are the settings that eventually worked in nuxt.config.js:
axios: {
https: true,
proxy: true,
prefix: '/api/',
},
proxy: {
'/api/': { target: process.env.API_BASE_URL, secure: false, pathRewrite: {'^/api/': ''} },
},
I get this error:
react__WEBPACK_IMPORTED_MODULE_1___default.a.createContext is not a function
I see all the others questions related to this topic but with no success, my versions is this :
"dependencies": {
"#south-paw/react-vector-maps": "^3.0.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.5.0",
"react": "^17.0.1",
"react-bootstrap-calendar": "0.0.3",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-regex": "^1.0.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
I also create a new react empty project but the result is the same and i really don't know how to solve the problem at this time
-----EDIT-----
I uninstalled and installed again nodejs and npm and i create a new project using yarn instead, now the problem is solved but anyway i still don't understand the meaning of this error
I solved the issue by uninstilling react and nodejs, probably i've done some mistake with versions
I am using react-router-dom to navigate to different pages in my app. I have been testing things all day long and with different scenarios end up with the following:
I target an invalid path, which should redirect me to the home path
I push/replace the history
the browser URL updates fine
but the location doesn't finish updating, I end up stuck in a half baked value such as this (rendering stops half way):
location: {"action":"REPLACE","location":{"pathname":"/home","search":"","hash":"","state":null,"key":"ui1fiedd"}}
Whereas a correct value would be:
location={"pathname":"/home","search":"","hash":"","state":null,"key":"ui1fiedd"}
This happens when I use different approaches:
call history.push(newPath)
render <Redirect to="/home" />
render <Redirect to={{ pathname: "/home" }} />
with or without the push option
getting location from withRouter, from useLocation(), or from a Route render call
I don't have a good clean test case right now, all of this is in a pretty complex and big app. But does this ring any bell? I am surely doing something wrong, but have been looking at it all day and cannot see it.
My dependencies are:
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
Thanks!
Edit 8/9/2020
This looks to be a package version issue... I had recently done a few updates. Thought this might the issue, so reverted my package.json, ran npm i and thought I was ok...
I just wiped my modules, package-lock.json and re-ran npm i, now all is fine.
So the following transition screwed things up somewhere:
"#material-ui/core": "^4.9.8" >> "^4.11.0"
"history": "^4.10.1" >> "^5.0.0"
"react-helmet": "^5.2.1" >> "^6.1.0"
"react-router-dom": "^5.1.2" >> "^5.2.0"
"react-scripts": "^3.4.1" >> "3.4.1"
I should have looked at this ^5.0.0 version more closely :-)
Mind you, I also had really strange behaviour at the same time with this transition:
"react-tabulator": "^0.10.3" >> "^0.13.2"
Some pages containing tabulator tables could not load at all any more.
Issues were due to some incompatibility between some package/scripts versions, as described in the question's body.