Add crossorigin integrity attributes to external cdn link for css

[yufengle]

What problem does this feature solve?

recent "Chrome secure-by-default model for cookies" seems to require crossorign attribute to be added in the following scenario:

<style scoped> @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"; </style>


currently, the above code generates <link href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet> in index.html

desired output would be <link href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css crossorigin=anonymous rel=stylesheet> when extra args are provided for @import

There may be some workaround other than manually edit index.html, if so, please advise. Thanks!

similar but different request #2025 #2025

What does the proposed API look like?

not sure, maybe something like
@import("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", "crossorigin=anonymous");

[LinusBorg]

recent "Chrome secure-by-default model for cookies" seems to require crossorign attribute to be added in the following scenario:

Do you have any source or further info on this?

[yufengle]

Do you have any source or further info on this?

It first showed up with a simple jquery/datatables project. External links such as

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/b-html5-1.6.1/fc-3.3.0/kt-2.5.1/r-2.2.3/sl-1.3.1/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/b-html5-1.6.1/fc-3.3.0/kt-2.5.1/r-2.2.3/sl-1.3.1/datatables.min.js">
</script>

cause the following warnings from chrome. In fact, in my case, they are errors, since the css and js won't be loaded. To reproduce, one might have to clear browser cache.

A cookie associated with a cross-site resource at http://datatables.net/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under ...

I have tried to play with my apache server config, with no luck, following some suggestion from https://stackoverflow.com/questions/58363553/how-can-i-resolve-a-cross-site-google-analytics-cookie-samesite-none-warning-i https://stackoverflow.com/questions/58270663/samesite-warning-chrome-77
I guess what considered to be 'secure' needs more than 'https". After some trial and error, it turned out that adding crossorigin=anaonymous solved the problem.

For my Vue project, the symptom was different. The page generated "Resource interpreted as Stylesheet but transferred with MIME type text/html: " for font-awesome.min.css in my first post. I have no idea why, maybe something to do with how vue cache data. Anyway, by adding crossorigin manually in index.html cleared out the warnings. Without the 'samesite' experience happening at the same time, I would never thought they were related. Maybe they really weren't :)