Inject javascript through URL - javascript

I have an html that opens a webpage such as:
https://mywebsite.com/index.html&audio=disabled
I have a javascript function that triggers a button in the webpage:
document.querySelector('iframe').contentWindow.document.querySelector('.Pan-Button').click();
I want to trigger this via URL. Since I am anyway disabling the audio via the URL, is it possible to trigger the button as well?
Just looking for an alternate way to trigger it without calling javascript function in code.

Adding script to a URL that is executed in the other page is called Cross site scripting (XSS)) and is bad
Instead (I assume from your code you can edit the target page)
const url = new URL(document.location);
const pan = url.searchParams.get("pan");
window.addEventListener("DOMContentLoaded", () => {
if (pan && pan==="yes") {
document.querySelector('iframe').contentWindow.document.querySelector('.Pan-Button').click();
}
});
and use https://mywebsite.com/index.html?audio=disabled&pan=yes

Related

Issue with window.replace() method having search params in URL

I m trying to open a new window from my web page while clicking on the 'number#' lsted in my page, actually, it's a google search(eg: https://www.google.com/search?q=12312), and got the results in the new tab
I am also trying to replace the search query parameter again while clicking on another Number#(eg: https://www.google.com/search?q=456456), But replace functionality not working.
Below I am placed the demo code
let win;
let firstSearch = () => {
win = window.open('https://www.google.com/search?q=123123', '_blank');
}
let secondSearch = () => {
win.location.replace('https://www.google.com/search?q=345345')
}
But its not working. But I remove '/search' from the URL replacement is happen.
So, any solution for this search and replacement parameters
Codepen
That is not working because the site tells the browser that they don't want to be loaded in X-Frame. That's why your code works using Bing but not Google...
from: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>. Sites can use this to avoid click-jacking attacks, by ensuring that their content is not embedded into other sites.

Bookmarklet to open a webpage and login

I am trying to create a bookmarklet to open a web page, populate credentials, and click login in one shot. Here is the needed bookmarklets:
For opening a webpage:
javascript:location.href='http://www.unt.edu'
For Credentials & login:
javascript:(function(){var d=document;s=d.querySelector;s.call(d,'input[name*=email]').value='YOUREMAIL#company.com'; s.call(d,'input[name*=pass]').value='SECRETPASSWORDHERE';s.call(d,'button[id*=login],input[type=button][id*=login],.btn-login').click(); }())
Is it possible to combine both of them considering the asynchronous behavior of opening the web page?
You can combine this in one bookmarklet, but you'll have to click it twice. The first click will open a website, and the next one will do the login.
javascript: (() => {
const url = 'https://stackoverflow.com/users/login';
if (location.href !== url) return (location.href = url);
document.querySelector('input#email').value = 'EMAIL';
document.querySelector('input#password').value = 'PASSWORD';
document.querySelector('button#submit-button').click();
})();
Consider using a userscript instead, which will run automatically on pageload. Set the userscript's #includes to run on http://www.unt.edu, then set the userscript's JS to the content of your current bookmarklet:
var d=document;s=d.querySelector;s.call(d,'input[name*=email]').value='YOUREMAIL#company.com'; s.call(d,'input[name*=pass]').value='SECRETPASSWORDHERE';s.call(d,'button[id*=login],input[type=button][id*=login],.btn-login').click(); }()
(though I'd recommend separating it out onto separate lines for readability and maintainability)
And then use a plain bookmark (not a bookmarklet) to http://www.unt.edu. This way, whenever you click on the bookmark, the page will load, and when the page loads, the userscript that logs you in will automatically run.

uwp javascript x-ms-webview webkitfullscreenchange event

I am using a x-ms-webview to display an embedded media website, It work great by the problem is I can't handle full screen event when user want to go to full screen.
In iframe i can using webkitfullscreenchange to handle this, but with x-ms-webview seem not work.
Anyone can explaint me why and How to handle full screen event came from media in x-ms-webview?
Thanks
We can interact with the content of the web view by using the InvokeScriptAsync method to invoke or inject script into the web view content, and the ScriptNotify event to get information back from the web view content.
To invoke the onwebkitfullscreenchange event inside the web view content, use the InvokeScriptAsync method.
To enable an external web page to fire the ScriptNotify event when calling window.external.notify, you must include the page's URI in the ApplicationContentUriRules section of the app manifest. (You can do this in Microsoft Visual Studio on the Content URIs tab of the Package.appxmanifest designer.) The URIs in this list must use HTTPS, and may contain subdomain wildcards (for example, https://.microsoft.com) but they cannot contain domain wildcards (for example, https://.com and https://.). The manifest requirement does not apply to content that originates from the app package, uses an ms-local-stream:// URI, or is loaded using NavigateToString.
For more info, refer Interacting with web view content.
For example:
<x-ms-webview id="webview" src="https://www.....com" width="1920" height="1080"></x-ms-webview>
<script src="js/main.js"></script>
The js code:
(function (evt) {
"use strict"
var ViewManagement = Windows.UI.ViewManagement;
var FullScreenSystemOverlayMode = ViewManagement.FullScreenSystemOverlayMode;
var ApplicationView = ViewManagement.ApplicationView;
var view = ApplicationView.getForCurrentView();
var webview = document.getElementById("webview");;
webview.addEventListener("MSWebViewFrameDOMContentLoaded", function () {
var op = webview.invokeScriptAsync("eval", "document.onwebkitfullscreenchange = function (evt) { window.external.notify('123'); }");
op.start();
});
webview.addEventListener("MSWebViewScriptNotify", function (evt) {
if (view.isFullScreen) {
view.exitFullScreenMode();
}
else {
view.tryEnterFullScreenMode();
}
});
})()

BHO render event

I am developing IE extensions using BHO. Currently I am using OnDocumentComplete event which fires when the page loading is completed. I want to inject my JavaScript while rendering HTML such that I can update HTML on the fly.
Simple example:
I want to replace HREF attribute. But on OnDocumentComplete event user can click the link and can access the actual link. But if he/she waits till the page load complete then he/she will be redirected to the updated link.
Please provide your valuable inputs such that DOM can be updated while rendering.
Thanks,
Maitrey
While page is loading you can use:
<script>
window.onload = function(){
/* DOM handling */
}
</script>
to execute Javascript, is this what you meant?
you can execute your javascript using IHTMLWindow2::execScript called on the window object inside the OnDocumentComplete handler:
public void OnDocumentComplete(object pDisp, ref object URL)
{
HTMLDocument document = (HTMLDocument)webBrowser.Document;
IHTMLWindow2 parentWindow = document.parentWindow;
parentWindow.execScript("alert('your javascript')");
}
where webBrowser is the object of the WebBrowser class that you've set in SetSite

Telling when an iframe is on a new URL

I am using JavaScript to make a small iframe application, and I cannot seem to figure out a way to update the URL in my URL bar I made when someone clicks a link inside the iframe.
It needs to be instantaneous, and preferably without checking every millisecond whether or not the value of document.getElementById('idofiframe').src has changed.
I can't seem to find a simple property to tell when the url has changed, so if there is not one, then solving this programmatically will work as well.
Thanks for the help!
This will be difficult to do because it is considered xss and most browsers block that.
There are most likely some workarounds involving AJAX.
First of all, what you want to do will be possible only if the source of your iframe points to the same domain as the parent window. So if you have a page page.html that iframes another page iframed.html, then both of them have to reside on the same domain (e.g. www.example.com/page.html and www.example.com/iframed.html)
If that is the case, you can do the following in the iframed.html page:
<script type="text/javascript">
window.onload = function() {
var links = document.getElementsByTagName('a');
for (var i=0, link; link = links[i]; i++) {
link.onclick = function() {
window.parent.location.href = '#' + encodeURIComponent(this.href);
}
}
}
</script>
This will make it so that whenever you click on a link in iframed.html, the url bar will put the url of the link in the "hash tag" of the url (e.g. www.example.com/page.html#http%3A%2F%2Fwww.example.com%2FanotherPage.html)
Obviously, you would have to have a script like this on every page that is to appear inside the iframe.
Once this is in place, then you can put this snippet inside of page.html, and it will make the iframe automatically load the url in the hash tag:
window.onload = function() {
var url = window.location.hash.substr(1);
if (url) {
document.getElementById('iframe').src = url;
}
}
I unfortunately haven't run this code to test it, but it is pretty straight forward and should explain the idea. Let me know how it goes!
You could add an onload event to the iframe and then monitor that - it'll get thrown whenever the frame finishes loading (though, of course, it could be the same URL again...)
Instead, can you add code to the frame's contents to have it raise an event to the container frame?
In IE, the "OnReadyStateChanged" event might give you what you want.

Categories