CODEWITHSUNDEEP
fontscross-domainaem
Fede Rodriguez
Fede Rodriguez

Reputation: 23

AEM CORS issue with Fonts while is being request by another server

Hi everyone I'm trying to get fonts from AEM6.1 instance with an index.html created inside my local apache server out site the AEM instance, like this:

index.html

<link rel="stylesheet" type="text/css" href="http://localhost:4502/etc/designs/geometrixx/clientlibs/css/fonts.css" />

Inside font.css :

@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto_medium/Roboto-Medium-webfont.eot');
    src: url('fonts/roboto_medium/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/roboto_medium/Roboto-Medium-webfont.woff') format('woff'),
        url('fonts/roboto_medium/Roboto-Medium-webfont.ttf') format('truetype'),
        url('fonts/roboto_medium/Roboto-Medium-webfont.svg#robotomedium') format('svg');
    font-weight: 500;
    font-style: normal;
}

This is the image of the browser response: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried with the absolute route for the fonts in the CSS file and the files are physically inside AEM, but I get the same response. Any ideas?

Thanks!

Upvotes: 2

Views: 2368

Answers (2)

mickleroy
mickleroy

Reputation: 1008

The following SlingFilter should allow you to access those fonts from another domain

@SlingFilter(label = "Cross-Origin Request Filter",
        metatype = true,
        scope = SlingFilterScope.REQUEST,
        order = -100)
public class CORSFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
                         FilterChain chain) throws IOException, ServletException {

        if (response instanceof SlingHttpServletResponse) {
            SlingHttpServletResponse slingResponse = (SlingHttpServletResponse) response;
            slingResponse.setHeader("Access-Control-Allow-Origin", "*");
            slingResponse.setHeader("Access-Control-Allow-Credentials", "false");
        }

        chain.doFilter(request, response);
    }
}

Source: https://gist.github.com/mickleroy/5ee8ed51ac245a8b59024a4ffec7cf7f

UPDATE

I highly recommend against doing this as it requires the AEM instance to be accessible via the public internet, which goes against the recommended AEM deployment architecture as it is not fronted by a web server with a dispatcher module. This work-around should ONLY be used for development. The recommended approach is to add the Access-Control headers in your Apache configuration (according to my original answer):

<FilesMatch "\.(eot|ttf|otf|woff|woff2)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
        Header set Access-Control-Allow-Methods "GET"
        Header set Access-Control-Allow-Credentials "false"
    </IfModule>
</FilesMatch>

Upvotes: 2

toniedzwiedz
toniedzwiedz

Reputation: 18563

Enabling cross-origin requests from all domains, as suggested by the other answer, is a bad idea. Putting that snippet in your AEM code could compromise your site's security.

Looking at the big picture, there are two ways you can avoid CORS problems:

  1. Allow cross-origin requests from certain domains (but not any domain, that's potentially dangerous. This can be achieved by setting the Access-Control-* headers. Just make sure to limit the values to trusted domains.

  2. Serve your resources from the same domain.

    If you're using the dispatcher mod, you can have Apache cache pages, assets and client libraries returned by AEM and simply serve the font files from the cache. The browser would hit Apache anyway and it would be completely transparent to it whether the files come directly from Apache itself or if they're retrieved from AEM.

    Alternatively, if you're looking for a quick, ad-hock solution to allow you to load the fonts on your local machine, you could use mod_proxy on Apache to have it request the fonts from AEM and pass them on to the browser. Check out Apache: Using reverse proxy and run local website for an example of something similar.

Upvotes: 1

Related Questions