Phonegap - HTML files that don't include .htm/.html in the filename - javascript

Using Phonegap it is trivial to programmatically switch from one page to another using code along the lines of:
window.location.href = "someDestination.html";
However, I've noticed that for some reason, this will not work if the extension on the destination file is not '.html'. For example, the following code:
window.location.href = "someOtherDestination";
...will cause PhoneGap to fail with the following error message:
Failed to load webpage with error: Frame load interrupted
I would have thought that PhoneGap would be intelligent enough to inspect the contents of the destination file to determine if it is a valid webpage (for instance, by looking for a <html> tag), rather than attempting to rely on superfluous information like the file extension. But this doesn't seem to be the case.
So my question is, why does PhoneGap care whether or not the filename ends in .htm/.html, and how do I make it stop caring about this?

LOL:
function getHTMLFile(str) {
return str + '.html';
}
function getHTMFile(str) {
return str + '.htm';
}
;-)
No, but seriously this is part of the window.location.href's spec. It's not a PhoneGap specific issue. You will not be able to override this simply with javascript (see this).

I too ran into this Cordova/Phonegap 3.0
Near the top of my page I had a redirect. Not "responsive design", I know, but a good temporary fix for showing a UI that fits in an iPhone.
<script>
if (navigator.userAgent.match(/(iPhone|iPod).*AppleWebKit/i)) {
window.location = "iphone/";
}
</script>
Failed with the same error. Changing it to
window.location = "iphone/index.html";
fixed the error

Related

Unable to load script from another server - Content Security Policy issue?

I have been trying to turn a bookmarklet into a small development environment that I can use for testing some javascript and sending commands easily on the fly and updating the code on my server quickly to see the result. This has half way worked using method's I have found in this site and google however it doesn't seem to work very well and sometimes randomly doesn't work. The end goal is to have a bookmarklet that I can click on from any page and it loads a javascript file I have saved on my server. I have created the following two bookmarklets to try and get this working:
Failed Method 1:
javascript:
var s = document.createElement('script');
s.type='text/javascript';
document.body.appendChild(s);
s.src='//smewth.com/test.js';
void(0);
Method 1 in one line bookmarklet form: javascript: var s = document.createElement('script'); s.type='text/javascript'; document.body.appendChild(s); s.src='//smewth.com/test.js'; void(0);
Failed Method 2:
javascript:(
function(){
var imported = document.createElement('script');
imported.type='text/javascript';
imported.src = 'https://smewth.com/test.js';
document.head.appendChild(imported);
})();
Method 2 in one line bookmarklet form: javascript:( function(){ var imported = document.createElement('script'); imported.type='text/javascript'; imported.src = 'https://smewth.com/test.js'; document.head.appendChild(imported); })();
I got method 1 by decomposing the kickass bookmarklet from (http://kickassapp.com/). The actual one I got from their site works fine on my browser no problems. I even did a direct substitution from the URL they were using to load with my URL. The second method I found while searching on this site and this actually worked for a small while and stopped working for some unknown reason (maybe different browsers). I tried appending this script object to the head and the body on each of them with no improved results.
I created the test.js script just for this post and it contains a simple alert box statement:
$$ [/]# cat test.js
alert("hi");
$$ [/]#
NOTE: When I do this with the code embedded within the the bookmarklet itself without appending it to a head/body object then it works fine such as this:
javascript:%20alert("hi");
I did notice that with both of these methods, the code is actually getting injected into the page however I am not seeing the code is ever executed when I click the bookmark. Does anyone know which method is the best or something similar to do this so I can have javascript load through a page which I update on a remote server (reliably)? Maybe I need to attach the to a different object?
Thank you for your help.
-Jeff
UPDATE: I am showing this works while this site is loaded but it doesn't work when your at a site like google.com. Not sure what the difference is or how to accomodate this, google.com has a head and a body object too. I am showing this works in some sites and in some it doesn't.
I figured this out. There were two things occurring which accounts for the intermittent symptom of this issue. The first issue was that the site which was hosting the code was on a self-signed certificate. I began to notice the issue was occurring only when trying to run this from within secure sites. Then in Chrome I saw a error show up in the console. It would be nice if Firefox gave me a error on the console or something as this was the root of the issue. The second thing I had to do was disable OCSP in Firefox as I used a free certificate for testing purposes.
I also had to use method 1 as described above. Firefox and Chrome both did not like the anonymous function call for some reason. From now on I will refer to Chrome to look for errors in the console as Firefox has proven itself not very useful for this.

How do I prevent Javascript from mutating a page in Selenium? How do I download the original page source? [duplicate]

This question already has answers here:
getting the raw source from Firefox with javascript
(3 answers)
Closed 8 years ago.
I'm not using Selenium to automate testing, but to automate saving AJAX pages that inject content, even if they require prior authentication to access.
I tried
tl;dr: I tried multiple tools for downloading sites with AJAX and gave up because they were hard to work with or simply didn't work. I'm resorting to using Selenium after trying out WebHTTrack (whose GUI wasn't able to start up on my Ubuntu machine + was a headache to provide authentication with in interactive-terminal mode), wget (which didn't download any of the scripts of stylesheets included on my page, see the bottom for what I tried with wget)... and then I finally gave up after a promising post on using a Mozilla XULRunner AJAX scraper called Crowbar simply seg-faulted on me. So...
ended up making my own broken thing in NodeJS and Selenium-WebdriverJS
My NodeJS script uses selenium-webdriver npm module which is "officially supported by the main project" to:
provide login information + do necessary button-clicking & typing for authentication
download all JS and CSS referenced on target page
download target page with original JS/CSS file links change to local file paths
Now when I view my test page locally I see double of many page elements because the target site loads HTML snippets into the page each time it's loaded. I use this to download my target page right now:
var $;
var getTarget = function () {
driver.getPageSource().then(function (source) {
$ = cheerio.load(source.toString());
});
};
var targetHtmlDest = 'test.html';
var writeTarget = function () {
fs.writeFile(targetHtmlDest, $.html());
}
driver.get(targetSite)
.then(authenticate)
.then(getRoot)
.then(downloadResources)
.then(writeRoot);
driver.quit();
The problem is that the page source I get is the already modified page source, instead of the original one. Trying to run alert("x");window.stop(); within driver.executeAsyncScript() and driver.executeScript() does nothing.
Perhaps using Curl to get the page (you can pass authentication in the command) will get you the bare source?
Otherwise you may be able to turn off JavaScript on your test browsers to prevent JS actions from firing.

Error - Permission denied - jQuery Print Preview?

When I click "Print" using the jQuery Print Preview Plugin the following error pops up and Firebug:
Error: Permission denied to access property 'name'
if (window.frames[i].name == "print-frame") {
I am not sure exactly what it means or how to correct it.
There is a way around this that will solve this problem and work properly with all major browsers. This solution was found by Derick over on the Github page for jQuery Print Preview.
Here is the solution, around line 44 you will see the following code:
// The frame lives
for (var i=0; i < window.frames.length; i++) {
if (window.frames[i].name == "print-frame") {
var print_frame_ref = window.frames[i].document;
break;
}
}
Replace the above code with this:
print_frame_ref = print_frame[0].contentWindow.document;
issue solved.
Here is the error in Chrome, I expect this makes it clear?
Unsafe JavaScript attempt to access frame with URL http://s7.addthis.com/static/r07/sh090.html#iit=1341762779832&tmr=load%3D1341762779182%26core%3D1341762779520%26main%3D1341762779826%26ifr%3D1341762779833&cb=0&cdn=0&chr=UTF-8&kw=&ab=-&dh=www.ubhape2.com&dr=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F11384440%2Ferror-permission-denied-jquery-print-preview&du=http%3A%2F%2Fwww.ubhape2.com%2Ftest-print.html&dt=TEST%20Page&md=0&cap=tc%3D0%26ab%3D0&inst=1&irt=0&jsl=33&lng=en-US&ogt=&pc=men&pub=ra-4dfb00d56c76d2a5&ssl=0&sid=4ff9acdb1a41cc60&srd=0&srf=0.02&srp=0.2&srl=1&srx=1&ver=300&xck=0&xtr=0&og=&rev=114791&ct=1&xld=1&xd=1 from frame with URL http://www.ubhape2.com/test-print.html. Domains, protocols and ports must match.
Your page is located on ww.ubhape2.com and you are accessing a frame on s7.addthis.com
To fix this problem, change this line
<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4dfb00d56c76d2a5"></script>
To point to the copied script on your site.
You will also have to edit that script to only access your own site.
This is an example of XSS or cross site scripting.
My question then turns into can I edit the jQuery Print Preview Script
to prevent the conflict from happening?
No.
The point of the error is that the javascript is running in the context of another party, and you can't "inject" your code into it.
This is enforced by the browser.
If it was not enforced then every user on the internet would have had their machines compromised.
Read up on a google search of XSS to find out more
However,
If you host the javascript (and thus the iframe) on your server than the issue goes away. It is your code (and your iframe) to do with as you wish.

Accessing IFrame's contentWindow.document gives 'Access is Denied' on IE6

I did not think it was possible but I hate IE6 twice as much now then this morning.
Please don't bug me about the why but I'll try to explain what we're trying to achieve.
We have 2 apps running, let's say APP1 & APP2, both of them are on the same domain. APP1 is including a JavaScript file that is hosted on APP2. This JS file will:
Create an IFrame (using document.createElement)
Set the source of the IFrame to the root of APP2 (where some HTML is generated);
Add a div to the body of APP1
Read the contents of the IFrame (so the generated HTML of APP2)
set this contents as the innerHTML of the div (3)
So in the end in APP1 we have a header where the contents is generated by APP2 without there being an IFrame on the screen.
The problem lies in step 4; this is working fine for all browsers except for IE6 (could this be the most used sentence in web development?).
I get a JS-error when trying to access contentWindow.document of the iframe: 'Access is denied'. I'm no expert but as I understand this error you would get if both apps were not on the same domain but they are (dev.echnet/APP1 & dev.echnet/APP2).
This is the code I use for above steps (took out stuff that is not executed if not IE6):
(1), (2) & (3):
var elIf;
$().ready(function()
{
elIf = document.createElement('<iframe name="uhframename">');
elIf.setAttribute('id','idUhFrame');
document.body.appendChild(elIf);
var uhDiv = document.createElement('div');
document.body.appendChild(uhDiv);
elIf.src='dev.echnet/APP1?nocache='+Math.random();
getText();
}
(4)
function getText() {
var sContent = "";
if (elIf.contentWindow.document.body) { // access denied on elIf.contentWindow.document
...
}
}
I've googled a lot and tried many possibilities I found (also on SO) but none of them seem to solve this issue.
I also tried setting the domain explicitly on the IFrame by settings its source to this:
"javascript:(function(){document.open();document.domain=\'dev.echnet\';document.close();})()"
but I'm not exactly sure if this has any effect since I'm setting the source to something else a few steps further. Anyway, since it's the same domain it should not matter?
Hoping for some help or someone to shoot down all IE6 users (a feasible task nowadays) so I can skip this task :-).
After some working with it for another question on here, I've come up with this solution.
Seems .document isn't always necessary.
http://jsfiddle.net/sTkVR/4/
I'm using chrome, and it was not working with .document but works like a charm with out it

Firefox Error: Permission Denied to get Window.Document

I have a standard 3-frame layout; "fnav" on the left, "fheader" at the top and "fcontent" below the header. All files are located locally on the hard drive.
This is the JS function that is throwing the error:
function writeHeaderFrame() {
try {
var headerFrame = window.top.frames['fheader'];
var headerTable = document.getElementById('headerTable');
if (headerFrame && headerTable) {
headerFrame.document.body.style.backgroundColor = "Black";
var headerFrameBody = headerFrame.document.documentElement.childNodes[1];
headerFrameBody.innerHTML = headerTable.innerHTML;
} else if (headerTable) {
// there is a headerTable, but no headerFrame
headerTable.style.display = 'inline' // show the headerTable
}
} catch (e) { alert('from header.js, writeHeaderFrame(): ' + e.message); }
}
Clicking on a link in fnav (or initially loading the frameset) loads content into fcontent, then a JS file in fcontent loads the "header" frame... or it is supposed to, anyway. The Javascript runs fine initially, but whenever a link is clicked I get the following error:
Permission Denied To Get Window.document
I am unable to determine why. Any and all suggestions would be appreciated.
First off, please post the code being run when you click those links, and their html.
secondly, did you have a typo there? Window.document should be window.document, should it? (lowercase w)
Edit response to changes in OP question
Without the html it's a little hard to say, but If I were taking a stab in the dark, I'd say this line:
headerFrame.document.body.style.backgroundColor = "Black";
is causing the error. It looks like headerFrame is on a different domain and you don't, for security reasons, have permission to modify the contents of that frame. Of course, some of the following lines will also have the same issue.
Also see http://userscripts.org/topics/25029 and http://www.webdeveloper.com/forum/showthread.php?t=189515 for similar cases.
Edit 2
From Mozilla Development Center
Note: Firefox 3 alters the security for windows' documents so that only the domain from which it was located can access the document. While this may break some existing sites, it's a move made by both Firefox 3 and Internet Explorer 7, and results in improved security.
(see https://developer.mozilla.org/En/DOM/Window.document)
I would guess you're trying to manipulate the window or document from a different origin. HTML5 (and all modern browsers, even IE :D ) enforce (or attempt to enforce) what is called "The Same-Origin Policy". Basically JS from one origin cannot interact with the DOM of a document or window from a different origin.
What is an origin? At a basic level you could substitute domain for origin and almost be right, but the full set of rules are
You must have the same domain
The same port (eg. code on example.com:80 cannot reference the DOM of a page a example.com:8080)
The same protocol (eg. http://example.com is a different origin from https://example.com)
lastly, redirects also matter so (http://example.com -> http://example.com/?redirect=http://evil.com with the server responding with a 3xx redirect to http://evil.com will result in a different origin)
In all liklihood firefox has merely tightened up one area where they did not apply the same origin policy in the past.
Apparently, the user in question updated his installation without changing the following setting to "false", which allows local documents to have access to all other local documents.
pref("security.fileuri.strict_origin_policy", true);
Which explains why I was unable to duplicate the error on my machine.
Many thanks to all for your assistance.
Have you tried installing Firebug and figuring out which line is throwing the error? I'm guessing that since the question is tagged Firefox you are seeing this occur in it.
It'd be most helpful if you could post a template HTML page using this Javascript.
Is the script/frame pages all on the same domain? If not, this is expected. You can't access window.document from another window if they are not on the same domain.

Categories