I've browsed through all other IE8/Respond.js questions here on SO, but no luck so far.
When I test on localhost in IE8 emulator, I get the same error as in production, but Respond works despite that. First we see a broken page for a second, then Bootstrap's grid comes in place and everything is okay. However, in production it stays broken.
The error I get comes from respond-proxy.html file, line 46 (ajax): Permission denied
This is what I got in my base html file:
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
{# <!-- Respond.js proxy on external server -->#}
<link href="https://maxcdn.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
{# <!-- Respond.js redirect location on local server -->#}
<link href="{% static "img/respond.proxy.gif" %}" id="respond-redirect" rel="respond-redirect" />
{# <!-- Respond.js proxy script on local server -->#}
<script src="{% static "js/respond.proxy.js" %}"></script>
<![endif]-->
I've tried moving it around (end of head, end of body etc.) but nothing seems to work in production.
We host our static files on S3 (CloudFront). We copied CORS config from here: https://github.com/scottjehl/Respond/issues/152
I also tried copying the respond-proxy.html into a file hosted along with our static files, but still get the same "Permission denied" error.
Any solutions, workarounds, hints and suggestions are more than welcome.
Edit: I also tried some substitutes like css3-mediaqueries-js, but that didn't work at all.
Related
UPDATE:
It appears the problem is triggered when port 443 is explicitly specified. If I leave it out, no errors. For example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loader Test</title>
<script type="text/javascript" src="https://127.0.0.1/myapp/_vVERSION/dojo/dojo-release-1.16.3/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.registerModulePath("myapp", "https://127.0.0.1/myapp/_vVERSION/myapp");
// The following should create the myapp object/namespace -->
dojo.require("myapp.bootstrap");
myapp.webContext = "https://127.0.0.1/myapp/_vVERSION/";
</script>
</head>
<body>
HELLO WORLD!
</body>
</html>
So, for whatever reason, if :443 is added to the URLs, an error occurs trying to set myapp.webContext.
ORIGINAL POST BELOW:
I am on a project that has a legacy code base that uses the non-AMD Dojo Toolkit method for loading modules. The application runs in Tomcat, and I am testing out running it as an app server behind an Apache httpd reverse proxy (gateway) with SSL and authentication enabled.
When I set the gateway port to a non-standard value (e.g. 4443), everything appears to load and work fine. However, if the gateway port is 443, I get javascript errors that indicate that dojo.require() statements are happening async vs sync, so errors occur in code that tries to reference objects from the required modules.
I have condensed things down to simple test page that recreats the problem (which occurs in Chrome and Firefox):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loader Test</title>
<script type="text/javascript" src="https://127.0.0.1:4443/myapp/_vVERSION/dojo/dojo-release-1.16.3/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.registerModulePath("myapp", "https://127.0.0.1:4443/myapp/_vVERSION/myapp");
// The following should create the myapp object/namespace -->
dojo.require("myapp.bootstrap");
myapp.webContext = "https://127.0.0.1:4443/myapp/_vVERSION/";
</script>
</head>
<body>
HELLO WORLD!
</body>
</html>
The above works with no problems. However, if I change Apache httpd configuration to use the standard https port of 443, and change the 4443 to 443 in the above, I get an error when trying to set myapp.webContext. When using the Network profiler in the browser debugger, it shows the request to the myapp.bootstrap as Pending, not loaded yet. If I configure the debugger to not pause on exceptions, the Network tab shows the module eventually gets loaded.
The use of absolute pathnames in the application is to ensure proper loading of resources and link resolution. This was required a long time ago due to problems in IE, and a configuration setting is supported to indicate the base URL for all hrefs (for cases when running behind a gateway).
As a test, I redid the sample to use all relative pathnames, and the page appears to load with no errors when using port 443. Unfortunately, the real application is quite large, so changing it to always use relative pathnames is not a viable solution at this time.
My gut is telling me the browsers are behaving differently with XHR requests that involve standard ports (e.g. 443) and use absolute URLs. Can anyone confirm this? And if so, why they behave that way?
quick cry for help: this website "broke" somehow and is stuck in the pre-loader
https://thelosertakesitall.com/ – I want to understand why and how to fix it, thank you!
I tried removing the elements displaying the loader but then it just stays at a blank screen. I understand the code is old and was set up by someone I do not have contact to anymore.
jQuery is not loaded because of:
Mixed Content: The page at 'https://thelosertakesitall.com/' was
loaded over HTTPS, but requested an insecure script
'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'.
This request has been blocked; the content must be served over HTTPS.
try to change
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- Load jQuery library -->
to
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- Load jQuery library -->
Im developing a golang webpage and am running into some troubles when deploying my page to google app engine (appspot.com). This is because Im running it using http when developing on my machine, but over https when deployed.
Google chrome doesnt like this so it blocks the content trying to be loaded over http. Im fine with this since I like security. But I cant find the source.
All my includes are https or //, or just local files.
Here is a image of the error in chrome.
This is some includes that I use. Maybe some of them is loading a font?
<link href="/static/css/googlefont.css" rel='stylesheet' type='text/css'>
<link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/static/css/style.css" rel="stylesheet" type="text/css">
<link href="/static/css/sweetalert2.css" rel="stylesheet" type="text/css">
<link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="/static/css/modal.css" rel="stylesheet" type="text/css">
<script src="/static/js/jquery.js"></script>
<!--<script src="/static/js/jquery.min.js"></script>-->
<script src="/static/js/register.js"></script>
<script src="/static/js/login.js"></script>
<script src="/static/js/sweetalert2.min.js"></script> <!-- Sweetalert -->
<script src="/static/js/spin.min.js"></script> <!-- ?? -->
<script src="/static/js/bootstrap.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/stuff.js"></script>
<script src="/static/js/flat-ui.min.js"></script>
<script src="/static/js/application.js"></script>
<script src="/static/js/bootbox.js"></script>
I cant seem to find the source..?
Thankful for any help in the right direction, i'm going crazy here..
Check all the CSS stylesheets your document is loading, including any CSS stylesheets that are getting loaded through an #import. In one of the CSS stylesheets, you most likely have a rule with a url(…) call something like this:
src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/fhNmDCnjccoUYyU4ZASaLVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
Use the Network tab (or equivalent) in your browser devtools to get a view of all the resources your document is loading. You can sort that resource view by type. So, set it to sort by type and then look through the source of all the type=stylesheet or type=css resources to see which one has a url(…) that uses an insecure http scheme.
If someone hasn't already, there really should be a feature request lodged with Google. The fact that Chrome knows the location of the error but just displays "(index):1" in the developer console just doesn't cut it.
In the meanwhile, the easiest way to find the offending CSS in Chrome (ver 68) is to "Customize and control DevTools" by clicking on the 3 dots in the top right corner of the development console and clicking "Search" ) or "Ctrl+Shift+S". You might have to drag up the horizontal pane at the bottom of the screen.
I am working with CKEditor 4.4.5 and its plugin Stylesheet Parser 4.4, but I get empty list from the style drop-down.
To make my question easier to understand, please try this code (download from its example site: http://sdk.ckeditor.com/samples/styles.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Stylesheet Parser plugin</title>
<script src="http://cdn.ckeditor.com/4.5.2/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor2" name="editor2" rows="10" ><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor2', {
extraPlugins: 'stylesheetparser',
height: 300,
// Custom stylesheet for editor content.
contentsCss: [ 'http://sdk.ckeditor.com/samples/assets/stylesheetparser/stylesheetparser.css' ],
// Do not load the default Styles configuration.
stylesSet: []
} );
</script>
</body>
</html>
It doesn't really work. But the sample on that site works well.
I also find another sample site:
http://ckeditor.com/ckeditor_4.3_beta/samples/plugins/stylesheetparser/stylesheetparser.html
I tried to copy all the sources code from this demo site, but get no luck.
Did anyone else have the same problem?
How can I make the codes above work? It basically uses the source codes from CDN site so I don't think the version of source code matters.
You should try with this version: http://ckeditor.com/addon/stylesheetparser-fixed
The official plugin has some problems since very long ago but they don't seem to plan to fix them.
This problem is caused by Cross-domain request. The CSS file is in HTTP server, and my application is running with a port number. So they are treated as cross domain request.
I also tested the HTML page and CSS file in the local files. However, file://...path is still treated as Cross Domain request in Chrome, but FF and IE works with that properly though.
When I tried this in server, it works properly with Chrome. Unfortunately, there seems no way to make cross domain request work in Chrome and Firefox.
I am writing a html page using bootstrap3 template and including the respond.js in that, but when I run it on IE8, it gives me error "Access is denied" in console.
I am using this to make IE8 support media queries. I have tried a lot of things as given on forums, but no luck. Does respond.js works locally or we need to run on a localhost/web server?
Respond.js link - https://github.com/scottjehl/Respond
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="main-cont">
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS - main.css
.main-cont {background:#2d3a42; height:100px;}
Per the Respond.js Docs...
"Due to security restrictions, some browsers may not allow this script to work on file:// urls (because it uses xmlHttpRequest). Run it on a web server."
Specifically, "Respond.js re-requests the CSS files using Ajax and parses the text response," which is where IE's local security policy is blocking you. Another user elsewhere suggested changing the security settings in IE, but I can't confirm that solution since my copy of IE8 doesn't permit me to change those settings.
Oh, and to save you the trouble, I already tested and confirmed that using ajaxSetup() method in jQuery to set "isLocal" property to "true" won't overcome the local restriction in IE.
I just managed to make respond.js run on IE8 for media queries support , by running on localhost. If simply the html file opened, it does not help.