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
@@ -64,7 +64,7 @@ test('should render correct html', async t => {
t.true(
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(
res.text.includes(
`<script src="https://app.affine.pro/main.c.js"></script>`
`<script src="https://app.affine.pro/main.c.js" crossorigin></script>`
)
);
});
@@ -194,11 +194,11 @@ export class DocRendererController {
${Object.entries(envMeta)
.map(([key, val]) => `<meta name="env:${key}" content="${val}" />`)
.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>
<body>
<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>
</html>
`;
+26
View File
@@ -81,6 +81,7 @@ function getHTMLPluginOptions(BUILD_CONFIG: BUILD_CONFIG_TYPE) {
minify: false,
templateParameters: templateParams,
chunks: ['app'],
scriptLoading: 'blocking',
} 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(
BUILD_CONFIG: BUILD_CONFIG_TYPE,
config: CreateHTMLPluginConfig
@@ -206,6 +228,10 @@ export function createHTMLPlugins(
);
}
if (!BUILD_CONFIG.isElectron) {
plugins.push(CorsPlugin);
}
if (config.emitAssetsManifest) {
plugins.push(AssetsManifestPlugin);
}