Adding html headers to frames with Apache mod_headers (other modules?) - html

I am trying to make existing IE5 web-portal compatible with IE11.
It is written in "Enhanced Perl-parsed HTML" (*.ephtml) and seem to work in IE11 well with "Compatibility View Settings" turned on.
Unfortunately solution should work without any configuration on user side.
I found that Compatibility View can be turned on by adding tag:
<meta http-equiv="X-UA-Compatible" content="IE=5" />
without any changes on client side.
And that Apache can be configured to add this tag to every page using
LoadModule headers_module modules/mod_headers.so
Header set X-UA-Compatible “IE=IE5”
in httpd.con
(https://msdn.microsoft.com/en-us/cc817573.aspx)
(Adding an http header site wide in php)
This doesn't solve problem entirely, since many of the portal pages are mage up from frames and this header isn't being inserted into frame pages.
Therefore many pages with frames are broken (but work correctly if Compatibility View is turned on Browser Wide)
Is there any way to add this header automatically to all frames using Apache configurations?
Only other solution I can see right now is modifying all the pages, manually inserting this header.

Related

Deutsch texts not displayed properly in Chrome

I have a statically generated website with GatsbyJS. It uses react-intl for a localization but I don't think this is causing a problem.
When I open the website (it is hosted on AWS S3) for the first time it usually displays german transcription very well, but when I open developer tools and refresh the page the transcriptions are often broken (the specific German letters are not displayed properly).
Transcriptions are stored in a js file.
Steps that I use to reproduce the error:
I reopen the browser and go to the website. If I see correct texts I then open the dev tools and go to Application => Frames section => Scripts dropdown and I see:
Then I refresh the page (sometimes more than once) and somehow texts are now broken:
Note that this is the same static file!
It seems that this is only appearing in Chrome.
When I build and run website locally then it seems to always work (which then would suggest it's not chrome fault).
Not sure where might be the problem
It turned out that javascript files didn’t have charset set in Content-type header in a response. Locally they had:
Content-Type: javascript; charset=utf-8;
And it worked fine but when they get uploaded to AWS S3 the charset field has been stripped out leaving only:
Content-Type: javascript;
Chrome seems to be more restrictive about it.

css not working in wamp server

I have a problem with external css. When I have creating my project using html and css the css is working fine but when for some reasons I have change this
#LoadModule rewrite_module modules/mod_rewrite.so
in httpd.conf file in apache
to this
LoadModule rewrite_module modules/mod_rewrite.so
my all the css are not working properly and one more thing is that when I have checked the console
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost/E-commerce/styles/style.css".
anybody tell me that this is the main reason or not
A Simple description to whats happening during the process is that browser Send HTTP Request and receive a response to that request from the server to two contains headers.in this case your server is making stylesheet come with wrong content-type try first to inspect element using dev tools in browser and investigate the response from server .
i believe if you create new htaccess with the following content :
AddType text/css .css
this will tell server to send it as stylesheet
Many times when your css file is large so your browser stores it in cache and hence not every time it renders your css file when updated in editor and reloaded the site.
To rectify this simply press Ctrl+F5.
This will clear the browser cache for that tab(that website) and reload the page forcing the browser to render the updated css.
This should work without touching your .htaccess file.
EDIT: For Mac if you are using safari, the sortcut is Command+Alt+E
In Mac if you are using Chrome, Ctrl+F5 will not work, so refer to this site: https://clear-my-cache.com/en/apple-mac-os/google-chrome.html
Use ctrl + F5 to clear browser caches on window.
This should work.

Chrome keeps loading a old cache of my website

I am experiencing this weird issue where my Chrome browser keeps loading a old version of my website whose code doesn't even exist on my server any more. I assume it's a typical cache issue.
I tried to clean the browser cache, use igcognito mode, and clean DNS cache. The old cached page is still being loaded.
This issue seems to have been discussing on this google group for three years but there is still no solutions. https://productforums.google.com/forum/#!topic/chrome/xR-6YAkcASQ
Using firefox or any other web browsers works perfectly.
It doesn't just happen to me. All my coworkers experience the same issue on my website.
<?php Header("Cache-Control: max-age=3000, must-revalidate"); ?>
You can implement a PHP script that must be the first line of code in your index file . It is an http header typically issued by web servers. You can also rename the resource that is considered "stale". This tutorial will give you more details. https://www.mnot.net/cache_docs/
I'm not sure if I understand your problem correctly, but I was experiencing something similar and instead of clearing the cache I disabled it by doing this:
Open chrome and then go to your website
Press Command + Option + C(Mac)
Now that you've opened chrome's DevTools, go to the main menu where it says: Elements Console Sources ...
Click on the menu element that says Network
Make sure that the "Disable Cache" checkbox is checked
Then reload the page without closing the DevTools
This worked for me.
Let me know if it worked for you :)
A short term fix to view the new version of your site would normally be to clear out the cache and reload, for some reason this doesn't always work on Chrome. This short term solution is not going to fix the problem for every user that's on your site though, it will just allow you to see the new version of your site.
Adding version numbers to CSS and JS files will allow you and every other user, to see the most recent version of your site. A version number will force any browser not to load from the a user's personal computer cache, and instead load the actual files on the server, if the version number varies from the one in the user's cache.
So if you have these files on your server:
ExJS.js
ExCSS.css
and change them to:
ExJS.js?v=1.01
ExCSS.css?v=1.01
the new version of these files will load in any browser.
Normally, a browser will always load the HTML file from the server, but there are some HTML meta tags you can use to make sure that the most recent HTML version will load for any user:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
There are also ways to make sure that files in other languages always load the most recent version as well, which is discussed on this post:
How to add version number to HTML file (not only to css and js files)
You can press on Inspect, then Network and check Disable cache.
change the name of images and make the necessary image name changes in html file.. found this quick fix for my website
I ran into the same issue, and I also tried to disable caching on my JSP pages
<% response.setHeader("Cache-Control","no-cache");
response.setHeader("Pragma","no-cache");
response.setDateHeader ("Expires", 0); %>
But it didn't help.
This is a known issue with google chrome and chromium browsers, even though you clear cache and cookie.
However it may or may not happen for most of the users.
Also this has been unresolved till the date since last 9-10 years.
Hence for testing purposes I would highly recommend to use Mozilla Firefox or Opera.
However it does sounds that your application is limited to certain browsers for best experience, and may not sound convincing to Business/End users.
But having said that, this caching issue may or may not happen to most of us.
You should be able to clear the problem by resetting Chrome. This is the only way I found to clear this condition - after tearing my hair out for half a day.
Prior to finding this, I tried clearing the cache, deleting the contents of the various cache directories etc. in vain.
[As of today May 3 2021] You can do this by gong to 'Settings > Advanced > Reset and clean up > Restore settings to their original defaults'. Note that this will not remove any bookmarks but will log you out of all accounts you are signed into.
Adding CNAME Will help also if you always run site without www, try with www.example.com will work.
I came across this issue developing locally, and tried the following things:
Clearing Cache + generally ALL files in Chrome
Setting the Cache-Control Header like Eli Duhon mentioned.
Setting the Cache Control Header in multiple other ways.
And the only thing that fixed the problem for me was to basically re-start my docker containers on which the app was running.
so I did this:
docker-compose down
And then
docker-compose up
and everything was updated after that.
HOWEVER, if you have changes again, they are still not updated...
So this is certainly not a fix to this problem, as I dont even know what causes this behaviour in the first place, but I assume it has to do something with hot reloading and/or Docker but that was the only thing that did the trick for me so I thought I would mention it here...
I had this problem moving a Wordpress site to new hosting where the URL redirects to .../wp, which hadn't been the case before.
Chrome was helpfully presenting a directory listing showing the file dates from the old server, despite the DNS having updated fully a week ago. So it was obviously demonstrating the problem discussed here.
I added an index.html file with just the following in it:
<meta http-equiv="refresh" content="0; URL='http://my-wp-site.com/wp'"/>
which fixed the problem straight away, including on Chrome browsers that had not had their cache cleared and that had no knowledge of any Google account of mine.
I don't know why this worked, however, given all the problems people have listed above.
you have two options
a) consider fingerprint the stale resources like
<script src="js/app-4829382839238882882bb3442bbbbdhh3kh3.js" type="text/javascript"></script>
b) Add cache control headers such as Cache-Control, Expires on your webserver.
This is a good read on browser caching

Images sometimes don't load in my web application

In my Java web application, the images sometimes fail to appear, instead showing the "broken link" red X symbol. Looking at the Network tab in Chrome's developer tools, I can see that the images are being loaded with a status code of 200 (OK) and the correct content type header. There does not appear to be a content length header, if that matters.
I have not been able to reproduce the issue when I run the application locally from my IDE; it only seems to happen when I run it on the server. My first thought was that it might have something to do with IE's Compatibility View, but the same thing happens whether Compatibility View is on or off, and it also happens in Chrome. I also tried changing some of IE's security settings, since the app is in the Local Intranet Zone when I run it locally, while it is in Trusted Sites when it I run it on the server. That didn't help.
I don't think there is anything unusual about the img tags in the JSP. I am using an older DOCTYPE because it prevents IE 8 from putting a border around the page, and I need to support IE 8. The border is undesirable, but if changing the DOCTYPE would fix the problem, it would be worth it. I realize that the older DOCTYPE puts IE into quirks mode, but changing it to <!DOCTYPE html> didn't seem to help.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head> ... </head>
<body>
<div>
<img class="loginButton" width="100" height="28" alt="Log In" title="Log In" src="images/login.png"/>
</div>
...
</body>
</html>
If I reload the page, some of the images will reappear, while others will disappear. I typically have to reload the page 4 or 5 times before all the images will appear. Clearing cache and/or cookies didn't seem to help.
There are not a lot of images, typically only 6 or 7 on a page, and they are no bigger than 4kb in size. Some images are GIFs while others are PNGs; both types have the same problem. I am running Tomcat 7 on Java 1.6 both locally and on the server.
Another piece of information, although I'm not sure how it fits into the puzzle: I looked in the folder where IE stores its cached files, and I noticed that the file for one of the images that was not being displayed had a file size of 0. I deleted the file, reloaded the page, and the image appeared. Then I reloaded the page a couple of times until the image disappeared, and looked in the cache directory. Once again, the image file had a size of zero. I'm not sure why that would happen.
I have looked around and seen similar questions, but so far no solution. I've tried to supply all the information that I thought would be relevant, but let me know if there is anything else that might be important. Thanks for your help.

IE7 ignores CSS attribute selector only on pages coming from production server

On my website, IE7 seems to be ignoring certain CSS attribute selectors. The strange thing is that it only happens when the page comes from the production server. If I have the exact same code on my personal server, or saved on my hard drive, it works fine. Here is an example which causes the problem:
<!DOCTYPE HTML>
<html><head>
<title>IE display test</title>
<style type="text/css">
[type=button] {
display: block;
}
</style>
</head>
<body>
<input type="button" value="Button 1"/>
<input type="button" value="Button 2"/>
<input type="button" value="Button 3"/>
</body></html>
Since the display on the buttons is set to "block", they should be arranged vertically. But only when the page is served from my production server, they are arranged horizontally. When I use the developer toolbar to inspect the style, I don't see the "display" property like I usually do. The only thing I can think of that would possibly cause this is the URL of the page or the response headers coming from the server. I can maybe figure it out by experimenting but that would be inconvenient and time-consuming so before I do that, I would like to ask: Why is this happening and what can be done about it?
EDIT: I came up with a Fiddle. It looks fine on that site.
EDIT 2: Here are the response headers coming from the production server:
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/html;charset=utf-8
Content-Language: en-US
Content-Length: 291
Date: Wed, 18 Jan 2012 21:32:48 GMT
EDIT 3: Here are the response headers from my personal server:
HTTP/1.1 200 OK
Date: Wed, 18 Jan 2012 21:37:30 GMT
Server: Apache
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 176
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/html;charset=utf-8
The production server is not applying gzip compression because it only does that for files above a certain size. If I add some stuff to make the file big enough, it uses gzip and I still see the problem in IE7, so this does not seem to have anything to do with gzip.
I tried configuring my personal server to send a "Content-Language" header like the production server and that did not trigger the problem.
I don't know if any of the other headers have anything to do with this. I can try testing them but it will be kind of tricky so it may take some time.
EDIT 4: I don't notice this problem in IE8, even if I turn on compatibility mode. I am testing this on Windows XP, in case that matters.
EDIT 5: I put the charset in the Content-Type header from my personal server. It didn't trigger the problem.
EDIT 6: Here are some screenshots:
Served from the production server:
Served from my personal server:
Loaded directly from my hard drive:
EDIT 7: I finally got a clue as to what is causing this! I tried entering javascript:alert(document.compatMode) into the address bar. The personal and direct pages showed CSS1Compat but the production page showed BackCompat. It seems like the browser is in quirks mode only when it is rendering the page from the production server. So far, I have no idea why this is happening or what to do about it.
EDIT 8: I left out a detail: The screenshot is actually from my dev environment, which is emulating the production server but running on my own computer. That would make BoltClock's reply seem plausible, except for the fact that the same problem is showing up on our actual production server, which is on an IP address matching 173...*. Why do I see the problem on that server? Is that also a private IP address? It may be helpful to know that the actual production server is using https.
EDIT 9: Since the bounty expired, the problem stopped showing up on the production server but it still shows up in my dev environment (10.1.10.34). I have no idea why. I think I will blame it on cosmic rays unless I can come up with some more evidence.
As discussed in the comments, according to this answer by thirtydot and this answer by scunliffe, it seems very likely to be the effect of a security feature in Internet Explorer. Your production server lives within your intranet, and is being accessed via a private, class A IPv4 address (10.*.*.*), which I suspect basically causes IE7 to render pages in quirks mode (and IE8 and newer to render pages in Compatibility View).
All this is just a guess, though, I'm afraid — I haven't been able to reproduce your problem in any IE browser on any system, at least not on your personal server or with my own files. If your production server is open to public access, not just technically, perhaps you could provide a link to it so we can debug further, as the problem is obviously localized to just your production server.
I just played around with the code on your personal server (eliasz.net), a file served through the file:// protocol, and served on a local server.
Your personal server and when rendered through the file:// protocol are both rendering correctly as they are rendered in 'edge' mode (the latest, rather than compatibility mode). However, on your production server and on your development server, they are rendering in compatibility mode. As BoltClock said, intranets do this by default. Obviously, this would apply for your development server (on a local IP like 10.1.10.34).
I think the production server is also on your local network, although it has a public static IP. In other words, when you are on the local network, the production server is served through the local network, not the internet. Hence, IE7 still sees it as an intranet site. Use nslookup to check how IE7 is resolving the domain name.
To get round the issue, you can add this to your header:
<meta http-equiv="X-UA-Compatible" content="IE=9" >
and then turn off the setting in your IE that causes it to render intranet sites in compatibility mode.
Be aware that certain conditions can force Internet Explorer to display pages in a document compatibility mode different from the one specified in the webpage. These include, but are not limited to, the following situations:
Compatibility View is enabled for the page.
The page is loaded in the Intranet zone and Internet Explorer is configured to use Compatibility View for pages loaded from the Intranet zone.
Internet Explorer is configured to display all websites in Compatibility View.
Internet Explorer is configured to use the Compatibility View List, which specifies a set of websites that are always displayed in Compatibility View.
The Developer Tools are used to override the settings specified in the webpage.
The webpage encountered a page layout error and Internet Explorer is configured to automatically recover from such errors by reopening the page in Compatibility View.
Source: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
From this we can derive your running a site on your local intranet, ie 7 can't turn off this of the rendering as in ie8 you can stop local intranet sites being rendering in compat mode.
10.x.x.x ip address production server
file:// essentially local host
http:// through your local server
UPDATE:
Okay apologies IE has numerous problems running on the intranet, IE8+ is the issue above as you mentioned IE7 doesn't use compat mode it has quirks and standard. Knowing microsoft though they may have messed it up in one of the ie7 patch updates but I hate assumptions so if someone knows please let me know.
To resolve the issue I am afraid I can't give you a software level solution or a hardware change. If its always going to be an intranet site then I recommended upgrading network browsers to ie8 minimum.
I do have a html, css fix however(i know this is not what you want):
<!DOCTYPE HTML>
<html>
<head>
<title>IE display test</title>
<style type="text/css">
#buttons {
}
#button {
display:block;
}
</style>
</head>
<body>
<div id="buttons">
<input id="button" type="button" value="Button 1"/>
<input id="button" type="button" value="Button 2"/>
<input id="button" type="button" value="Button 3"/>
</div>
</body>
</html>
It doesn't seem to like [type="buttons"] using display:block;.
I see that one page is .html and the other is .php. It might be possible that your php page has some character (maybe hidden) before the doctype. It could make a difference on how IE accepts HTML and CSS.
I just ran into this with both IE8 and IE9 and I found the solution!
Now this may not translate exactly to IE7, but it should point you in the right direction.
Look through the menus for an item called "Compatibility View".
Give it a click and it opens a dialog where you can add websites to be shown in "Compatibility View".
Look below the list for a check box labeled "Display intranet sites in Compatibility View"
Uncheck it.
It appears that Microsoft considers a host part of the "intranet" when it is:
joined to the same domain,
identified by an unqualified host name (ex "server" vs "server.example.com"), or
identified by a private IP address (10.x.x.x, 172.16-31.x.x, 192.168.x.x)
It also looks like nothing is considered "intranet" if the client system is not joined to a domain.
I get a feeling it has something to do with the server (Based on the apache/coyote I guess you're using tomcat?) and either something to do with whitespaces, or BOF, or improper utf-8 setting (i've heard of issues where header claims to be utf-8 but isn't). If you have any whitespace before the html declaration, that might also trigger it to go into quirks mode. While I may be wrong, I get the feeling that your problem is similar to this one Why is ie7 always in Quirks mode?
I don't think the answer is which server it came off but more a case of adding double quotes around the value in the CSS selector.
Try this:
<!DOCTYPE HTML>
<html><head>
<title>IE display test</title>
<style type="text/css">
[type="button"] {
display: block;
}
</style>
</head>
<body>
<input type="button" value="Button 1"/>
<input type="button" value="Button 2"/>
<input type="button" value="Button 3"/>
</body></html>