[Bug]: Icons no longer load from MS CDNs

[dvTB]

Library

React / v8 (@fluentui/react)

System Info

All fluentui versions that use a CDN.

Are you reporting an Accessibility issue?

no

Reproduction

Try loading https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons-3.54.woff into your web-application.

Bug Description

Actual Behavior

It seems that the MS CDNs were reconfigured. Embedding resources into the site (like fluent UI Icons) does currently not work (not even with localhost).

Access to font at 'https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons-3.54.woff' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. GET https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons-3.54.woff net::ERR_FAILED 301 (Moved Permanently)

I know this isn't really a bug of the software, but you might be in the position to get this problem fixed ;)

Expected Behavior

At least the default CDN should work.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[renatodias13]

I have the exact same issue in PRD in my case I am using the V5

[mrphannguyen]

Im face this issue, pls check the CDN asap, it's effecting our production now

[AndreAndradeLR]

Any update on this? all of our SP Subscription Editon farms are affected as well. CDN seems to work when we call the files directly from the browser, but not when the call is made by the applications (CORS)

[dvTB]

Seems like MS moved the CDNs to another location but didn't add CORS * entry for the redirect. More or less all MS projects are affected (e.g. even the old Office-UI)

[mrphannguyen]

You guys can override the CDN url path, it works

$ms-icon-cdn-path: 'https://res.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/icons'; $ms-font-cdn-path: 'https://res.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/fonts';

@import '../../node_modules/@fluentui/react/dist/sass/Fabric';

[sysofwan]

Our product is impacted too. Causing livesite incident.

[mainframev]

hi @dvTB 👋🏻

instead of static2.sharepointonline endpoint, try to use this one: https://res.cdn.office.net/files/fabric-cdn-prod_20240805.001/assets/icons/fabricmdl2icons-3.54.woff

@mrphannguyen gave a good suggestion, but the calendar version is older. This one above should be the latest.

From our archived wiki::

By default, the icon fonts for the default set of icons will be pulled from the SharePoint CDN. The default endpoint is spoprod-a.akamaihd.net res.cdn.office.net, but if you run into access/security issues from the Akamai domain, you can also pass in https://static2.sharepointonline.com/files/fabric/assets/icons/ as the baseUrl.

I guess you have specified explicitly the sharepoint endpoint and it should work if you will remove it.

// Also available from @uifabric/icons (7 and earlier) and @fluentui/font-icons-mdl2 (8+)
import { initializeIcons } from '@fluentui/react/lib/Icons';

initializeIcons(/* optional base url */);

[mrphannguyen]

@mainframev Yeah, depending on the version of fluentui in your project then you update the path for consistent

[dvTB]

@mainframev currently the projects use the default path. For some CDNs microsoft seem to have fixed the issue (e.g. the older Office UI had also these issues, but there it now works again). Currently I try to use my own cdn (which make future upgrades of fluent a bit more complicated) but it is a bit more problemetic with initializeFileTypeIcons, as those assets are not packaged anywhere. Would be great for future releases if all used assets were inside of the npm packages.

Btw fabric.css / fabric.min.css is still included in fluentui which has the comment "Office UI Fabric Core 11.0.1" and contains hard links to https://static2.sharepointonline.com/ and https://spoprod-a.akamaihd.net/ for fonts and pictures (and some picture-links do not even work any longer (independent of the current problems).

[tudorpopams]

Hello folks, until the CDN issue gets sorted out (we're discussing now with the owners, this might have been a security compliance requirement), please try to host the assets on your own, by checking this guidance: https://github.com/microsoft/fluentui/blob/master/docs/react-wiki-archive/BestPractices/Using-icons.md#alternative-cdn-options

I'm fully aware that this might not be ideal in many cases, but it can fix the current issues and offer long term control over the endpoints.

[tudorpopams]

here's an answer we got from the CDN owners:

SharePoint CDN team wants to deprecate few old endpoints (including static2) as we already migrated to 1CDN more than 1.5 years ago. The changes were deployed earlier this week to make the redirect to the new endpoint.

Few solutions.

1. Application fixes the CSP right now so the redirect can be chased. [short term]
2. Revert the CDN redirect change temperately until the application fixes the CSP. [short term]
3. Application packages the resources that it needs with the JavaScript. [medim-term]

The preferred solution is 1.

[micahgodbolt]

The CDN change has been reverted.

[tudorpopams]

Although the CDN changes have been reverted, it is very important for everyone to update their projects and host these assets themselves as the previous changes will be applied again in the near future.

[renatodias13]

We are not sure how to change the Fonts & Icons when using the vs 5.135.6. We are using SharePoint SE (so we are forced to use VS 5) and trying to change the fonts and icons we came across this post: https://github.com/SharePoint/sp-dev-docs/issues/9307

We also found this solution but only seems to work on VS 7 or above: https://codesandbox.io/p/sandbox/customizing-fabric-icons-and-fonts-bveg8?file=%2Fpackage.json%3A15%2C34

Is there a way to do overwrite the default url on VS 5 (for fonts and icons)?

@tudorpopams your post is what concerns me the most because we can't really figure out how to proceed with the issues we detailed above and we really dont know when this security change will be applied again.