none
Mixed content error when trying to access a http rss reader from an https page (SharePoint Framework) RRS feed

  • Question

  • Hi, guys

    I have an issue and I’m not sure where to post it. I couldn’t find a particular forum for TypeScript and SharePoint Framework, so I'll post it here and see if I’ll get lucky.

    I’m building a simple SPFx RSS reader that can be used from both modern and classic pages in SharePoint Online. The web part is configurable and can be used to read any rss feed.

    The problem occurs when I try to access a http feed from my https environment.

    I get a ”mixed content” error from the browser and I understand that this is a security issue. I’ve done a lot of googling and I think this can be solved by providing some header information to the call, but unfortunately I don’t have any deep knowledge in http communication. I need some sturdy sample code to follow.

    I appreciate any help I can get, thanks!

    I have tried two approaches, both failed due to the issue mentioned above. This is the first one using XMLHttpRequest:

    var xhr = new XMLHttpRequest();
    
    xhr.onreadystatechange = function(){
      if (xhr.readyState==4 && xhr.status==200)
      {
        // All is fine if we end up here... But we don’t, xhr.status is 0
        console.log(xhr.responseText);
      }
    };
    xhr.open('GET', "http://SomeRssFeed", true);
    xhr.send();
    

    Reply from IE:

    Access is denied, error -2147024891

    Reply from Chrome:

    Mixed Content: The page at 'https://localhost:4321/temp/workbench.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://SomeRssFeed'. This request has been blocked; the content must be served over HTTPS.

    FireFox:

    Blocked loading mixed active content “http://SomeRssFeed”

    My second approach is using fetch like this:

    fetch("http://SomeRssFeed").then((res:any) => {
      console.log(res);
    }).catch((err) => console.error(err));
    

    Reply from IE:

    Access is denied, error -2147024891

    Chrome:

    Mixed Content: The page at 'https://localhost:4321/temp/workbench.html' was loaded over HTTPS, but requested an insecure resource 'http://SomeRssFeed'. This request has been blocked; the content must be served over HTTPS.

    TypeError: Failed to fetch

    FireFox:

    Blocked loading mixed active content “http://SomeRssFeed”

    Wednesday, September 20, 2017 8:53 AM