The details of this issue are quite complex and confusing, but I will try to explain as clearly as I can.
I have written an app using NWJS which uses an iframe within which I am loading the web page generated by similar devices (surveillance cameras) on my local network, using ip addresses (192.168.1.252 and 192.168.1.245). One device is newer than the other.
I am able to access the older camera just fine using the url http:/192.168.1.252/ in the src attribute of the iframe.
However, I am unable to access the newer camera this way (http:192.168.1.245/), and get a "Page not found" error. BUT, I can access either camera just fine in Firefox using the ip address. HOWEVER, in Chrome, I can only access the older camera; the newer one gives me a "connection not private ... NET::ERR_CERT_AUTHORITY_INVALID" error.
I found this question on SO that is related, which talked about things getting screwed up due to redirection: HTTPS iframe inside a HTTPS page not working . In Firefox (where I can access both devices) I observe that in both cases, the url redirects to an https url. Based on the advice given in the SO question, for both urls, I have tried using various combinations in the src attribute of the iframe:
http://192.168.1.xxx
http://192.168.1.xxx/
https://192.168.1.xxx
https://192.168.1.xxx/
(What is really interesting to me, only http://... in src attribute the will work for the older device; if I use https://... (the protocol it gets redirected to when it works in the browser) I get "page not found". I don't know if this bit on information is helpful or more of a diversion.)
There is nothing that indicates this is a cross-origin issue, and there shouldn't be as I am using the nwfaketop nwdisable attributes as talked about on this page: Avoid iframe-busting with nwdisable and nwfaketop? .
The HTML in the NWJS app is as follows:
<!doctype HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ReolinkNWJS_TEST</title>
</head>
<body>
<iframe id="reolink_page" src="http://192.168.1.245/" nwfaketop nwdisable>
</iframe>
</body>
</html>
package.json:
{
"name": "ReolinkNWJS_TEST",
"description": "TEST",
"version": "0.0.1",
"icon": "icons/app.icns",
"main": "html/main.html",
"chromium-args": "--enable-logging=stderr --enable-spell-checking",
"window": {
"toolbar": false,
"width": 800,
"height": 500,
"position": "center"
},
"nodejs": true,
"node-remote": "*://*",
"scripts": {
"prod": "nwbuild --platforms win64 --buildDir dist/ ./"
},
"devDependencies": {
"nw": "^0.12.0",
"nw-builder": "^3.7.0"
}
}
I'll update with any other code if needed.
Related
I am using Firebase Dynamic Links REST API to generate short links.
If I paste that link into the browser it redirects and loads the appropriate image. But when I use the same link to load image in <img> tag in my webpage it fails.
I created a sample(codesandbox link below) trying to load the same image. I put two image tags, one with bit.ly shortener and one generated with the firebase dynamic links generator. The bit.ly link loads fine.
Sample codesandbox : https://codesandbox.io/s/using-img-tag-forked-ufnd31?file=/index.html
Sample short link for a image : https://files.flux.chat/vs4fy3cY7s1aMnS57
Create dynamic link payload
URL : https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=WEB_API_KEY
BODY : {
"dynamicLinkInfo": {
"domainUriPrefix": "https://files.flux.chat",
"link": "https://firebasestorage.googleapis.com/v0/b/fluxchathq.appspot.com/o/business%2F5Nmu0449tlNVWVdOpo8h%2Fincoming%2FNA?generation=1654498929454543&alt=media&token=664c135f-48f3-4de8-8ba7-d75ca3a5362f",
"navigationInfo": {
"enableForcedRedirect": true
}
},
"suffix": {
"option": "UNGUESSABLE"
}
}
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div>
<img class="image" src="https://files.flux.chat/vs4fy3cY7s1aMnS57" />
<img class="image" src="https://bitly/3Lr8Bq1" />
</div>
</body>
</html>
I don't have any experience with this, but I think shortened urls won't work as an image source-- they don't point to an image directly, they redirect to an image.
Here's an old answer that seems relevant: https://stackoverflow.com/a/27062627/954986
That is not possible unless you own the domain where you want the shortened URL. For example, to do that, you would need to own (or have access to) the website bit.ly.
bit.ly is not hosting your video or your image, it only redirects them to the real URL when you click on the link.
[...]
You will see that your image is NOT in the code. It only redirects to the page that DOES contain your image.
Perhaps you could make an XHR request in javascript, and see if it returns a 3** status with some other location, and use that as the source for the image? (edit: the short link doesn't have CORS enabled, so this probably won't work)
I just tested with curl (well, httpie which is far superior), and the sample shortlink you provided gives a 302, with the Location response header being the actual image.
edit: I tested your sandbox, and the flux.chat image source shows a GET request resulting in a 403 Forbidden status code in the browser console. Maybe it's because it's being called from localhost? But firebase sees something about the request it doesn't like (maybe origin being localhost, maybe it being in an image source, maybe ..?) and that's preventing it from loading.
Sorry I don't have anything more concrete for you, definitely a strange issue.
So I have QnA maker set up and connected to our Azure (I am totally new to Azure). I need to change the CSS of the Iframe from QNA maker, it is currently blue (as the default). I am following this guide to make it our company's colors:
https://blog.botframework.com/2017/10/11/customize-web-chat-websites/
I need to be able to clone this: https://github.com/Microsoft/BotFramework-WebChat/tree/master/src (which I already forked) into the current Azure build, which I am ultimately having a problem with.
I am sure I am overlooking something simple in Azure, but I just need to clone the source code to properly add the .css files I need to be able to edit the bot.
Currently, I have tried to grab the Iframe and change the CSS that way, but no dice (of course). All I need to do is change blue, to red, any way to do that will be helpful, whether that is changing the Iframe after it loads or by getting this guide to work for us. Thank you!
Refer to the github readme for more detail: https://github.com/Microsoft/BotFramework-WebChat
There are options:
Easiest: In any website, IFRAME the standard Web Chat channel
Easy: In your non-React website, run Web Chat inline
Easyish: In any website, IFRAME your Web Chat instance
Medium: In your React website, incorporate the Web Chat React
component
According to your requirements; running the bot in an iframe with custom style, you should read the Easyish section:
You can isolate your instance of Web Chat by running it inside an
IFRAME. This involves creating two web pages:
Your Web Chat instance, as shown above. (refer to Easy)
The hosting page, adding <iframe src="/path/to/your/webchat/instance" height="height" width="width" />
Based on the Easyish section (step 1), you need to first complete the Easy section. In your existing web app, add a new page with the following code (enable directline on Azure Bot settings):
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
CUSTOMIZE your chat box style by editing the botchat.css file. You make a copy from https://cdn.botframework.com/botframework-webchat/latest/botchat.css and edit to your liking and put your own customized botchat.css to somewhere in your web app and change the href in the header instead of using the default one.
Finally for Easyish section step 2, you can create an iframe (content is step 1 web chat page) and embed that in your hosting page.
I am trying to create custom user CSS for someone to use, that will remove all the extra stuff on a website they are viewing, except the body content. I figured I could use chromes inspect to get the sites CSS code, then edit it and use a custom user css extension on chrome to implement it. However the site has over 7000 lines of code in their CSS and I am still very new to CSS. Is there any simple way to make this work without having to go through 7000 lines of code?
Here is just a quick, bare-minimum, "prove of concept"-type starter of how you can achieve what you want using Firefox browser, just to get you going.
Create two files: manifest.json and RemoveStuff.js.
Put this inside manifest.json
{
"manifest_version": 2,
"name": "RemoveStuff",
"version": "1.0",
"content_scripts": [
{
"matches": ["*://*.google.com/*"],
"js": ["RemoveStuff.js"]
}
]
}
and put this inside RemoveStuff.js
document.getElementById("lga").outerHTML='';
Now using Firefox browser navigate to about:debugging, click Load Temporary Add-on and select RemoveStuff.js. Now go to google and you shouldn't see google's logo (or whatever picture/animation they have there).
You can start learning about Firefox extensions here, or Chrome here
I have an extension that use an iFrame to embed a website in it, i want to inject a content script in it to modify the page inside the frame, i have managed to do that using:
"content_scripts": [{
"matches": ["http://website/*"],
"js": ["js/jquery/jquery-3.2.1.min.js", "src/myScriptToInject.js"],
"all_frames": true,
"run_at": "document_start"
}],
It works as intended but the problem is if i go now to the original website, it will naturally inject my script into it making it literally broken.
So i tried using chrome.tabs.executeScript(tab.id, {allFrames: true, runAt: 'document_start', file: 'src/myScriptToInject.js'}); but the thing is, if i understand correctly, i can not inject a script in a chrome extension for "security reasons".
Is there a way i have not thought of or a trick that would help me ?
I would like to know all the components and steps needed to create a Google Chrome extension that will be able to remove some DOM elements from inside an iframe within a certain page.
My research indicates that this is not possible through common javascript due to the same origin policy.
Manually removing the DOM elements from code inspection in Chrome is as far as I got, but I want to automate this.
From other similar questions (mainly this one), it appears that a Chrome extension should be able to do this.
I believe this is the most similar question but has not been answered as of yet, and also isn't as clear.
In all honesty, I could take it from here, but I think other people might benefit from this question and the answer, even if I end up answering myself.
Example HTML:
<!DOCTYPE html>
<html>
<body>
<iframe src="iframe.htm"></iframe>
</body>
</html>
And iframe.htm:
<!DOCTYPE html>
<html>
<body>
<div id="targetDiv"></div>
</body>
</html>
The end result should be the same as running (with jQuery):
$('#targetDiv').remove();
which of course does not work.
I accomplished what I wanted so here's the answer.
The first thing you need for Chrome extensions is the manifest file, manifest.json.
Here is a working example:
{
"manifest_version": 2,
"name": "iframe manipulation extension example",
"description": "This extension allows to run scripts that manipulate cross domain IFRAME contents.",
"version": "1.0",
"permissions": [
"*://target-site.com/*"
],
"content_scripts": [
{
"matches": [
"*://target-site.com/*"
],
"js": ["script.js"],
"all_frames": true
}
]
}
It has some self-explanatory values and then permissions and content_scripts.
It basically says that this extension will only work when accessing target-site.com.
We specify the file we want to run and also set "all_frames": true, which will run said file for each frame in the page.
You can of course run whatever javascript you need in the file/s you reference in your manifest.
Navigate to chrome://extensions/ to load your unpacked extension or pack it.
Please note there are other ways to get an extension to run scripts. This is just what I ended up with as the easiest way.