title: Using WebAssembly inside chrome sandbox
body: <p>I have a chrome extension that includes a complicated function <code>comp_func(data)</code> which takes a lot of CPU by performing many bitwise operations. Because of that, I'm trying to use WebAssembly.
  After many tries I came to a conclusion that due to permissions issues I need to use this function inside a sandbox.</p>
  
  <p>Right now I'm trying to follow <a href="https://tutorialzine.com/2017/06/getting-started-with-web-assembly" rel="nofollow noreferrer">this WebAssembly tutorial</a> and <a href="https://developer.chrome.com/apps/sandboxingEval" rel="nofollow noreferrer">this Sandbox example</a>  as an "hello world" example for my problem.</p>
  
  <p>The WebAssembly files includes: <code>index.js</code> and <code>index.wasm</code>,
  The sandbox files is: <code>sandbox.html</code>,
  <code>page.js</code> is the code of the extension that need to perform <code>comp_func(data)</code> and is using <code>postMessage</code> as a way to communicate to <code>sandbox.html</code>.
  <code>background.html</code> is the background file of the extension. </p>
  
  <p>This is what I have so far:</p>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>   "sandbox": {
       "pages": ["sandbox.html"]
     },
  </code></pre>
  
  <p><strong>background.js</strong></p>
  
  <pre><code>&lt;script src="page.js"&gt;&lt;/script&gt;
  &lt;iframe id="theFrame" src="sandbox.html" style="display: none;"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p><strong>sandbox.html</strong></p>
  
  <pre><code>&lt;html&gt;
        &lt;body&gt;
          &lt;script src="index.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          var result = _roll_dice(); //the function of the WebAssembly
          console.log('results! ', result);
          &lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>So, right now the extension is calling <code>sandbox.html</code> who in turn loading <code>index.js</code>, but then I get the error:</p>
  
  <blockquote>
    <p>Failed to load
    chrome-extension://<strong>index.wasm</strong>: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin 'null' is therefore not allowed access. If an opaque
    response serves your needs, set the request's mode to 'no-cors' to
    fetch the resource with CORS disabled.</p>
  </blockquote>
  
  <p>From what I understand, <code>index.js</code> is calling <code>index.wasm</code> and because I'm inside a sandbox there is a problem with <strong>CORS</strong> permissions.
  Is someone know what is the solution in this case?</p>