Description
Don't know if it is a new issue for you, I just met it in our site.
Description
Just look at the following HTML code. There are two script tags in the page, one is statically written and the other is added by jQuery. And they are almost the same except a small difference on the src.
Steps:
- Put this page on a html server, and get a link to that page.
- Open your browser, I used chrome v78.
- New tab and press F12 to open the dev tool.
- Change to the Network tab.
- Open the link you got in 1st step.
- Observe the network.
Expect: Both jquery-3.4.1.min.js && jquery-3.4.1.min.js?cors should be issued with the http header "Origin"
Result: Only jquery-3.4.1.min.js is issued with the "Origin" header, the other one is not.
When this issue happened, the browser caches the response of jquery-3.4.1.min.js?cors which has no CORS headers. And if other pages use this script with SRI, it will be blocked. Because it matches the cache but the cache does not contain a CORS header like "Access-Control-Allow-Origin".
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script>
$(function(){
$("#container").html('<script src="//code.jquery.com/jquery-3.4.1.min.js?cors" crossorigin="anonymous" ><\/script>');
alert('done');
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>