Convert relative URLs to absolute ones pointing to the site domain when processing font URLs

Open
  • Is something wrong?
#5 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
csharp, css
Domain
performance, web-dev

Research direction

Start at ResourceProcessingService.ConvertRelativeUrlsToAbsolute() in Combinator and trace how font URLs in a stylesheet are processed. Use the provided @font-face example to verify the behavior; done means those font URLs are rewritten as absolute URLs pointing to the calling site rather than remote storage.

Written by the indexing model from the issue text.

Description

@Piedone created on Jul 30, 2014:
https://orchardwatcher.codeplex.com/workitem/2

Premises: processed resources should be stored in a remote storage AND using a resource base URL.

There's an issue when there are local source URLs for fonts, e.g.:

@font-face {
  font-family: 'FontAwesome';
  src: url('../Content/fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('../Content/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../Content/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../Content/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../Content/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

These URLs, when the processed resource is saved to the remote storage, will be converted to unified relative, then protocoll-less absolute paths (see ResourceProcessingService.ConvertRelativeUrlsToAbsolute()). This causes a cross-origin error though: such fonts should rather be fetched from the site directly (i.e. their URL re-written as absolute ones, but pointing to the calling site).

The check needed for this could be made whether the current property is under font-face, but this can only be made from ExCSS, when that will be used in Combinator.

Alternatively you could enable CORS on the remote storage. This is a way to do it on Azure Blob storage: http://blog.codingoutloud.com/2014/02/21/stupid-azure-trick-6-a-cors-toggler-command-line-tool-for-windows-azure-blobs/ (on DotNest we'd indeed need to allow * because of the arbitrary site URLs, what is bad...).

The current workaround is to exclude the whole stylesheet containing the font face.

Dominant language
C#
Stars
8
Forks
4
No merged PRs in 30d

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Lombiq/Combinator

All issues in Lombiq/Combinator

Similar issues

More C# issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.