title: XSLT in Chrome extension: Unsafe attempt to load URL
body: <p>I'm writing a Chrome extension which should apply XSLT transform to certain XML documents on the fly. Just for testing I use the following XML and XSL files:</p>
  
  <p><strong>XML:</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
  &lt;WebServiceMessage&gt;
   &lt;status&gt;timeout&lt;/status&gt;
   &lt;message&gt;Nameserver%2520not%2520registered.&lt;/message&gt;
   &lt;stepName&gt;Finish&lt;/stepName&gt;
   &lt;stepNumber&gt;11&lt;/stepNumber&gt;
   &lt;maxStepNumber&gt;11&lt;/maxStepNumber&gt;
   &lt;percent&gt;100&lt;/percent&gt;
   &lt;session&gt;2fc0f139b88a800151e5f21b9d747919&lt;/session&gt;
  &lt;/WebServiceMessage&gt;
  </code></pre>
  
  <p><strong>XSL:</strong></p>
  
  <pre><code>&lt;?xml version="1.0" ?&gt;
  &lt;xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
    &lt;xsl:template match="/"&gt;
      &lt;html&gt;&lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
        &lt;xsl:apply-templates/&gt;
      &lt;/body&gt;
      &lt;/html&gt;
    &lt;/xsl:template&gt;
    &lt;xsl:template match="*"&gt;
      &lt;xsl:for-each select="*"&gt;
        &lt;p&gt;&lt;b&gt;&lt;xsl:value-of select ="name(.)"/&gt;&lt;/b&gt;:
        &lt;span&gt;&lt;xsl:attribute name="id"&gt;&lt;xsl:value-of select ="name(.)"/&gt;&lt;/xsl:attribute&gt;&lt;xsl:value-of select="."/&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;/xsl:for-each&gt;
    &lt;/xsl:template&gt;
  &lt;/xsl:stylesheet&gt;
  </code></pre>
  
  <p>The tranfromation works normally if it's linked inside a test XML file itself, that is via:</p>
  
  <pre><code>&lt;?xml-stylesheet type="text/xsl" href="message.xsl"?&gt;
  </code></pre>
  
  <p>The extension should inject the same xsl link into XML-files.</p>
  
  <p><strong>manifest.json:</strong></p>
  
  <pre><code>{
    "permissions": ["tabs", "&lt;all_urls&gt;"],
    "content_scripts":
    [
      {
        "matches": ["&lt;all_urls&gt;"],
        "js" : ["contentscript.js"]
      }
    ],
    "web_accessible_resources":
    [
      "message.xsl"
    ],
    "manifest_version": 2
  }
  </code></pre>
  
  <p><strong>contentscript.js:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>(function()
  {
    if(document.xmlVersion != null)
    {
       var e = document.createProcessingInstruction(
                 "xml-stylesheet",
                 "type='text/xsl' href='" + chrome.extension.getURL("message.xsl") + "'");
       document.insertBefore(e, document.firstChild);
    }
  })();
  </code></pre>
  
  <p><strong>The problem</strong></p>
  
  <p>Chrome outputs the following error into console:</p>
  
  <p><em>Unsafe attempt to load URL <code>chrome-extension://ladfinoepkgipbeooknnklpakoknohjh/message.xsl</code> from frame with URL <code>http://localhost/out.xml</code>. Domains, protocols and ports must match.</em></p>
  
  <p>How to fix this? I saw some reports on the Internet related to similar errors, which seems like a bug in Chrome.</p>
  
  <p>I placed the xsl-file on the web-server as well, and changed styleheet link to the web-server. Still the same error:</p>
  
  <p><em>Unsafe attempt to load URL <code>http://localhost/message.xsl</code> from frame with URL <code>http://localhost/out.xml</code>. Domains, protocols and ports must match.</em></p>
  
  <p>Apparently domains, protocols, and ports <strong>do match</strong>.</p>