HTML
JavaScript

crossorigin なしの <link rel="prefetch"> で Amazon S3 上の JS を読んではいけない

More than 1 year has passed since last update.

テストページ

Amazon S3 では Origin 送ったときにしか CORS 関係のヘッダを返してくれないっぽい。

<link rel="prefetch"> でリクエストしちゃうと Chrome は origin が付かない上にそれをキャッシュしちゃう。

そして肝心の script タグでの読み込みの時に、そのキャッシュをそのまま使っちゃうので、 CORS ヘッダが無いという理由で読み込みに失敗する :cry:

Vary ヘッダで Access-Control-Allow-Origin とか返せば動きそうだけど、そこも S3 の範疇……。


ソース

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<title>crossorigin test</title>
<link rel="prefetch" href="https://s3-ap-northeast-1.amazonaws.com/macoshita-test-crossorigin/main.js"
crossorigin> <!-- important -->
</head>
<body>
<h1>crossorigin prefetch test (maybe success)</h1>
<a id="test" href="javascript:void(0)">Click to load script</a>
<script>
document.getElementById('test').addEventListener('click', function () {
const script = document.createElement('script')
script.src = 'https://s3-ap-northeast-1.amazonaws.com/macoshita-test-crossorigin/main.js'
script.crossOrigin = 'crossorigin'

document.getElementsByTagName('head')[0].appendChild(script)
}, false)
</script>
</body>
</html>

この記事の英語版