Save and Preview - has been blocked by CORS policy

Questions
1

When I save and preview i got some errors : “from origin ‘null’ has been blocked by CORS policy”

Example: https://.....azurewebsites.net/fonts/noto-sans/NotoSans-Italic-VariableFont_wdth,wght.ttf' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In development I have this in web.config

<add name="Access-Control-Allow-Origin" value="null" />

And it solves the problem. But i can’t have that in production because is insecure. Any solution?
Thanks in advance.

2

Are you doing headless or something weird with the domains?

CORS should not really be a problem if you use the same domain or configure it correctly.

Regarding your development config, it is as you write, it’s not suitable for production.
Instead you should add the domains you trust like the CORS documentation describes:

Again, you should not really be struggling with this unless your doing some weird cross domain stuff.

3

The problem is that I’m using a LESS file with the following content:

@font-face {
    font-family: 'Noto Sans';
    src: url('/fonts/noto-sans/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-style: normal;
}

As far as I understand, when I use the preview in Umbraco, it opens the site in a sandboxed iframe. In this situation, the browser sets the “origin” of the iframe to null for security reasons.

Because of this, when the browser tries to load the font file via @font-face , the request comes from the origin null (not from the real website origin, like https://localhost:44368 ). Most servers don’t allow cross-origin requests from the null origin by default, unless the CORS header is set to * (wildcard), which is not recommended in production.

So, even though the font file is in the right place and the @font-face declaration is correct, the browser blocks the font from loading in preview mode due to CORS (Cross-Origin Resource Sharing) restrictions.

In summary:

  • In preview/sandbox mode, the iframe’s origin is null .
  • The font request comes from null origin.
  • The server doesn’t allow this by default, so the font is blocked by the browser’s CORS policy.
  • This only happens in preview/sandbox contexts, not in normal browsing.

Solution: Dont know if is possible:

Change : <iframe title="Page preview" sandbox="allow-scripts"
To: <iframe title="Page preview" sandbox="allow-scripts allow-same-origin"

4

The Solution that I proposed was made in version 15.4.1. I was using 15.3.1

Umbraco-CMS/src/Umbraco.Web.UI.Client/src/apps/preview/preview.element.ts

1 Like