I’ve created a CustomUI macro that is built off of the FullCalendar library. That library contains some base64 icons to display some left/right icons, however I have no idea how I can give my macro permission to load those icons since they’re blocked.
I’ve given permissions for inline scripts to load but given this is a base64 encoded font within the FullCalendar library i’m unsure as to how to give direct permissions to this exact font library, or how to just allow any base64 encoded fonts that the app attempts to load. Visually, this is how it looks within my macro
Did you manage to solve this ? I’ve tried with custom CSP, but forge doesn’t allow setting data: URIs for fonts …
Way too late to help with the original post or the follow up… but for anyone else coming across this I’ve found a solution that works for my use case…
TL:DR; - convert the base64 encoded font into a font file and add it to your React project.
In my case I want to use the ReactViewer package (GitHub - infeng/react-viewer: react image viewer, supports rotation, scale, zoom and so on) to show an image carousel with various options. The buttons for zoom in, zoom out, rotate, etc use a font defined in the package as data:font/ttf;base64,<encoded font data>.
Here’s what I did:
Step 1:
Copy the whole string to your clipboard. This includes the data:font/ttf;base64 and all of the encoded text
Step 2:
Paste it into a Chrome browsers address bar. This will automatically download a file called download. Rename the file to the correct extension for the font (in my case this became icomoon.ttf because that is the name and type of the font).
Step 3
Create a fonts folder to hold the local fonts - for me I put this in my static folder because I want all my macros to be able to share it.
Step 4
Copy the font into that folder.
Step 5
Add CSS to define the font family - for me I already had a CSS file which was imported into my .jsx file so I added it there… but you can add it anywhere.
Step 6
Define the font in your CSS. Note that the URL will depend on where your CSS file is. Mine was in the root of the static folder and the url reflects that.
@font-face {
font-family: "icomoon";
src: local("icomoon"),
url("./fonts/icomoon.ttf") format("truetype");
font-weight: normal;
}
For me this then ‘just worked’. The package used the local icomoon font rather than the base64 encoded one.
NB: You will still get a console error saying that the original encoded font couldn’t be loaded however this didn’t affect any functionality in any way.
Hope this helps someone. I’m not an expert in this area but managed to fumble my way through a few pages on Google and thought this might be helpful.
2 Likes
This solution worked for me. Thanks for the time and effort you took to put this detailed answer together. Very much appreciated.