elder girder
I am trying to display / render an image using <img/>. The image is located in the system cache folder (appCacheFolder() from Tauri API). However it is failing due to "Not allowed to load local resource" error.
I've seen several similar errors after googling, but they all came from all sorts of frameworks and toolkit, and has their own way of workaround. What is Tauri's way to work around this?
Vanilla / No framework
TypeScript
Rust
Here's my allowlist:
"allowlist": {
"all": false,
"shell": {
"all": false,
"open": true
},
"protocol": {
"assetScope": [
"allow"
]
},
"path": {
"all": true
}
},
the image does exist in the file system
lavish wing
okay i think moving the github discussion to here makes it a bit quicker (we can share the summary there at the end)
2 things:
assetScope expects paths you want to allow.so in this case "$APPCACHE/*" to allow all files (not recursively) in the appCacheDir
elder girder
whaaaa you sniffed all the way from github to here 💀
elder girder
so in this case `"$APPCACHE/*"` to allow all files (not recursively) in the appC...
But I have the image in an "image" subdirectory in the cache folder, does that mean it won't be included in the allowed files list?
lavish wing
you can change it to "$APPCACHE/image/*" or "$APPCACHE/**" if you want to allow everything in that folder including subdirs
elder girder
I see, will try rn
mhm it seems that the issue persists 🤔
Ive noticed that this asset link is not working on its own in a regular browser
It's hard to tell if the link is actually "unsupported" or is it just invalid
though I don't see a problem with the currnet url being supplied
Ive had asset scope set up correctly (i assume) too
"protocol": {
"assetScope": [
"$APPCACHE/**",
"$APPCACHE/cn.adam.pivix/**",
"$APPCACHE/images/*"
]
},
it's tauri specific. just like the tauri:// protocol that serves your frontend in built apps.
elder girder
ah so its not meant to work directly in a browser
lavish wing
nope
lavish wing
no idea, i can't remember seeing that issue before. 2 things to try though
elder girder
hm Ive used appDataDir, same outcome
for the first..do you mean use the fetch function in js?
lavish wing
yea
elder girder
yea
was discussing with someone yesterday about this too they suggested js but interestingly get requests sent from js gets rejected but every other ways (browsers, rust, c# etc) works perfectly fine
as for the website's api
lavish wing
well if it cant be solved then the only way is to switch tatics
which i alr have one but not related to this post-
Moving back to here
elder girder
lmao i knew u gonna do this
lavish wing
so the thing is, there's something specific to your system i'm missing
lavish wing
lmao i knew u gonna do this
i tend to be very predictable
lavish wing
so the thing is, there's something specific to your system i'm missing
what i mean is that it's not everyone on macos experiencing this issue
i'd lean towards saying it's just you
elder girder
ah
worthy nymph
could it be a csp issue?
elder girder
what i mean is that it's not everyone on macos experiencing this issue
I can test it on a macos virtual machine that might help reveal the issue here
worthy nymph
do you have ``` "security": {
"csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"
},
hmm I copied the csp from the tauri docs
elder girder
do you have ``` "security": {
"csp": "default-src 'self'; img-src 'se...
yup exact same
elder girder
i'd lean towards saying it's just you
but are you aware of any intentional security-oriented implementations that specifically blocks access to files from outside of wd
that hasnt been brought up here
elder girder
including the recovery disk of my macos installation
lavish wing
if it'd be the scope causing issues the error, at least on fetch, would say so
elder girder
if it'd be the scope causing issues the error, at least on `fetch`, would say so
fetch is http request function no?
lavish wing
yes
elder girder
my web request was executed successfully without errors 🤔 using reqwest crate
lavish wing
reqwest shouldn't have access to the asset protocol tho
either way, you gotta do the request inside the webview to get the same sandbox limitations etc
and cors/csp whatever
elder girder
it doesnt, its just responsible for dumping the downloaded image into one of the newly created file in system cache folder
worthy nymph
Ive had asset scope set up correctly (i assume) too
```json
"protocol": {
"ass...
here, you also should have ``` "asset": true
omg
elder girder
here, you also should have ``` "asset": true
```
ah thats missing
lavish wing
i'm apparently blind
elder girder
ye il test it out asap rn im not on my dev machine
wait huh so even with assetscope defined, as long as asset is not explicitely set to true, all other protocols will be ignored? 🤔
lavish wing
yep
lavish wing
time to quit the working group 
elder girder
been carpet-searching through the entire internet
lavish wing
thanks for catching that @worthy nymph. I would have searched for hours lol
elder girder
been carpet-searching through the entire internet
earlier on i even asked my web development class teacher and hes like "ye no im not abt to try to comprehend this"
aksed chatgpt in 5 different ways
elder girder
here, you also should have ``` "asset": true
```
ending up with this 💀
lavish wing
yeah, chatgpt doesn't know anything about tauri, its dataset is too old
elder girder
well to be specific, i used https://www.phind.com which is like new bing but.. well its no diff but-
worthy nymph
Great 🙂 happy that I was able to help!
