chore: add crossorigin to resource tags (#12031)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added the crossorigin attribute to all CSS and JavaScript tags in generated HTML, improving compatibility for cross-origin resource loading.

- **Tests**
  - Updated tests to verify the presence of the crossorigin attribute in script tags.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
forehalo
2025-04-28 12:25:13 +00:00
parent 21dc550b9d
commit 4662ee8da7
3 changed files with 30 additions and 4 deletions

View File

@@ -64,7 +64,7 @@ test('should render correct html', async t => {
t.true( t.true(
res.text.includes( res.text.includes(
`<script src="https://app.affine.pro/main.a.js"></script>` `<script src="https://app.affine.pro/main.a.js" crossorigin></script>`
) )
); );
}); });
@@ -78,7 +78,7 @@ test.skip('should render correct mobile html', async t => {
t.true( t.true(
res.text.includes( res.text.includes(
`<script src="https://app.affine.pro/main.c.js"></script>` `<script src="https://app.affine.pro/main.c.js" crossorigin></script>`
) )
); );
}); });

View File

@@ -194,11 +194,11 @@ export class DocRendererController {
${Object.entries(envMeta) ${Object.entries(envMeta)
.map(([key, val]) => `<meta name="env:${key}" content="${val}" />`) .map(([key, val]) => `<meta name="env:${key}" content="${val}" />`)
.join('\n')} .join('\n')}
${assets.css.map(url => `<link rel="stylesheet" href="${url}" />`).join('\n')} ${assets.css.map(url => `<link rel="stylesheet" href="${url}" crossorigin />`).join('\n')}
</head> </head>
<body> <body>
<div id="app" data-version="${assets.gitHash}"></div> <div id="app" data-version="${assets.gitHash}"></div>
${assets.js.map(url => `<script src="${url}"></script>`).join('\n')} ${assets.js.map(url => `<script src="${url}" crossorigin></script>`).join('\n')}
</body> </body>
</html> </html>
`; `;

View File

@@ -81,6 +81,7 @@ function getHTMLPluginOptions(BUILD_CONFIG: BUILD_CONFIG_TYPE) {
minify: false, minify: false,
templateParameters: templateParams, templateParameters: templateParams,
chunks: ['app'], chunks: ['app'],
scriptLoading: 'blocking',
} satisfies HTMLPlugin.Options; } satisfies HTMLPlugin.Options;
} }
@@ -154,6 +155,27 @@ const GlobalErrorHandlerPlugin = {
}, },
}; };
const CorsPlugin = {
apply(compiler: Compiler) {
compiler.hooks.compilation.tap('html-js-cors-plugin', compilation => {
HTMLPlugin.getHooks(compilation).alterAssetTags.tap(
'html-js-cors-plugin',
options => {
if (options.publicPath !== '/') {
options.assetTags.scripts.forEach(script => {
script.attributes.crossorigin = true;
});
options.assetTags.styles.forEach(style => {
style.attributes.crossorigin = true;
});
}
return options;
}
);
});
},
};
export function createHTMLPlugins( export function createHTMLPlugins(
BUILD_CONFIG: BUILD_CONFIG_TYPE, BUILD_CONFIG: BUILD_CONFIG_TYPE,
config: CreateHTMLPluginConfig config: CreateHTMLPluginConfig
@@ -206,6 +228,10 @@ export function createHTMLPlugins(
); );
} }
if (!BUILD_CONFIG.isElectron) {
plugins.push(CorsPlugin);
}
if (config.emitAssetsManifest) { if (config.emitAssetsManifest) {
plugins.push(AssetsManifestPlugin); plugins.push(AssetsManifestPlugin);
} }