1

I implemented a ifame inside my angular app, first it blocked the resource, then i added a pipe to access the resource and now the browser is blocking it because of mixed content because its not loading the content over https

stundenplan.component.ts:

<div class="col-sm-9 content">
<div class="dashhead">
<div class="dashhead-titles">
<h6 class="dashhead-subtitle">TeamCloud</h6>
<h2 class="dashhead-title">Stundenplan</h2>
</div>

</div>

<hr class="m-t">

<div class="container">
  <iframe style="width: 100%; height: 900px;" frameborder="0" [src]="'http://******' | safeIframe"></iframe>
</div> <!-- /container -->

</div>

safe-iframe.pipe.ts:

import { DomSanitizer } from '@angular/platform-browser';
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'safeIframe'
})
export class SafeIframePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer){}
  transform(url:string) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

error im getting when loading the page Mixed Content: The page at 'https://teamcloud.******/stundenplan' was loaded over HTTPS, but requested an insecure resource 'http://******'. This request has been blocked; the content must be served over HTTPS

Vezh
  • 120
  • 2
  • 9

1 Answers1

1

This is a browser-restriction; when on a secure (HTTPS) page, browsers will refuse to load insecure active content (e.g.: scripts, iframes) by default. It's not a problem you solve with Angular. You basically have 3 options:

  1. Override the browser default. Instructions for this will change from browser to browser, but it must be done by every user. Probably won't happen
  2. Use an HTTPS url as your iframe source. If the content you want is not delivered over HTTPS, I'm afraid you'll have to go through some trouble such as setting up your own HTTPS proxy. Not fun
  3. Access/serve the main page over HTTP, so the browser will have no mixed-content complaints when the iframe is also just HTTP
BeetleJuice
  • 39,516
  • 19
  • 105
  • 165