title: allow CORS for variable sharing on two local html pages
body: <p>I am building a little web app that has an admin page and a public dashboard running at the same time which need to communicate with each other in only one way (admin -&gt; dashboard) (<a href="https://github.com/MarcBresson/bourse-boissons/" rel="nofollow noreferrer">see the repo</a>). The local file structure is the following :</p>
  <pre><code>HTML
   =&gt; admin.html
   =&gt; dashboard.html
  </code></pre>
  <p>I came across the possibility to open the dashboard with <code>window.open(&quot;dashboard.html&quot;)</code>, and, from there, access any object from the admin web page with <code>window.opener.any_variable</code>.</p>
  <p>However, despite my two windows being local (same port, same <code>file:</code> protocol, same hostname), the window.opener is Restricted on both Chrome and Firefox, probably because of CROS.</p>
  <p>Do you know any way to allow my two windows to access each other variables with window.opener.any_variable method ?</p>
  <p>So far, I tried a few meta tag in the HEAD :</p>
  <pre><code>&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;child-src file: *; connect-src file: *; frame-src file: *; worker-src file: *&quot;&gt;
  &lt;meta http-equiv=&quot;Cross-Origin-Opener-Policy&quot; content=&quot;same-origin-allow-popups&quot;&gt;
  &lt;meta http-equiv=&quot;Cross-Origin-Embedder-Policy&quot; content=&quot;require-corp&quot;&gt;
  </code></pre>
  <p>I always have the backup solution to serialize everything and use the localStorage API, but it is a pain to use because I use custom objects.</p>