CODEWITHSUNDEEP
htmlfirefoxiframesame-origin-policyazure-devops-extensions
Sedenion
Sedenion

Reputation: 6142

Authentication for images on same origin in iframe works automatically in Edge but not in Firefox?

Preliminary note: I don't think that my question requires any knowledge about Azure DevOps, but more about the general authentication mechanism in iframes.

I am maintaining an Azure DevOps extension (HistoryDiff, source on GitHub) and I observe different authentication behavior between Edge (and Chrome) on the one hand, and Firefox on the other hand. To give a bit of context: When the extension is installed, Azure DevOps includes a new button in one of its standard pages that, when clicked, will call my extension's javascript code and then shows the content generated by my extension within an <iframe> element on the page. The extension gets the content from somewhere else in Azure DevOps via some REST APIs. The content might include image URLs (think about images that were entered by a user in some description field). The resulting page then looks like this:

<!-- iframe itself generated by Azure DevOps -->
<iframe frameborder="0" class="external-content-iframe" id="externalContentHost298" name="externalContentHost298" role="presentation" style="display: inline;" 
    sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-scripts allow-top-navigation" 
    src="http://example.com/_apis/public/gallery/publisher/Sedenion/extension/HistoryDiff/1.5.1.0/assetbyname/dist/historydiff.html">
  <!-- Everything from here on is under my control. -->
  <head>...</head>
  <body>
    <!-- Content generated by my extension, also including an image: -->
    <img src="http://example.com/DefaultCollection/2d63f741-0ba0-4bc6-b730-896745fab2c0/_apis/wit/attachments/cc9d8201-3476-4355-9b84-f0ab9eb38395?fileName=Icon.png" alt="Image" style="width:69px;height:67px;" width="69" height="67">
    <!-- More stuff ... -->
  </body>
</iframe>

I open the browser and navigate to the standard Azure DevOps page (in the example e.g. http://example.com/DefaultCollection/TestProject/_workitems/edit/2/). I need to login using my credentials to access it, on both Edge/Chrome and Firefox. My extension is not yet involved. Then I click the button that will cause Azure DevOps to load my extension, which will generate the above shown html. Now comes the interesting part: Edge/Chrome loads and displays the page including the image just fine, without asking me again for my credentials, while Firefox requests me to authenticate again. This happens when the browser attempts to fetch the image. If I decline to authenticate a second time, the image does not load (in the developer tools, I see a "401 Unauthorized").

A few things of note:

Can someone explain the different behavior of the browsers? Is there any way to omit the second authentication step in Firefox (e.g. via some browser configuration)?

Upvotes: 0

Views: 50

Answers (0)

Related Questions