@hint/hint-highest-available-document-mode
Advanced tools
hint for best practices related to usage of the X-UA-Compatible meta tag and response header
highest-available-document-mode)highest-available-document-mode warns against not informing browsers
that support document modes to use the highest one available.
Internet Explorer 8/9/10 support document compatibility modes. Because of this, even if the site’s visitor is using, let’s say, Internet Explorer 9, it’s possible that Internet Explorer will not use the latest rendering engine, and instead, decide to render your page using the Internet Explorer 5.5 rendering engine.
Serving the page with the following HTTP response header:
X-UA-Compatible: ie=edge
or specifying the x-ua-compatible meta tag:
<meta http-equiv="x-ua-compatible" content="ie=edge">
will force Internet Explorer 8/9/10 to render the page in the highest available mode in the various cases when it may not, and therefore, ensure that anyone browsing the site from those browsers will get the best possible user experience that browser can offer.
Of the two methods, sending the HTTP response header instead of using
the meta tag is recommended, as the latter will not always work
(e.g.: if the site is served on a non-standard port, as Internet
Explorer’s preference option Display intranet sites in Compatibility View is checked by default).
Notes:
If the meta is used, it should to be included in the <head>
before all other tags except for the <title> and the other
<meta> tags.
Appending chrome=1 to the value of the HTTP response header or
the meta tag is not recommended as Chrome Frame has been
deprecated for quite some time.
By default, the hint checks if the X-UA-Compatible response header
is sent with the value of IE=edge, and that the meta tag isn’t
used.
X-UA-Compatible response header is not sent:
HTTP/... 200 OK
...
X-UA-Compatible response header is sent with a value different
than ie=edge:
HTTP/... 200 OK
...
X-UA-Compatible: IE=7
HTTP/... 200 OK
...
X-UA-Compatible: ie=edge,chrome=1
X-UA-Compatible response header is sent, but the meta tag is
also specified:
HTTP/... 200 OK
...
X-UA-Compatible: ie=edge
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>example</title>
...
</head>
<body>...</body>
</html>
HTTP/... 200 OK
...
X-UA-Compatible: ie=edge
The hint can be configured to require
the X-UA-Compatible meta tag. This option is indicated mainly for
the case when the HTTP response header cannot be set.
X-UA-Compatible meta tag is not specified:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
...
</head>
<body>...</body>
</html>
X-UA-Compatible meta tag is specified with a value different than
ie=edge:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=9">
<title>example</title>
...
</head>
<body>...</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<title>example</title>
...
</head>
<body>...</body>
</html>
X-UA-Compatible meta tag is specified in the <body>:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
...
</head>
<body>
...
<meta http-equiv="x-ua-compatible" content="ie=edge">
...
</body>
</html>
X-UA-Compatible meta tag is specified in the <head>, but it’s
not included before all other tags except for the <title> and the
other <meta> tags:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<script src="example.js"></script>
<meta http-equiv="x-ua-compatible" content="ie=9">
...
</head>
<body>...</body>
</html>
HTTP/... 200 OK
...
X-UA-Compatible: ie=edge
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<script src="example.js"></script>
...
</head>
<body>...</body>
</html>
Apache can be configured to add or remove the X-UA-Compatible
header using the Header directive.
X-UA-Compatible header on Apache<IfModule mod_headers.c>
# Because `mod_headers` cannot match based on the content-type,
# and the `X-UA-Compatible` response header should only be sent
# for HTML documents and not for the other resources, the following
# workaround needs to be done.
# 1) Add the header to all resources.
Header set X-UA-Compatible "IE=edge"
# 2) Remove the header for all resources that should not have it.
<FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ic[os]|jpe?g|m?js|json(ld)?|m4[av]|manifest|map|markdown|md|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>
X-UA-Compatible header on ApacheIf the header is sent, in most cases, to make Apache stop sending
the X-UA-Compatible requires removing the configuration that adds
it (i.e.: something such as Header set X-UA-Compatible "IE=edge").
However, if the header is added from somewhere in the stack (e.g.
the framework level, language level such as PHP, etc.), and that
cannot be changed, you can try to remove it at the Apache level,
using the following:
<IfModule mod_headers.c>
Header unset X-UA-Compatible
</IfModule>
Note that:
The above snippets work with Apache v2.2.0+, but you need to have
mod_headers enabled
in order for them to take effect.
If you have access to the main Apache configuration file (usually called httpd.conf), you should add
the logic in, for example, a <Directory>
section in that file. This is usually the recommended way as
using .htaccess files slows down Apache!
If you don't have access to the main configuration file (quite
common with hosting services), add the snippets in a .htaccess
file in the root of the web site/app.
For the complete set of configurations, not just for this rule, see the Apache server configuration related documentation.
X-UA-Compatible header on IISTo add the X-UA-Compatible header you can use a URL rewrite
rule rule that matches the text/html content-type
header of a response and adds it:
<configuration>
<system.webServer>
<rewrite>
<outboundRules>
<rule name="X-UA-Compatible header">
<match serverVariable="RESPONSE_X_UA_Compatible" pattern=".*" />
<conditions>
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
</conditions>
<action type="Rewrite" value="IE=edge"/>
</rule>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>
Note that if your site uses a mime type different than text/html
(e.g.: application/xhtml+xml) to serve HTML content, you'll have
to update the value of pattern.
X-UA-Compatible header on IISIf the header is set by IIS using the above technique, removing the code should be enough to stop sending it.
If the header is set at the application level you can use the following:
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<remove name="X-UA-Compatible"/>
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Note that:
web.config of your
application.For the complete set of configurations, not just for this rule, see the IIS server configuration related documentation.
requireMetaElement can be set to true to allow and require the use of
meta tag.
In the .hintrc file:
{
"connector": {...},
"formatters": [...],
"hints": {
"highest-available-document-mode": [ "warning", {
"requireMetaElement": true
}],
...
},
...
}
Also, note that this hint takes into consideration the targeted
browsers, and if Internet Explorer 8/9/10 aren’t
among them, it will suggest removing the meta tag and/or not sending
the HTTP response header.
This package is installed automatically by webhint:
npm install hint --save-dev
To use it, activate it via the .hintrc configuration file:
{
"connector": {...},
"formatters": [...],
"hints": {
"highest-available-document-mode": "error",
...
},
"parsers": [...],
...
}
Note: The recommended way of running webhint is as a devDependency of
your project.
FAQs
hint for best practices related to usage of the X-UA-Compatible meta tag and response header
The npm package @hint/hint-highest-available-document-mode receives a total of 15,393 weekly downloads. As such, @hint/hint-highest-available-document-mode popularity was classified as popular.
We found that @hint/hint-highest-available-document-mode demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.