This site uses cookies for analytics. By continuing to browse this site, you agree to this use.
A JS Foundation Project

Disallow unneeded HTTP headers for non-HTML resources

Disallow unneeded HTTP headers for non-HTML resources (no-html-only-headers)

no-html-only-headers warns against responding with HTTP headers that are not needed for non-HTML resources.

Why is this important?

Some HTTP headers do not make sense to be sent for non-HTML resources, as sending them does not provide any value to users and contributes to header bloat.

What does the hint check?

The hint checks if non-HTML responses include any of the following HTTP headers:

  • Content-Security-Policy
  • X-Content-Security-Policy
  • X-Frame-Options
  • X-UA-Compatible
  • X-WebKit-CSP
  • X-XSS-Protection

Examples that trigger the hint

Response for /test.js:

HTTP/... 200 OK

Content-Type: text/javascript; charset=utf-8
...
Content-Security-Policy: default-src 'none'
X-Content-Security-Policy: default-src 'none'
X-Frame-Options: DENY
X-UA-Compatible: IE=Edge,
X-WebKit-CSP: default-src 'none'
X-XSS-Protection: 1; mode=block
...

Response for /test.html:

HTTP/... 200 OK

Content-Type: x/y
...
Content-Security-Policy: default-src 'none'
X-Content-Security-Policy: default-src 'none'
X-Frame-Options: DENY
X-UA-Compatible: IE=Edge,
X-WebKit-CSP: default-src 'none'
X-XSS-Protection: 1; mode=block
...

Examples that pass the hint

Response for /test.js:

HTTP/... 200 OK

Content-Type: text/javascript; charset=utf-8
...

Response for /test.html:

HTTP/... 200 OK

Content-Type: text/html
...
Content-Security-Policy: default-src 'none'
X-Content-Security-Policy: default-src 'none'
X-Frame-Options: DENY
X-UA-Compatible: IE=Edge,
X-WebKit-CSP: default-src 'none'
X-XSS-Protection: 1; mode=block
...

How to configure the server to pass this hint

How to configure Apache

Apache can be configured to remove headers using the Header directive.

To remove the headers that are not needed for non-HTML resources, you can do something such as the following:

<IfModule mod_headers.c>

# Because `mod_headers` cannot match based on the content-type,
# the following workaround needs to be used.

<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 Content-Security-Policy
Header unset X-Content-Security-Policy
Header unset X-Frame-Options
Header unset X-UA-Compatible
Header unset X-WebKit-CSP
Header unset X-XSS-Protection
</FilesMatch>
</IfModule>

Note that:

  • The above snippet works with Apache v2.2.0+, but you need to have mod_headers enabled for it 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.

How to configure IIS

If your application is adding the headers unconditionally to all responses and you cannot modify it, the solution is to create URL rewrite rules that will remove them from any resource whose Content-Type header isn’t text/html:

<configuration>
<system.webServer>
<rewrite>
<outboundRules>
<rule name="Content-Security-Policy">
<match serverVariable="RESPONSE_Content_Security_Policy" pattern=".*" />
<conditions>
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" negate="true" />
</conditions>
<action type="Rewrite" value=""/>
</rule>
<rule name="X-Content-Security-Policy">
<match serverVariable="RESPONSE_X_Content_Security_Policy" pattern=".*" />
<conditions>
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" negate="true" />
</conditions>
<action type="Rewrite" value=""/>
</rule>
<rule name="X-Frame-Options">
<match serverVariable="RESPONSE_X_Frame_Options" pattern=".*" />
<conditions>
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" negate="true" />
</conditions>
<action type="Rewrite" value=""/>
</rule>
<rule name="X-UA-Compatible">
<match serverVariable="RESPONSE_X_UA_Compatible" pattern=".*" />
<conditions>
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" negate="true" />
</conditions>
<action type="Rewrite" value=""/>
</rule>
<rule name="X-WebKit-CSP">
<match serverVariable="RESPONSE_X_Webkit_csp" pattern=".*" />
<conditions>
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" negate="true" />
</conditions>
<action type="Rewrite" value=""/>
</rule>
<rule name="X-XSS-Protection">
<match serverVariable="RESPONSE_X_XSS_Protection" pattern=".*" />
<conditions>
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" negate="true" />
</conditions>
<action type="Rewrite" value=""/>
</rule>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>

Note that:

  • If your site uses a mime type different than text/html to serve HTML content (e.g.: application/xhtml+xml), you’ll have to update the value of pattern.
  • The above snippet works with IIS 7+.
  • You should use the above snippet in the web.config of your application.

For the complete set of configurations, not just for this rule, see the IIS server configuration related documentation.

Can the hint be configured?

Yes, you can use:

  • include to specify additional HTTP headers that should be disallowed for non-HTML resources
  • ignore to specify which of the disallowed HTTP headers should be ignored

E.g. The following hint configuration used in the .hintrc file will make the hint allow non-HTML resources to be served with the Content-Security-Policy HTTP header, but not with Custom-Header.

{
"connector": {...},
"formatters": [...],
"hints": {
"no-html-only-headers": [ "warning", {
"ignore": ["Content-Security-Policy"],
"include": ["Custom-Header"]
}],
...
},
...
}

How to use this hint?

To use it you will have to install it via npm:

npm install @hint/hint-no-html-only-headers

Note: You can make npm install it as a devDependency using the --save-dev parameter, or to install it globally, you can use the -g parameter. For other options see npm's documentation.

And then activate it via the .hintrc configuration file:

{
"connector": {...},
"formatters": [...],
"hints": {
"no-html-only-headers": "error",
...
},
"parsers": [...],
...
}