When a page is being redirected using requestdispatcher in a filter, the CSS contents do not seem to be applying correctly

Upon evaluation of the condition, if it fails, I am utilizing a request dispatcher to redirect to another page. The redirection is successful, however, the CSS is not being applied to the new page. What could be causing this issue?

public class RolePrivilegeFilter implements Filter {
List<String> privilege = null;
private static final String notAuthorizedPath = "/home/notAuthorized.jsf";
@Override
public void destroy() {
log.info("filter finish");
}

@Override
public void doFilter(ServletRequest sRequest, ServletResponse sResponse, FilterChain filterChain) throws IOException, ServletException {
String smUser = null;
 try {
    HttpServletRequest request = (HttpServletRequest) sRequest;
    HttpServletResponse response = (HttpServletResponse) sResponse;
    HttpSession session = null;
    try {
        request = (HttpServletRequest) sRequest;
        smUser =  request.getHeader(EnvironmentBean.SESSION_ATTR_SM_USER);
        } catch (Exception e) {
        // TODO: handle exception
        e.printStackTrace();
        }
    if (rolePrivilege == null || rolePrivilege.isEmpty()) {
    rolePrivilege = new RolePrivilegeBuilderImpl().rolePrivilege("Smtest2");
    privilege filter bean is\t"+rolePrivilege);
    log.debug("After rolePrivilege: " + rolePrivilege);
    if (rolePrivilege != null && rolePrivilege.size() > 0 ) {
    if (session == null) {
        session = request.getSession(true);
    }
    session.setAttribute("privilege", rolePrivilege);

    } else {
             //This is the page iam  redirecting to. 
    System.out.println("role privilege not authorized page");
    RequestDispatcher rd = request.getRequestDispatcher(notAuthorizedPath);
                    rd.forward(request, response);
                    return;
           }
    } catch (Exception e) {
        e.printStackTrace();
        log.debug("Error in setting session attribute: " + e.getMessage());
    }
    log.debug("doFilter() finish");
    filterChain.doFilter(sRequest, sResponse);
}

@Override
public void init(FilterConfig arg0) throws ServletException {
    log.info("filter start");

}
}

Even though the redirection to the new page is successful, the CSS styles, including background images, are not being displayed. Why could this be happening?

Answer №1

It seems that the filter's URL pattern coincidentally matched the browser's request for the CSS file, causing it to be blocked by the filter. This may have happened because the filter was mapped to a very broad URL pattern like /*.

To fix this issue, make sure the filter allows requests for CSS files to bypass it. If you can't change the filter's URL pattern to specifically exclude CSS file requests (e.g., changing /* to /app/*), then consider adding an additional check in the filter's code to permit CSS file requests.

You could implement something like this:

if (request.getRequestURI().endsWith(".css")) {
    chain.doFilter(request, response);
    return;
}

This modification will ensure that all requests for *.css files are allowed through instead of being blocked.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using a gogocartojs map in your JavaScript project

I have created a new project and am attempting to integrate gogocartoJs into it. While the project itself is functioning properly, I am experiencing issues with the map not displaying as expected. Although I have followed the provided guides, there seems ...

Tips for maintaining consistent formatting of a div element across various sizes

Looking to create a Bootstrap Jumbotron that features a background image, text (h1 and p), and a call-to-action button that scales appropriately for different viewports without sacrificing formatting. Essentially, the goal is for the div to behave like an ...

"Create a notification pop-up in CSS that appears when a link is clicked, similar to

I am looking to create a model page that functions similarly to the inbox popup on Stack Overflow. When we click on the inbox icon, a small box appears with a tiny loader indicating messages or comments. The box then expands depending on the content inside ...

Showing ASP code within a DIV element (inline)

Working on setting up a 'shopping cart' feature on our website, but running into some issues with the ASP code. Does anyone have any advice to offer? In the image below, you can see that when items are added to the cart, the 'total' is ...

drop down menu in navigation bar: unable to display items

I am having trouble with a dropdown menu in my code. Even though I used the code from the official Bootstrap website, the items are not appearing in the dropdown list. <nav class="navbar navbar-expand-lg navbar-dark bg-primary "> ...

Implementing a Dialog Box for Confirmation

I want to include a "confirmation box" that will display the message "Are you sure you want to update/delete question?" when I press the "update" and/or "delete" buttons. I attempted to add onclick="return confirm('Are you sure you want to logout?& ...

What is the best way to display input data (with names and values) in a textarea field

I'm currently working on a project that requires the value of a textarea to be updated whenever one of the input values in the same form is changed. Here is the HTML code: <form id="form" action="" method=""> <textarea readonly class="overv ...

Tips for expanding the content of a blogger page to fill the entire frame of the page

Check out this page: . Currently, the video on the page does not fill up the entire screen. Any suggestions for a solution? ...

Counting the number of elements in a list can be problematic when using Firefox

Currently, I am in the process of writing CSS to customize the appearance of an XML document. Specifically, I aim to alter how child elements are displayed and have them resemble HTML OL/UL/LI elements. The structure of my XML file is as follows: <?x ...

Tips for Formatting Mandatory Message Input Fields and Text Boxes

I am in the process of creating a contact page for my Reactjs website, but I am unsure how to style the required message that should appear below the input or textarea upon clicking Submit. Can anyone guide me on how to achieve this? Relevant Code <for ...

What is the best way to pass the index value of a v-for loop as an argument to a computed property function in Vue?

I'm looking to pass the index value from a v-for loop (inside a path tag) as a parameter to a function stateData(index) defined in a computed property in Vue. I attempted to achieve this using v-model="stateData[index]", but an error is being displaye ...

Guide on extracting data from a JavaScript table using Python

Looking to extract information from a table on this page: . There are a total of 18 pages, but the url remains constant for each page. My usual method involves using BeautifulSoup to scrape data from HTML pages. However, in this case, the required data is ...

Create an HTML document with a bottom section that shows up on every page when printed

I am currently working on creating a footer for an HTML file where the requirement is to have the footer displayed on each printed page. I came across a solution that fixes specific text to every page that I print. Here is the code snippet: <div class ...

CSS animations are failing to work properly in Firefox due to a pseudo-element issue

I'm encountering a problem with my CSS animations in Firefox. Specifically, the animations are not working on a pseudo element (:after) while they work perfectly fine on other browsers. Below is where the animations are being applied: :after { d ...

Adjust the color of a label based on a set threshold in Chart.js

Can anyone help me with my Chart.js issue? Here is a link to the chart: I am trying to change the color of the horizontal label when it falls between 70.00 - 73.99. Does anyone know if there's a specific option for this in Chart.js? Thanks! ...

Leveraging the power of angular's $asyncValidators by implementing a cache

I've created a validation directive that verifies a value against an endpoint App.directive('validate', function(fooService, $q) { return { restrict: "A", require: "ngModel", link: function(scope, elem, attrs, ngModel) { ...

"Trouble with 3D hexagonal grid in CSS - unable to achieve desired display

In order to create a dynamic Hexagonal Grid using CSS, the objective is to automatically reorganize hexes in a circular or rectangular manner when a new div with a specific class (e.g. 'hexes') is added to the view. Currently, there is a grid wi ...

Text Parallax Effect

For my website, I am interested in incorporating a unique parallax effect. Instead of just fixing a background image and allowing scrolling over it, I want to apply this effect to all of the content on my site. The website consists of a single page with m ...

Pass the ID to a PHP script to retrieve the image source tag from the database based on the file

I am facing a challenge that I thought would be simple, but despite my efforts to research and experiment, I can't seem to get it right. I have a database that stores image file names, and I need to retrieve the file name based on the ID specified in ...

Ensure that the assistant stays beneath the cursor while moving it

I am currently working on creating a functionality similar to the 'Sortable Widget', but due to some constraints, I cannot use the premade widget. Instead, I am trying to replicate its features using draggable and droppable elements: $(".Element ...