Optimised font isn't listed in CSP #68
Comments
|
|
|
Hi @Shamilik On the failed scriptsIs the respective route where the load fails with If so, you need to wrap the exported data fetching function with If not, this is super strange. With the new proxy loading mode, the actual scripts wouldn't even be in the DOM in case of a missing hash in CSP. So if the proxy loader can execute, but the inserted scripts get blocked, that would violate the transitive trust semantics of An inline proxy loader looks like this:<script id="Yedj62rQfq60uPH64PMXT3QyQOhTx9o6R8Xh7QgjDw8=" integrity="sha256-b0G+uhdQVb4QIV+2wcWxkz/zpRluWegXaRWsuzRpIao=">(function () {
var s0 = document.createElement('script');
s0.async=false;s0.crossOrigin='anonymous';s0.defer=true;s0.src='/_next/static/chunks/webpack-fdfc059437936d2e.js';
var s1 = document.createElement('script');
s1.async=false;s1.crossOrigin='anonymous';s1.defer=true;s1.src='/_next/static/chunks/framework-8e84920140c7484e.js';
var s2 = document.createElement('script');
s2.async=false;s2.crossOrigin='anonymous';s2.defer=true;s2.src='/_next/static/chunks/main-493ad903cf8fb0b9.js';
var s3 = document.createElement('script');
s3.async=false;s3.crossOrigin='anonymous';s3.defer=true;s3.src='/_next/static/chunks/pages/_app-7fb09efe43f5ca1a.js';
var s4 = document.createElement('script');
s4.async=false;s4.crossOrigin='anonymous';s4.defer=true;s4.src='/_next/static/chunks/618-96dee7e359cd4890.js';
var s5 = document.createElement('script');
s5.async=false;s5.crossOrigin='anonymous';s5.defer=true;s5.src='/_next/static/chunks/571-4efa2b5b3651989b.js';
var s6 = document.createElement('script');
s6.async=false;s6.crossOrigin='anonymous';s6.defer=true;s6.src='/_next/static/chunks/pages/index-1879bc8b71df0035.js';
var s7 = document.createElement('script');
s7.async=false;s7.crossOrigin='anonymous';s7.defer=true;s7.src='/_next/static/Z4vsrxjeHVcl6pZc5u9PF/_buildManifest.js';
var s8 = document.createElement('script');
s8.async=false;s8.crossOrigin='anonymous';s8.defer=true;s8.src='/_next/static/Z4vsrxjeHVcl6pZc5u9PF/_ssgManifest.js';
var s = [s0,s1,s2,s3,s4,s5,s6,s7,s8];
var self = document.getElementById('Yedj62rQfq60uPH64PMXT3QyQOhTx9o6R8Xh7QgjDw8=');
var p = self.parentNode;
p.removeChild(self);
s.forEach(function(si) {
p.appendChild(si);
});
})()
</script>Do the script problems on your site also occur with other browsers (Chrome, Firefox ...)? Workaround for the font optimization problemThe output of Next font optimization can't be picked up during SSR of Fortunately, there is a simple workaround: next-safe-middleware/apps/e2e/pages/_document.tsx Lines 29 to 33 in f293383 next-safe-middleware/apps/e2e/pages/_document.tsx Lines 70 to 90 in f293383 I will also draft a bug template with a checklist tailored to Next+CSP-related bugs. |
|
I am closing this, as the font optimization thing can't be handled automatically and needs the workaround For the script issues: I am going to release I also recorded a basic click-through test of the e2e app with Safari+strict-dynamic on a iPad Pro Device (#69 (comment)) and couldn't spot any issue there, also not in the docs project. |
|
Can this be added in big red letters in documentation? I spent hours searching why I am getting inline style errors, only to discover the fonts are auto-inlined. Do you pass nonce to (as nextjs recommends)? If yes, then the issue is on nextjs team, as they should be passing this down to inlined style |
|
You can disable font-optimization by adding |
Optimised font isn't listed in CSP in Safari & Chrome
https://nextjs.org/docs/basic-features/font-optimization
Also there is some problem with scripts, but I still didn't realise what exactly.
The text was updated successfully, but these errors were encountered: