Search code examples
thymeleafmicronautmicronaut-security

Micronaut Application, with security configured, returns Http 403 for js and css files


I am trying out Micronaut application (version 3.8.9). The application, in addition to few Rest APIs, would have HTML, Javascript and CSS for front end and also authentication and authorization. App works fine, but js and css files are forbidden. Need help to resolve this issue please.

Under src/main/resources I have static and views folders. In static folder I have javascript and css files; and under views I have all html files. I am using Thymeleaf as Template Engine.

src/main/resources
  /static
    index.js
    index.css
  /views
    index.html

index.html has: <script type="module" src="../static/index.js"></script>

I tried this too - but did not work : <script type="module" th:src="@{./index.js}"></script>

The application.yml file entries as under:

micronaut:
  application:
    name: micronautguide
  
  security:
    authentication: session
    redirect:
      login-success: /app/home
      login-failure: /login/authFailed
  
  router:
    static-resources:
      default:
        enabled: true
        mapping: [/static/**, /views/**]
        paths: [classpath:static, classpath:views]

However while serving http://localhost:8080/static/index.js and http://localhost:8080/static/index.css throws error "Failed to load resource: the server responded with a status of 403 (Forbidden)" for js and css files.

The log file has this entry:

10:01:03.183 DEBUG InterceptUrlMapRule.check:105 - No url map pattern match found for path [/static/index.js]. Returning unknown. 10:01:03.183 DEBUG SecurityFilter.lambda$checkRules$8:187 - Authorized request GET /static/index.js. No rule provider authorized or rejected the request. 10:01:03.187 DEBUG CookieHttpSessionStrategy.encodeId:101 - path /static/index.js, cookie value YzdjNDExZTItNGNiYS00NzljLTliMTktMDQ3YmU0YzAyOWRl 10:01:03.187 DEBUG RoutingInBoundHandler.syncWriteAndFlushNettyResponse:1323 - Response 403 - GET /static/index.js

I added this to to overcome the security error, but did not help.

@PermitAll
@Secured(SecurityRule.IS_ANONYMOUS)
@Controller("/static")
public class JSCSSController {
    no methods here
}

I went through the Guides but couldn't get through this issue.

What mistake am I doing?

Thanks in advance.


Solution

  • When adding dep micronaut-views-thymeleaf, no additional config is required in application.yml to make Thymeleaf work as long as you keep templates in folder resources/views.

    You want to add some static resources with separate path in your app. There's no need for involving folder views into the extra config for that.

    io.micronaut.web.router.resource.StaticResourceConfiguration#setMapping accepts a string, not an array.

    For the allowing anonymous part of your question, you'll need a intercept-url-map in your application.yml (please see below). Micronaut Security 4.3 Intercept URL Map

    Hence, please try this config in application.yml instead.

    micronaut:
      application:
        name: micronautguide
    
      # may be omitted when using default folder "views"
      # views:
      #  folder: views
    
      security:
        authentication: session
        redirect:
          login-success: /app/home
          login-failure: /login/authFailed
        intercept-url-map:
          - pattern: /static/**/*
            http-method: GET
            access:
              - isAnonymous()
    
      router:
        static-resources:
          default:
            enabled: true
            mapping: /static/**/*
            paths:
              - classpath:static
    

    You need to change the path to index.js and you may have to add attribute crossorigin in script tag: <script type="module" crossorigin src="/static/index.js">

    Config is tested and verified with a MN:3.9.1 app.