title: Security error loading subtitles on HTML video
body: <p>so I'm encountering some unexpected behavior with subtitles on an HTML5 video.</p>
  <p>I am storing my video + subtitles files on Google Cloud Storage and I have a web interface to watch the movies.</p>
  <p>My server generates signed URLs for the movie and subtitle files. The movies play fine, and I can view the subtitle text content using the URL. However, using the <code>&lt;track&gt;</code> does not work:</p>
  <pre><code>&lt;track label=&quot;my_subtitle_file&quot; src=&quot;my_signed_url&quot; srclang=&quot;en&quot; kind=&quot;subtitles&quot;&gt;
  </code></pre>
  <p>In Firefox I get an error:</p>
  <pre><code>Security Error: Content at &lt;my site&gt; may not load data from &lt;signed GCS url&gt; 
  </code></pre>
  <p>In Chrome I get a slightly different error, but I imagine it's the same problem:</p>
  <pre><code>Unsafe attempt to load URL &lt;signed GCS URL&gt; from frame with URL &lt;my site&gt;.
  Domains, protocols and ports must match.
  </code></pre>
  <p>I suppose I <em>could</em> make a wrapper endpoint on my backend, which fetches the content of the file and serves it. But I am wondering, is there another way? And why do <code>&lt;track&gt;</code> nodes have this severe restriction?</p>
  <p><em>edit</em></p>
  <p>I added a CORS policy to the GCS bucket:</p>
  <pre><code>[
    {
      &quot;origin&quot;: [&quot;https://my-domain.com&quot;],
      &quot;responseHeader&quot;: [&quot;Content-Type&quot;],
      &quot;method&quot;: [&quot;GET&quot;],
      &quot;maxAgeSeconds&quot;: 3600
    }
  ]
  </code></pre>
  <p>On the GCS Console I also tried removing the &quot;prevent public access setting&quot;. I didn't make the files public though (I still want to require presigned URLs), but it seems GCS is kinda wierd in that you can turn of &quot;prevent public access&quot; without actually making it public.</p>