I'm trying to load a web-application in a new popup window, which sits on a different domain from my application, using a post request (It has to be post request!). Internet explorer is giving me an access denied message when trying to access the document object of the window. I tried other answers posted in similar SO threads, but didn't have any luck...
Note: I can't use '' or 'about:blank' for the url, because IE considers it to be insecure.
Here is what my code currently does
Create window Object
Generate form in JavaScript
Attach form to body of window. // access denied!
Code:
var win = window.open(url, windowname, params);
var form = $(document.createElement('form'))
.attr('action', action)
.attr('method', 'post');
$(win.document.body).html(form.html()); // access denied!
Do you have access to the source code of the content that will be loaded in the popup?
If yes try this:
Why not use static HTML to your pop-up window (i suggest you to use modals) and set the atributes by receiveing them from POST or GET params.
In less words: explore better your back-end and avoid to use DOM manipulation AND POPUPS.
If the answer is no:
Try this: https://stackoverflow.com/a/7397164/5261900
Related
I am working on a web app that needs to have two parts. The one is a controller and the other is a display. Something like Google Slides in presentation mode. The controller has a button to launch the display:
<script language="JavaScript">
function OpenMain()
{
var MainPage = window.open("TheUltraSignalLite.html");
TimerIMG = MainPage.document.getElementById("TimerIMG");
TimerIMG.src = "TM-Full-Blue.jpg";
}
</Script>
The call to window.open seems to return null. I have tried Chrome, Edge, Firefox, and Opera and they all have the result. These are all local files for now, but I might put in on a web server someday. I have seen some answers that want you to turn off security, but I cannot ask everyone who uses this app to turn off security. How do I get a valid reference to the display window?
Edit 1:
Yes, window.open from the local disk does cause a CORS restriction.
I tried this where both files are in the same AWS S3 Bucket, so the CORS should not be an issue. But I still get a null on the window.open. If I put a breakpoint on the first line, then everything worked. If I split the open and the rest of the code into two functions with two buttons, it works. So it looks like I have to find a way to run the open in an async way.
Edit 2
My solution to keep it simple was to put the window.open in the OnLoad event. This opens the child window and allows it to fully render and the value of MainPage is ready to use. (I changed the MainPage to a global variable.) I still have to run it from some type of web server, rather than loacl file, but that is not a big deal.
If you are not allowed to access the new window content, then the problem you are encountering is a basic security feature of web browsers. Citing mdn:
The returned reference can be used to access properties and methods of the new window as long as it complies with Same-origin policy security requirements
To read more about Same-origin policy
If your new window respects the Same-origin policy, then you can access the content of the new window with for example:
// Open index.html from the current origin
const newWindow = window.open('index.html')
const h1 = newWindow.document.querySelector('h1')
If you want to avoid asking users for pop-up permission, then you should probably use a link instead of a pop-up.
I have defined an iframe in sap ui5. After the page opens user does something and after that i need to fetch data from the HTML page. In HTML page there is an element which has id "list" and i need that element only.
var htmlPage = new sap.ui.core.HTML({
preferDOM: true,
content: "<iframe id='frameAdd' src='url'></iframe>"
});
var dialog = new sap.m.Dialog({title:"User Picker",contentWidth:"20%", contentHeight:"20%",
beginButton:new sap.m.Button({text:"Close",press:function(){dialog.close();}}),content:htmlPage})
I have tried below things but not getting anything relevant
htmlPage.getContent()
htmlPage.getSanitizeContent()
htmlPage.getDomRef("list")
document.getElementById("list")
and geting access is denied for $('#frameAdd').contents()
If you have done this please suggest me the right way to implement it
The iFrame is most likely served from a different domain/port/protocol. In this case, it is not a SAPUI5 specific issue, but rather part of the browser's security measures.
The same-origin policy in browsers also applies to iFrames:
JavaScript APIs such as iframe.contentWindow, window.parent, window.open and window.opener allow documents to directly reference each other. When the two documents do not have the same origin, these references provide very limited access to Window and Location objects, as described in the next two sections.
Source
The solution would be to serve the iFrame from the same origin.
Let's say I have the following code.
window.open(url, windowName, "height=500,width=500")
// This will open a new window with the url.
myFunction();
// Run this function on the newly opened window instead of
// the old one because I need to find a link on the new page.
Right now, myFunction() is getting stuck on the old window.
Update: The new url is the another domain.
Put your myFunction() in the script of the new window.
Then set the onLoad event of that window to run it.
You can get reference to your caller window's document from the new window by:
window.opener.document
There you go with enough links to do pretty much anything.
Update:
Your new window should be from the same domain. Otherwise its against the same origin policy of the browser.
Please see this question:
Ways to circumvent the same-origin policy
You have several options:
edit the source code for the webpage stored at url to include your own custom code that you want to run when the webpage opens. If you only want this code to run when the webpage opens from your popup, you could name the url something like "webpage.html?run_custom_code", then in webpage.html have javascript that only runs if window.location.href.indexOf('run_custom_code') > 0
you can open a webpage that's sole purpose is to run javascript: window.open('javascript:alert()'); although based on your edit this does not seem useful to you.
Use another language like PHP, where you can fetch the contents of another webpage with something like $html = file_get_contents($url);
perform an ajax request to the other url (if it resides on the same domain) and scrape the results to find your link.
I have set up an Articulate Storyline course (a Flash version accessed using the page "story.html" and an HTML5 version accessed using "story_html5.html"). It works fine when run directly, however, when I try to run everything in an iframe on the company server (linking to the course files on my personal server) I get JavaScript errors:
The course uses player.GetVar("HTML5spelaren") to access a variable called HTML5spelaren, which is located on the story_html5.html page itself. When running in an iframe I get a "Permission denied to access property 'HTML5spelaren'".
Finally the course uses the JavaScript var newWin=document.window.open("report.html", "Kursintyg"); to display a course completion certificate in a new window. When running in an iframe however this results in a "Permission denied to access property 'open'".
Is there a way to rewrite the JavaScripts to get around this? I need to be able to detect if the course is running in Flash or HTML5 mode (that's what I use the variable in story_html5.html for), as well as being able to use JavaScript to open a new page from within the iframe when clicking on a link.
Page structure:
https://dl.dropboxusercontent.com/u/11131031/pagestructure.png
/Andreas
There's a way for different domains to speak to one another via javascript. You can use postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
In your case, in story.html or story_html5.html could use something like:
parent.postMessage(HTML5spelaren, parent_domain);
and you add an event listener in the company page:
window.addEventListener("message", receiveMessage, false);
And in receiveMessage function you retrieve the data that you need. Something like:
function receiveMessage(event){
your_variable = event.data
}
Same logic can be probably be applied to your popup.
You can post from child to parent or from parent to child.
My guess is that content you're linking to in the iFrame is on a different server/domain. If so, the error is a security feature to stop cross-site scripting (XSS) attacks.
Consider putting both the parent iFrame and the articulate content (child) on the same server. This should eliminate the problem.
how can I check if the document in new window is ready AFTER the document reloads.
Here is my example:
I need to get a search result page to new window from some site (it's cross-domain). I need to first make POST request (they probably store search params in session) and then go to reslut page.
Here is my code:
var windowname = "window"+(new Date().getTime()); // so I can open multiple windows, not very relevant
var new_window = window.open("", windowname); // prepare named window
// prepare form with post data targeted to new window
var dataform = $("<form method='post' target='"+windowname+"' action='https://www.ebi.ac.uk/chembldb/compound/smiles/'><input name='smiles' value='"+$("#id_smiles").text()+"'></form>");
// Need to get the form into page for Mozilla, webkit allows to submit forms that are not in page
$("body").append(dataform);
// submit the form and remove it, no need to keep it
dataform.submit().remove();
// form opens in my new window
$(new_window.document).ready(function(){
// this is carried out apparently too soon, because the POST data didn't work
// when I use timeout (commented below, but i don't like this solution) it works
window.open("https://www.ebi.ac.uk/chembldb/index.php/compound/results/1/chemblid/asc/tab/smiles", windowname);
// setTimeout( function(){window.open("https://www.ebi.ac.uk/chembldb/index.php/compound/results/1/chemblid/asc/tab/smiles", windowname)}, 1000);
});
On that site the first make POST request with AJAX and then they simply, but since it's cross-domain, it is impossible for me.
I believe this is not possible. Even some browser throw exceptions if you use reference of new_window (cross domain).
I got following exception. while trying to access reference of new window with url http://www.google.com (Browser Chrome). and reference has no property with it.
Unsafe JavaScript attempt to access frame with URL http://www.google.co.in/ from frame with URL Document ready in new window, cross-domain. Domains, protocols and ports must match.
You can run the javascript code which is in cross domain, for that you should use either JSONP concept ( http://en.wikipedia.org/wiki/JSONP )/ Cross Origin Resource Sharing( http://en.wikipedia.org/wiki/Cross-origin_resource_sharing ).
Just few changes should be done in apache server settings.