sriHashes incorrect when setting cdnUrl with path (like https://xxx/xxx) and baseUrl starts with '/'(default value or/xxx/)

[Shana-AE]

Version

nuxt-security: v2.0.0
nuxt: v3.13.2

Reproduction Link

https://stackblitz.com/edit/nuxt-starter-iaotaz?file=package.json,nuxt.config.ts,.vscode%2Fsettings.json,.output%2Fserver%2Fchunks%2Fruntime.mjs

Steps to reproduce

1. check nuxt.config.ts
2. run build
3. run code .output/server/chunks/runtime.mjs to open the built file since it's not showed in sidebar
4. find sriHashes.

What is Expected?

sriHashes should consider cdnURL path, and keys should be https://test/path/<files>

What is actually happening?

sriHashes ignored cdnURL path, and keys starts with https://test/<files>

[vejja]

Hi @Shana-AE
The issue is that the /path component is lost ?

[Shana-AE]

Hi @Shana-AE The issue is that the /path component is lost ?

yes, relativeUrl starts with /, so /path is lost

nuxt-security/src/module.ts

Line 307 in f7d989c

url = new URL(relativeUrl, appCdnUrl).href

[vejja]

Yes you're right

[Shana-AE]

By the way, is there any way to modify the sriHashes at runtime?
The fact is I have two cdn for different geo location users. I want to use different cdnURL according to user location.
I'm using scripts to duplicate static files and modify cdnURL after build, but for sriHashes, only a replacement is not enough, so is that parsing and adding another set of cdn sriHashes the only solution?

[vejja]

By the way, is there any way to modify the sriHashes at runtime? The fact is I have two cdn for different geo location users. I want to use different cdnURL according to user location. I'm using scripts to duplicate static files and modify cdnURL after build, but for sriHashes, only a replacement is not enough, so is that parsing and adding another set of cdn sriHashes the only solution?

Can you explain your workflow sequence a little bit more?
sriHashes are computed once and for all at build time, but once they are injected in the source they will work irrespective of where the file is deployed.

[vejja]

Hi @Shana-AE The issue is that the /path component is lost ?

yes, relativeUrl starts with /, so /path is lost

nuxt-security/src/module.ts

Line 307 in f7d989c

url = new URL(relativeUrl, appCdnUrl).href

Am I right to assume that we should strip the leading / from relativeUrl in that case ?

[Shana-AE]

By the way, is there any way to modify the sriHashes at runtime? The fact is I have two cdn for different geo location users. I want to use different cdnURL according to user location. I'm using scripts to duplicate static files and modify cdnURL after build, but for sriHashes, only a replacement is not enough, so is that parsing and adding another set of cdn sriHashes the only solution?

Can you explain your workflow sequence a little bit more? sriHashes are computed once and for all at build time, but once they are injected in the source they will work irrespective of where the file is deployed.

Thank you for replying!
First of all, we used SPA and we had two cdn urls, one for domestic users, and the other for overseas users. and we upload all the JS and CSS files onto both the CDNs. Let's say one is https://cdn.domestic.com and the other is https://cdn.overseas.com
And we use nginx to figure out whether a user is domestic or overseas, and serve them different html entries. That says, if user is domestic, serve them a html file that refers to JS files from https://cdn.domestic.com and when user is overseas serve them another html file that refers to js files hold on https://cdn.overseas.com
As I didn't find a good solution to pass an array to next cdnUrl or vite base config to make them build two sets of assets that use different cdnURL. I set the cdnURL/base to https://cdn.domestic.com and after build, I duplicate the files that has https://cdn.domestic.com string, and replace this cdn string with https://cdn.overseas.com, and then make nginx points to different entries according to users' geo location. and upload the JS and CSS files onto their related CDN.
And for nuxt and nuxt-security, I found sriHashes has the string https://cdn.domestic.com in server/chunks/runtime.mjs file. I think it is not wise to duplicate this file and make two versions servers runnning, and it should be only one server running. So how can I make https://cdn.overseas.com files also included in sriHashes?
Thanks a lot for your kindness!

[Shana-AE]

Hi @Shana-AE The issue is that the /path component is lost ?

yes, relativeUrl starts with /, so /path is lost

nuxt-security/src/module.ts

Line 307 in f7d989c

url = new URL(relativeUrl, appCdnUrl).href

Am I right to assume that we should strip the leading / from relativeUrl in that case ?

I don't know if it has any other effects, but I think yes.

[vejja]

By the way, is there any way to modify the sriHashes at runtime? The fact is I have two cdn for different geo location users. I want to use different cdnURL according to user location. I'm using scripts to duplicate static files and modify cdnURL after build, but for sriHashes, only a replacement is not enough, so is that parsing and adding another set of cdn sriHashes the only solution?

Can you explain your workflow sequence a little bit more? sriHashes are computed once and for all at build time, but once they are injected in the source they will work irrespective of where the file is deployed.

Thank you for replying! First of all, we used SPA and we had two cdn urls, one for domestic users, and the other for overseas users. and we upload all the JS and CSS files onto both the CDNs. Let's say one is https://cdn.domestic.com and the other is https://cdn.overseas.com And we use nginx to figure out whether a user is domestic or overseas, and serve them different html entries. That says, if user is domestic, serve them a html file that refers to JS files from https://cdn.domestic.com and when user is overseas serve them another html file that refers to js files hold on https://cdn.overseas.com As I didn't find a good solution to pass an array to next cdnUrl or vite base config to make them build two sets of assets that use different cdnURL. I set the cdnURL/base to https://cdn.domestic.com and after build, I duplicate the files that has https://cdn.domestic.com string, and replace this cdn string with https://cdn.overseas.com, and then make nginx points to different entries according to users' geo location. and upload the JS and CSS files onto their related CDN. And for nuxt and nuxt-security, I found sriHashes has the string https://cdn.domestic.com in server/chunks/runtime.mjs file. I think it is not wise to duplicate this file and make two versions servers runnning, and it should be only one server running. So how can I make https://cdn.overseas.com files also included in sriHashes? Thanks a lot for your kindness!

I suppose you are building a static application (nuxi generate) and not an SSR/hybrid application (nuxi build), right ?

[Shana-AE]

By the way, is there any way to modify the sriHashes at runtime? The fact is I have two cdn for different geo location users. I want to use different cdnURL according to user location. I'm using scripts to duplicate static files and modify cdnURL after build, but for sriHashes, only a replacement is not enough, so is that parsing and adding another set of cdn sriHashes the only solution?

Can you explain your workflow sequence a little bit more? sriHashes are computed once and for all at build time, but once they are injected in the source they will work irrespective of where the file is deployed.

Thank you for replying! First of all, we used SPA and we had two cdn urls, one for domestic users, and the other for overseas users. and we upload all the JS and CSS files onto both the CDNs. Let's say one is https://cdn.domestic.com and the other is https://cdn.overseas.com And we use nginx to figure out whether a user is domestic or overseas, and serve them different html entries. That says, if user is domestic, serve them a html file that refers to JS files from https://cdn.domestic.com and when user is overseas serve them another html file that refers to js files hold on https://cdn.overseas.com As I didn't find a good solution to pass an array to next cdnUrl or vite base config to make them build two sets of assets that use different cdnURL. I set the cdnURL/base to https://cdn.domestic.com and after build, I duplicate the files that has https://cdn.domestic.com string, and replace this cdn string with https://cdn.overseas.com, and then make nginx points to different entries according to users' geo location. and upload the JS and CSS files onto their related CDN. And for nuxt and nuxt-security, I found sriHashes has the string https://cdn.domestic.com in server/chunks/runtime.mjs file. I think it is not wise to duplicate this file and make two versions servers runnning, and it should be only one server running. So how can I make https://cdn.overseas.com files also included in sriHashes? Thanks a lot for your kindness!

I suppose you are building a static application (nuxi generate) and not an SSR/hybrid application (nuxi build), right ?

No, we use SSR (nuxi build), we used to use SPA, and here's the problem

[vejja]

Then I'm not sure I get it

• When the client hits your SSR server, the CDN url in the HTML is always cdn.domestic.com. How do you rewrite domestic to overseas on the fly then ?
• How is Nginx involved in that process ? If the HTML files are generated on the fly by the SSR server, how can nginx serve a different file for the overseas user ?

Sorry to ask so many questions, I think I might have misunderstood your setup

[Shana-AE]

Then I'm not sure I get it

• When the client hits your SSR server, the CDN url in the HTML is always cdn.domestic.com. How do you rewrite domestic to overseas on the fly then ?
• How is Nginx involved in that process ? If the HTML files are generated on the fly by the SSR server, how can nginx serve a different file for the overseas user ?

Sorry to ask so many questions, I think I might have misunderstood your setup

Anyway, Thank you for your help! Help is always a help 🙏 Sorry for not being clear. I also asked at nuxt discord and github disscussion, but got no answer 😢

• Before the client hit my SSR server, there is a nginx to judge which html file that contains right cdn url to use. For example, if a overseas user is visiting, then the nginx get it, and use overseas/index.html (which I copied and modified cdn.domestic.com to cdn.overseas.com) to serve, and when a domestic user visited, nginx will serve domestic/index.html So I didn't rewrite the html file on the fly (though it maybe possible to use nginx sub_filter directive to achieve that, I didn't try). This part is about the static things
• Maybe I'm wrong, but as I know, some html files are generated by SSR server, and some file are prerendered by crawler. The later is static, so I handled it with the method I mentioned above.
  And about the html generated by SSR, I'm trying to solve it. nginx can pass which cdn to use through header or something else. But I haven't find a way to change cdnURL dynamically.

I used to think runtimeConfig.cdnURL can be modified, but I've known I'm wrong, so I'm totally confused how to get the result I want. and how do people handle the similar requirement. like choosing a better cdn on the fly, or provide a high usable service by changing cdn when some cdn is down or just too slow

[vejja]

@Shana-AE let's have this discussion offline on Discord