I can tell from my webserver logs that one of my Javascript files is treated by (some?) iOS 14 as "injected". My script is run in a separate environment (namespace?). And its attempts to do AJAX fail, apparently because it's assigned an "origin" which doesn't match my webserver, so the standard same-origin policy forbids the operation.
I would expect to get caught like this if I was trying to do something blackhattish. But it's just typical Javascript which works on all other browsers. Especially, my Javascript is loaded as an external file in the head portion of its HTML page as usual
<script type="text/javascript" src="foobar.js?baz"></script>
All the page files -including the problematic Javascript- are loaded from the same site-- http://www.foo.bar
How can I tell what the issue is from the server side? (I cannot recreate the problem from the client side - in particular I don't have access to any failing iPhone.)
EDIT 23 - April 2021 - Problem partially (but not fully) disappears on iPhone versions later than 14.0.3.
In answer to my own question: Once I set up my web server to use https: rather than http:, the problems I was experiencing all went away.
Apparently the infrastructure behind the latest Safari browser (as of May 2021) does not fully trust scripts in the head that are loaded over http:, and so isolates them in a separate namespace as though they were "injected".
Related
What is the fundamental difference running a file using a server in localhost, and opening a file such as file:///Users/$user_name/$your_directory/index.html, assuming no backend is used, and it is only frontend and contains html/css/js
How does this also affect interactions with other server ie. ajax requests?
I am sorry if this is too broad, but I haven't found a solid answer to these underlying questions.
Fundamentally, assuming at some point you're going to host the result on an actual web server, the former matches the target environment while the latter doesn't. Browsers treat local files and files served from web servers (even localhost web servers) differently, although very similarly. One aspect of this is the encoding: When you retrieve a file from a web server, the process of determine what encoding the data is in is different from opening a local file.
How does this also affect interactions with other server ie. ajax requests?
This is one of the primary ways in which they're handled differently, and it even varies from browser to browser. A page loaded from a file:// URL has origin null from a Same Origin Policy standpoint. Some browsers (like Chrome) disallow Cross-Origin Resource Sharing entirely for origin null, even when the server you're trying to talk to has a wide-open CORS policy (*). Others (like Firefox) allow origin null to match the wildcard.
In general, for best results, ensure that your development environment matches your deployment environment in the important ways. That means doing your development using a web server process rather than local files. Most IDEs will happily provide that process for you; if not, Apache or Nginx aren't hard to install.
answer is simple,
if u don't have made active backend yet for "index.html" then it would not effect.e.g.-"localhost" and "index.html" will be same this time.
but when u start working with the backend,then most of the backend processes need an active server (need localhost).
e.g.-
1.
fetch('local.json')... //fetch json or any file would not work for local files.
2.
u may not ineract with mysql/django etc. databases.
means it cause errors in signup/login , store any image/video/docs at database etc.
so better is work in localhost, it's most easy way is :-
VScode(IDE) >> extenctions >> live server (just need to click a button to make
localhost and click again to stop localhost)
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
It won't make any difference, I think.
But there is an exception when using Chrome! Sometimes I have seen if a html file is added with some CDN link, then it doesn't loaded into html specifically in Chrome but if you try the same file in Firefox or Internet Explorer, it works.
I have faced this problem and hence I always put it under local IIS default website.
I wrote code for dropdown Menu and want to insert that code in other html files.
DropDown Menu code.
http://jsfiddle.net/techspartan/49Bpb/
For inserting the above HTML code into other HTML files I am using this code:
<html>
<head>
<script src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#topdiv').load('index.html');
});
</script>
</head>
<body>
<div id="topdiv">
</div>
</body>
</html>
Basically I want to declare my DropDownMenu code at one location so that if I make changes in menu code than I don't have to edit every HTML file that has the DropDown.
The above code is working in Firefox but nothing is shown in Chrome and IE-10.
Are you working locally on your machine, without any webserver? Chrome does not allow loading files via AJAX from your file system (see bugreport).
You may use XAMPP or something similar to serve your files via a local webserver.
If you are on Windows, XAMPP is probably the easiest way to get your local webserver up and running: http://www.apachefriends.org/en/xampp.html
On Mac, you may also use MAMP http://www.mamp.info/en/index.html
You may also force Chrome to allow local file access on Windows if you are starting it with --allow-file-access-from-files, more information in this stackoverflow question
For what it's worth, I have code that uses jQuery().load() to inject content into a page, and it work just fine.
If this is static content that is meant to be a standard part of your page, then the other answers/comments saying to do it on the server are probably right; stuff like that is generally better to be included on the server, because it will make your site perform a lot better than doing it on page load via Javascript. (in fact, loading a static menu this way is likely to give your site a noticable performance problem when users load the page; be warned!).
However in general the technique of dynamically adding content to a page using Javascript is perfectly valid, and commonly used, so I'll answer the question based on that.
There's nothing that I can see that's specifically wrong with the minimal example you provided, except for a missing Doctype, so I'm going to guess that's probably your issue:
If you don't have a doctype, the browser will render the page in Quirks mode. And jQuery is not designed to work in quirks mode.
Solution: Add the following line to the top of your code and try it again:
<!DOCTYPE html>
You may also want to check that IE isn't showing your page in compatibility mode as well, because that might also cause problems. If it is, you could also add an X-UA-Compatible meta tag to your page's <head> section to force IE into standards mode:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Finally, if you need to support IE8 or earlier, you should switch from jQuery v2 back to the latest release of jQuery v1 (currently 1.10.2), as jQuery v2 does not work with IE8 and earlier.
Hope that helps.
The issue you are having is not due to anything wrong with your code, but with security policies of modern browsers. Here's what happens on your development machine:
Your browser loads your local HTML file.
Your browser executes the javascript, which tries to access a file on your machine.
Your browser says, "NO!" Because this is a huge security error - without this policy websites could read through every file on your hard drive or silently send copies of any of your private information to their servers, just because you visited a site with javascript enabled. BAD!
There are some ways to try to tell your browser "No, it's ok, I want to allow this..."...but you know, this has become exceedingly difficult as it often silently breaks with new browser versions. I've slammed my head against the wall way too often, so I might suggest you skip trying to make your browser OK with what you are trying to do.
Now, why does this work on a live site? Here's what happens.
Your browser loads a website.
Your browser executes the javascript.
The script asks for a file to be loaded/accessed from a website.
Your browser says..."well, we're already on this website, so sure! Load all the files you want from that web server!" And your browser kindly gets the file, and returns it to your script, where you can painlessly include the HTML to your hearts content.
To make this work on your development machine, you have ultimately 3 choices:
1) Upload the files to a web server, then do your testing there.
2) Make your own "localhost" web server. You then access your site with something like localhost/index.html - etc. This is just enough to prevent the browser from shutting down your file load requests, because you are requesting an HTTP operation, note a FILE operation.
3) Try to force your browser to allow these requests. Details vary by browser, some browsers won't let you do this at all, and I've given up on doing this myself.
The hidden 4th choice is using HTML5 File System features, but with such poor support for technology I suggest you not even try it - the bug you are facing is purely with your development machine, so changing the technology you are using purely for a minor development convenience seems silly.
Severin provides links to the excellent XAMPP and MAMP software packages, which are the easiest way of getting yourself a good development localhost server.
Every time i refresh a site and view its page source, the javascript src i.e js.js?version=1364903356; the version number always changes.
My question is: What is the meaning of this number; and if i put js.js in every page, the site is not working.
The version is generally appended for caching purposes, or rather, for invalidating the cache (by changing the version number, and hence, the requested URL), so it's seen as a new resources and downloaded afresh.
The number is probably meaningless. It is almost certainly just being appended to the URL so that the URL changes so the JS won't be fetched from the cache.
it's just for to avoid Caching purposes and request new each time. whenever you visit a same content. if you set static content caching enabled in IIS, then Browser will issue HTTP 304 not modified status to the resource.
you can view in chrome. open developer tools (f12) then go for network tab. you will see in request header like this.
Request Method:GET
Status Code:304 Not Modified
IIS/Any web server wil determine whether the content is changed or the same content. if the content is the same as resides in the cache then it will not iniitate the new request.
by appendign the version number, filename/url/resource will be changed. so browser will issue a new GET request for the resources.
This is a common technique used to prevent or manage caching of javascript and other files that the browser would normally cache.
If the version number always changes, then it means that the page in question is preventing your browser from caching the file at all; every request will load a new copy of the file regardless of whether it's changed or not.
This is poor practice, and likely due to a misconfiguration of the site in question.
More commonly, the version number would remain static, but could be triggered to change by the site itself. This would mean that for most requests the browser's caching would be in play, but that the site owner has control over whether to refresh the cache, for example when he updates the script file.
Without this technique, a browser that has already cached the old version of the file might not know that the file has been updated, and may not fetch the updated version. This could result in version conflicts between script files on the page.
There are, in fact, more technically correct ways of doing this that don't involve adding random values to the end of your URLs. The HTTP standard specifies that the browser should query the URL, and tell the site what version it has cached. The site can then respond with a "Not changed" message, and the browser can use the cached version. This ought to mean that the technique used in the question isn't necessary.
However, the technique is necessary in some cases because some browsers and/or web server configurations may not work correctly with the standard method, and the browser may still end up using the cached version incorrectly.
This technique can therefore be seen as a work-around for that.
I'm writing an intranet page for my company that requires the use of an embedded dll (COM). The dll is registered on all clients computers so it doesn't need to be downloaded from the page, it just needs to run.
I've tried using the following code to embed the control:
var newObj = new ActiveXObject("servername.classname");
And this works when testing locally, but from the intranet the object fails to instantiate with the js error "automation server can't create object". I suspect this is because IE(7) blocks ActiveX controls by default in the intranet zone. I've also tried using the <object> tag with no luck.
I have a deadline to get this finished and it's unlikely that the IT dept will get around to changing the company security settings before then, so unless its very straightforward for them to do it's not really an option.
So my question is: Is there any possible workaround that will allow me to embed the control so that it will at least prompt the user instead of silently blocking the control, without changing the default security settings in IE?
Almost everyone in the company uses some version of IE (up to 7), so it only needs to work for this.
All help and comments appreciated.
Thanks.
Update:
If this absolutely isn't possible, I'm looking at using the dll from a script on the server in this question. I'd still rather do it client side though because the control has some nice user interfaces available.
if you embed it with an <object> tag it should prompt you regardless; you could then make calls on it through the object tag. another trick which may work is to put: <!-- saved from url=(0013)about:internet --> as the first line of your html file; I don't know if this will work on the intranet zone, but from localhost that will cause the page to be treated as though it were an internet page.
I have used FireBreath plugins (which act as activex controls and can be called in the way you describe) and have never had an issue like this. Good luck!
I have a page that calls a script in the header, like so:
<script type="text/javascript" src="http://www.discoverfire.net/analytics/l/a.js"></script>
(Note you will NOT be able to load this script as it is DNSd locally as a staging domain)
Very Simple.
Firefox, IE, Chrome all have no problem with this basic, square-one feature.
Opera, however, refuses to load the script. Any variables or functions in it are "undefined" and in dragonfly, the script tag is shown in the DOM, but the "Script" tab says "No script files found."
I go to google and find random pages, their external .js files seem to work just fine.
Any idea why Opera hates me? Is there a security/javascript thing I am missing?
A few things that may be relevant, but really should make no difference:
The script is on a different domain than the page.
The script is only available on my local network. The domain is DNS'd locally for staging, from outside the network it points somewhere else. Does Opera have a setting to secretly use an external DNS server?
The script works on every other browser I have.
The problem isn't in the script content. I've reduced it to a single line with an alert and it simply won't work in Opera.
Update:
OK, the problem seems to be how Opera treats the domain.
I have moved the script to several other domains, and it DOES work just fine. I've moved it to several paths on the locally DNS'd domain, and it won't work from anywhere on that domain.
This leads me to believe that the problem is that Opera can't, or won't, load the script from this domain for some reason.
Strangely, there seems to be no problem loading pages and other resources from the domain, the problem lies in .js files only.
The domain is registered, but parked. We DNS'd it locally so we can use it for staging/testing, and that may be messing with Opera somehow with JS security.
I could be wrong though - I really have no idea. If anyone else has one, I'd love to hear it.
Update 2:
Regarding Dragonfly and the error console/developer tools, they don't say anything about the script at all. There are plenty of Undefined Variable errors for variables and functions that should be present from the script, but other than that, no errors. Oddly, the script tag does show up in the DOMM, but if I click on the Scripts tab, it says "No Scripts Found".
Update 3:
There is no blocked content, so we can at least rule out that setting.
You may want to see if its ad blocker is getting in the way. Your URL contains the text "analytics," which may be part of a "block this" pattern. I know some block Google analytics through Opera. An easy test for this may be to try moving your .js to a different path on the host.
Have you checked Opera's error console? Tools > Advanced > Error Console
It should provide information on why it won't load or if there another error of some kind.
Like Jacob suggested, you should check if it isn't blocked. To do this:
Right-click on your page
Select "Block Content..." in the context menu
At the top of the screen, click the "Details..." button
You should see the URL's that are blocked on the current page
You should ask in the Opera Forums. I had some problems with Opera in the past and they answered quickly.
Is the host serving the correct mime type of the JavaScript file. It's not a commonly known fact but the type=text/javascript attribute is actually ignored by browsers as it trusts that the server is specifying the correct type.
Additionally the mime type of text/javascript is actually wrong when it comes to JavaScript, the actual JavaScript mime type is application/ecmascript (if I recall correctly, it may be application/javascript though). If you don't believe me you should have a look here where I had more information and linked off to the Douglas Crockfords videos where he discussed the mime type.
I had something similar recently - opera would just not run a script on an external server... nor if I downloaded it and had it on localhost. It only ran when copy/pasted between script tags into the html page.
It turned out that the script was encoded with UTF-16 and that was somehow confusing the browser. When I converted it to UTF-8, everything ran fine.
So, just in case and if you still have that problem, check out the encoding settings...
I had the exact same issue, tying to load a script from a localhost/development server into a page, hosted on the public server at no avail. The only way I managed the script to load in Opera was to save a copy of the page into a location on the same development server and use the tag to refer to the original domain to get the page's .css and .js linked files. That worked. Looks like Opera doesn't like to mix public and localhost domains, but handles localhost without complaints.
what you're seeing is probably Opera's security precaution against the so-called "phish pharm" attacks: cross-network protection. You can not mix content from a public server and content from a local server.
Have a look at my answer here for a workaround:
Opera won't load some JavaScript files