mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-17 14:27:02 +08:00
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:
@@ -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>`
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user