Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images

Question

I've been using prefix mapping for years and decided to switch to suffix mapping, just to get rid of the /faces in the url really. I just wanted to check I'm going in the right direction before I dig myself a hole as there are a few unexpected things going on. I changed from this:

<servlet-mapping>
    <servlet-name>FacesServlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>

to this:

<servlet-mapping>
    <servlet-name>FacesServlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

And then I see that everything going through FacesServlet has .xhtml appended to it, so that the browser is requesting background.png.xhtml files, style.css.xhtml file - is this right? It is called suffix mapping I suppose, but it looks a bit untidy to me and I'm trying to convince myself it's the way to go.

In my CSS files where an URI is referenced I also have to append .xhtml:

background-image: url(images/background.png.xhtml);

Then I saw a post from BalusC that gives a solution to prevent the download of resources without going via FacesServlet:

<security-constraint>
    <display-name>Restrict raw XHTML docs</display-name>
    <web-resource-collection>
        <web-resource-name>XHTML</web-resource-name>
        <url-pattern>*.xhtml</url-pattern>
    </web-resource-collection>
    <auth-constraint/>
</security-constraint>

When I add this then only real .xhtml files load on the page, all other resources (despite having .xhtml appended) do not display.

All I want to know is:

1. Is this appending .xhtml to everything normal (sorry if the years silliest question)

2. Why does the 'restrict raw xhtml docs' security constraint prevent resource such as CSS, JavaScript and images from loading?

Thanks for any feedback. I am using Mojarra 2.1.2 on Glassfish 3.1.

Answer 1

and then I see that everything going through FacesServlet has .xhtml appended to it, so that the browser is requesting .png.xhtml files, .css.xhtml file - is this right?

This only applies to resources included by <h:outputStylesheet> and <h:outputScript>. This is not related to the change in the URL mapping. This is related to the change from JSF 1.x to JSF 2.x and the change from <link rel="stylesheet"> and <script> to the aforementioned JSF2 tags.

For your own scripts, stylesheets and other static stuff which is to be served from the public webcontent, you should not manually add the .xhtml extension. You should not need to change anything with regard to existing static resources.

Only for CSS background images and other url() references in CSS files which is to be included using the <h:outputStylesheet> tag (and thus not for <link rel="stylesheet>), you would need to change the url() location to be dynamically resolved by EL. You would need to use the following syntax instead:

body {
    background-image: url("#{resource['libraryname:path/to/image.png']}");
}

Imagine that you have the following /resources folder structure:

WebContent
 |-- META-INF
 |-- resources
 |    `-- default
 |         |-- images
 |         |    `-- background.png
 |         `-- css
 |              `-- style.css
 |-- WEB-INF
 `-- test.xhtml

and that you're including the style.css in test.xhtml as follows

<h:outputStylesheet library="default" name="css/style.css" />

then you should be defining the background image URL as follows

body {
    background-image: url("#{resource['default:images/background.png']}");
}

Or when you're relying on the default library, thus you aren't using the library, then it should rather look like this:

WebContent
 |-- META-INF
 |-- resources
 |    |-- images
 |    |    `-- background.png
 |    `-- css
 |         `-- style.css
 |-- WEB-INF
 `-- test.xhtml

test.xhtml:

<h:outputStylesheet name="css/style.css" />

style.css:

body {
    background-image: url("#{resource['images/background.png']}");
}

---

As to the securiry constraint, it is not needed when you're already using the *.xhtml mapping. The security constraint is intended to prevent the enduser from seeing the raw XHTML source code when the FacesServlet is mapped on a pattern other then *.xhtml. The enduser would be able to see the XHTML source code by just removing /faces part from the URL in case of a /faces/* mapping or renaming .jsf to .xhtml in case of a *.jsf mapping. Get rid of the security constraint, it makes in your case things worse as you're already using a *.xhtml mapping which makes it already impossible to see the raw XHTML source code by hacking the URL.